文章目录
- 前言
- 一、Vue基础语法
- 二、本地运用
- 三、网络运用
- 总结
前言
Vue前端人员需看完整知识点体系，本知识点只是作为Vue入门，还有主要学习后端的，想了解Vue的，能上手简单的运用Vue的人群。如想要做前端开发，还需要学的更细致些。
基本介绍Vue：
1.Vue.js目前最火的的一个前端框架，三大主流前端框架之一。
2.Vue.js是一套构建用户界面的框架（一套完整的解决方案，对项目侵入性大，中途需要跟换框架则需要重构整个项目），只关注视图层，易上手，有配套的第三方类库。
3.提高开发效率，帮助减少不必要的dom操作；双向数据绑定，通过框架提供的指令，前端只需要关注业务逻辑，不再关心dom如何渲染。
一、Vue基础语法
1.初学Vue
Vue中hello案例的练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue基础</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el: "#app",
data:{
message: "你好Vue!"
}
})
</script>
</body>
</html>
第一步：引入Vue需要的资源：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>第二步：写一个div
<div id="app">
{{ message }}
</div>第三步： 在script标签中new一个Vue,在里面写相应的内容
<script>
var app=new Vue({
el: "#app",
data:{
message: "你好Vue!"
}
})
</script>效果图：
2.初学Vue中的el:挂载点
挂载点说的就是如下图所示的红色框内的东西。
el:后面“ ”中放的是选择标签的id、class或标签。一般情况下都是用id选择器。
如图：
代码及运行结果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>el:挂载点</title>
</head>
<body>
<!-- el外部不会被执行 -->
{{ message }}
<div id="app" class="app">
{{ message }}
<p>{{ message }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app=new Vue({
//三种选择器都可以用，但一般用id选择器。
el:"#app",//id选择器
// el:".app",类选择器
// el:"div",标签选择器
data:{
message:"小白"
}
})
</script>
</body>
</html>
3.初学Vue中的data:数据对象
data:后面的{ }里的所有数据对象。
data:中可以存储字符串、对象、数组等。
对象获取的方法：对象名. 。
数组获取方法：数组名[index].
如图：
代码及运行结果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>data:数据对象</title>
</head>
<body>
<div id="app">
{{ message }}
<h2>{{ school.class }} {{ school.student }}</h2>
<ul>
<li>{{ arr[0] }}</li>
<li>{{ arr[1] }}</li>
<li>{{ arr[2] }}</li>
<li>{{ arr[3] }}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var app=new Vue({
el:"#app",
data:{
message:"你好，小黑！",
school:{
class:"1班",
student:"张三"
},
arr:["数据库","java","ssm","springboot"]
}
})
</script>
</body>
</html>
二、本地运用
1.v-text指令学习
v-text的用法：
相同点：<h2 v-text="message"></h2> 相当于 <h2>{{ message }}</h2>
不同点：<h2 v-text="message"></h2>这样写获取message值时会覆盖h2中原有的内容。而后者不会覆盖。
如图：
这里的第二个方框中是差值表达式只是简单的“+”号举例子，在复杂的运用中我们还可以写语句等。
运行结果上图，代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-text学习</title>
</head>
<body>
<div id="app">
<h2 v-text="message">覆盖了标签内的值</h2>
<h2>{{ info }}</h2>
<h2>差值表达式:</h2>
<h2 v-text="message+'学习'">覆盖了标签内的值</h2>
<h2>{{ info }}学习</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app=new Vue({
el:"#app",
data:{
message:"Vue1",
info:"Vue2"
}
})
</script>
</body>
</html>
2. v-html指令学习
v-html和v-text差不多，只不过v-text是直接把内容输出，不会进行转义，而v-html是可以进行转义的。举个例子说明v-html的用法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-html指令</title>
</head>
<body>
<div id="app">
<!-- 解析标签 -->
<p v-html="message"></p>
<!-- 只是文本 -->
<p v-text="message"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var app=new Vue({
el:"#app",
data:{
message:"<a href='/'>黑马</a>"
}
})
</script>
</body>
</html>
注意观察红色框内的不同：
运行结果，从运行结果我们可看出不同的地方：
3.v-on指令学习
v-on：后面是加事件的，如v-on:click，就是点击事件。当点击时，就会调用v-on:click=“函数名”中函数名用methods:里面定义该方法进行相应的操作。
v-on:可以简写为@符号代替：如@click=“函数名”。
如图所示：
this是可以直接指向data数据对象中的数据，可以用this.food对data数据对象中的数据进行操作。
具体大家可以复制代码运行感受。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-on指令(绑定事件)</title>
</head>
<body>
<div id="app">
<input type="button" value="v-on指令" v-on:click="doIt()"/>
<input type="button" value="v-on简写" @click="doIt()"/>
<input type="button" value="双击事件" @dblclick="doIt()"/>
<h2 @click="changeFood()">{{ food }}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var app=new Vue({
el:"#app",
data:{
food:"西红柿炒鸡蛋"
},
methods:{
doIt:function(){
alert("做It");
},
changeFood:function(){
// 内部用this调用
this.food+="好好吃!"
}
}
})
</script>
</body>
</html>
运行结果：
4.计数器小练习
练习不做讲解，都是上述知识点的总结，看不懂的可以多去学学上述知识点。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计数器练习</title>
</head>
<body>
<div id="app">
<button type="button" @click="sub">-</button>
<span>{{ num }}</span>
<button type="button" @click="add">+</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var app=new Vue({
el:"#app",
data:{
num:0,
},
methods:{
sub:function(){
if(this.num>0){
this.num--;
}else{
alert("被点了,已经是最小值！");
}
},
add:function(){
if(this.num<10){
this.num++;
}else{
alert("被点了,已经是最大值！");
}
}
}
})
</script>
</body>
</html>
运行结果：
5.v-show指令学习
v-show指令的作用是：根据真假切换元素的显示状态。
原理是修改元素的display，实现显示隐藏。
指令后面的内容，最终都会解析为布尔值。
值为true元素显示，值为false元素隐藏。
执行过程如图所示，v-show="可以填表达式"，下面因为age=17，就不会显示第二张图：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-show指令</title>
</head>
<body>
<div id="app">
<input type="button" value="点我改变状态" @click="change()"/>
<img v-show="isShow" src="../img/wzj.jpg" >
<img v-show="age>=18" src="../img/wzj.jpg" >
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var app=new Vue({
el:"#app",
data:{
isShow:false,
age:17
},
methods:{
change:function(){
// 取反
this.isShow=!this.isShow;
}
}
})
</script>
</body>
</html>
运行结果，点击按钮图片进行隐藏，再次点击图片会显示：
6.v-if指令学习
v-if指令的作用是：根据表达式的真假切换元素的显示状态。
本质是通过操纵dom元素来切换显示状态。
表达式的值为true,元素存在dom树中，反之则从dom树中移除。
v-if和v-show一般在操作较多的时候会用v-show，因为v-show只是样式隐藏，标签还在。如果操作只一次，一般都会用到v-if。将标签移除。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-if指令</title>
</head>
<body>
<div id="app">
<input type="button" value="v-if指令" @click="flag()"/>
<p v-if="isShow">v-if指令显示效果</p>
<!-- 表达式 -->
<p v-if="age>=18">age18才能显示</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var app=new Vue({
el:"#app",
data:{
isShow:false,
// 表达式也可以
age:17
},
methods:{
flag:function(){
this.isShow=!this.isShow;
}
}
})
</script>
</body>
</html>
运行截图，点击一次显示出的：
7.v-bind指令学习
用来操作属性，如src
v-bind指令的作用是：为元素绑定属性。
完整写法是v-bind:属性名。
简写的话可以直接省略v-bind,只保留：属性名。
需要动态的增删class使用对象的方式。
代码解释：
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-bind指令</title>
<style type="text/css">
.active{
border: 5px solid salmon ;
}
</style>
</head>
<body>
<div id="app">
<img v-bind:src="imgSrc" >
<!-- 可简写 -->
<img :src="imgSrc" :title="imgtitle+'!!!'" :class="{active:is}" @click="isactive">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var app=new Vue({
el:"#app",
data:{
imgSrc:"../img/wzj.jpg",
imgtitle:"四大美女",
is:true
},
methods:{
isactive:function(){
this.is=!this.is;
}
}
})
</script>
</body>
</html>
运行结果：
8.图片转换练习
列表数据使用数组保存。
v-bind指令可以设置元素的属性，比如src.
v-show和v-if都可以切换元素的显示状态，频繁切换用v-show.
都是以前的知识点，代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片切换练习</title>
</head>
<body>
<div id="app">
<img :src="imgArr[index]" ><br>
<input type="button"value="上一张" v-show="index!=0" @click="prev()"/>
<input type="button"value="下一张" v-show="index<imgArr.length-1" @click="next()"/>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var app=new Vue({
el:"#app",
data:{
imgArr:["../img/wzj.jpg","../img/dc.jpg","../img/xx.jpg","../img/yyh.jpg"],
index:0
},
methods:{
prev:function(){
this.index--;
},
next:function(){
this.index++;
}
}
})
</script>
</body>
</html>
效果图，点击按钮就会切换到下一张图片：
9.v-for指令
v-for指令的作用是：根据数据生成列表结构。
数组经常和v-for结合使用。
语法是（i,index） in 数据。
i和index可以结合其他的指令一起使用。
数组长度的更新会同步到页面上，是响应式的。
代码运行流程：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-for指令</title>
</head>
<body>
<div id="app">
<input type="button" value="添加数据" @click="add"/>
<input type="button" value="删除数据" @click="remove"/>
<ul>
<li v-for="(i,index) in arr">
{{index+1}}想去的城市:{{ i }}
</li>
</ul>
<h2 v-for="j in arr1">{{j.name}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var app=new Vue({
el:"#app",
data:{
arr:["北京","上海","广州","深圳"],
// 数组存储对象
arr1:[
{name:"张三"},{name:"李四"}
]
},
methods:{
add:function(){
//增加
this.arr1.push({name:"王五"});
},
remove:function(){
//删除
this.arr1.shift();
}
}
})
</script>
</body>
</html>
效果图展示：
10.v-on指令（补充）
事件绑定的方法写成函数调用的形式，可以传入自定义参数。
定义方法时需要定义形参来接收传入的实参 。
事件的后面跟上 .修饰符 可以对事件进行限制。
.enter可以限制触发的按键为回车。
修饰符有很多，具体用到在解释。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-on指令(补充)</title>
</head>
<body>
<div id="app">
<input type="button" value="问候语" @click="doIt('张三')"/>
<input type="text" value="文本" @keyup.enter="sayHi"/>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var app=new Vue({
el:"#app",
methods:{
doIt:function(f1){
console.log("你好:"+f1);
},
sayHi:function(){
alert("写完了？");
}
}
})
</script>
</body>
</html>
运行效果图：
11.v-model指令学习
双向数据绑定
v-model指令的作用是便捷的设置和获取表单元素的值。
绑定的数据会和表单元素值相关联
绑定的数据 双向 表单的值
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-model指令</title>
</head>
<body>
<div id="app">
<input type="button" value="点击修改" @click="setM()"/>
<input type="text" v-model="message" @keyup.enter="getM()"/>
<h2>{{ message }}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var app=new Vue({
el:"#app",
data:{
message:"好好学习，多敲代码"
},
methods:{
getM:function(){
alert(this.message);
},
setM:function(){
this.message="多敲代码，好学习";
}
}
})
</script>
</body>
</html>
运行结果，点击修改按钮修改message的值看其他表单上的message值是否发生变化：
表单到绑定的数据：
绑定的数据到表单：
12.记事本综合练习案例
记事本功能介绍：
1.新增：增加需要记录的事情。
2.删除：点击删除按钮删除该事情。
3.统计：统计所有事情显示到记事本上。
4.清空：点击清空按钮清空所有事情。
5.隐藏：清空后隐藏不必要的框框。
注意：一下案例都没有css修饰，我们只练习vue指令的用法，自己在练习时有时间可自行去修饰样式。
12.1新增
1.生成列表结构(v-for数组)
2.获取用户输入（v-model）
3.回车，新增数据(v-on .enter 添加数据)
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>记事本</title>
<style type="text/css">
.no{
list-style: none;
}
</style>
</head>
<body>
<h2>记事本</h2>
<div id="app">
<input type="text" v-model="inputValue" @keyup.enter="add()"/>
<ul class="no">
<li v-for="(item,index) in list">
{{index+1}}-----{{item}}
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var app=new Vue({
el:"#app",
data:{
list:["吃饭","睡觉","打代码"],
inputValue:"好好学习"
},
methods:{
add:function(){
this.list.push(this.inputValue);
}
}
})
</script>
</body>
</html>
效果图：
12.2删除
1.数据改变，和数据绑定的元素同步改变
2.事件的自定义参数
3.splice删除数组元素的使用
效果图，点击x就会删掉，并且同步更新循环：
12.3统计
基于数据的开发方式
效果图，不管是删除还是添加，只要数组的长度发生变化值就会变：
12.4清空
本质上就是删除数组中的所有元素。
效果图，点击clear后的：
12.5隐藏
没有数据时，隐藏元素（v-show v-if 数组非空）
效果图，可以看到下方的计数条和清楚按钮没有了：
12.6全部代码及总结
知识点总结：
1.列表结构可以通过v-for指令结合数据生成。
2.v-on结合事件修饰符可以对事件进行限制，比如 .enter
3.v-on在绑定事件时可以传递自定义参数
4.通过v-model可以快速的设置和获取表单元素的值
5.基于数据的开发方式
全部代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>记事本</title>
<style type="text/css">
.no{
list-style: none;
}
</style>
</head>
<body>
<h2>记事本</h2>
<div id="app">
<input type="text" v-model="inputValue" @keyup.enter="add()"/>
<ul class="no">
<li v-for="(item,index) in list">
{{index+1}}-----{{item}}------
<button type="button" @click="remove(index)">x</button>
</li>
</ul>
<p v-show="list.length!=0">
<span v-text="list.length"></span> <span> items left ------</span>
<button type="button" @click="clear()">Clear</button>
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var app=new Vue({
el:"#app",
data:{
list:["吃饭","睡觉","打代码"],
inputValue:"好好学习"
},
methods:{
add:function(){
this.list.push(this.inputValue);
},
remove:function(index){
// 删除index索引值，删1个值
this.list.splice(index,1);
},
clear:function(){
this.list=[];
}
}
})
</script>
</body>
</html>
三、网络运用
1.axios基本使用
axios必须先导入才可以使用
使用get或post方法即可发送对应的请求
then方法中的回调函数会在请求成功或失败时触发
通过回调函数的形参可以获取响应内容，或错误信息
官方文档：Axios 中文文档 | Axios 中文网 | Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.jsAxios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js。Axios 使用简单,包尺寸小且提供了易于扩展的接口。https://www.axios-http.cn/
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>axios基本使用</title>
</head>
<body>
<button type="button" class="get">get方式</button>
<button type="button" class="post">post方式</button>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
/*
接口1：音乐信息
请求地址：https://autumnfish.cn/comment/music
请求方式：get
请求参数:id=186016&limit=1
相应内容：音乐信息
*/
document.querySelector(".get").onclick=function(){
axios.get("https://autumnfish.cn/comment/music?id=186016&limit=1")
.then(function(response){
console.log(response);
},function(err){
console.log(err);
})
}
/*
接口2：电台信息
请求地址：https://autumnfish.cn/dj/program
请求方式：post
请求参数:rid
相应内容：电台信息
*/
document.querySelector(".post").onclick=function(){
axios.post("https://autumnfish.cn/dj/program",{rid:12})
.then(function(response){
console.log(response);
},function(err){
console.log(err);
})
}
</script>
</body>
</html>
get响应回的数据效果图：
post响应回的数据效果图：
2.axios+Vue
axios回调函数中的this已经改变，无法访问到data中数据
把this保存起来，回调函数中直接使用保存的this即可
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>axios+vue</title>
</head>
<body>
<div id="app">
<button type="button" @click="getmusic()">音乐信息</button>
<p>{{music}}</p>
</div>
<!-- vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
/*
接口1：音乐信息
请求地址：https://autumnfish.cn/comment/music
请求方式：get
请求参数:id=186016&limit=1
相应内容：音乐信息
*/
var app=new Vue({
el:"#app",
data:{
music:"这里有音乐信息"
},
methods:{
getmusic:function(){
var that=this;
axios.get("https://autumnfish.cn/comment/music?id=186016&limit=1")
.then(function(response){
that.music=response.data.comments;
console.log(response);
},function(err){
})
}
}
})
</script>
</body>
</html>
效果图：
3.综合练习案例
电台查询案例：
应用的逻辑代码建议和页面分离，使用单独的js文件编写。
axios回调函数中this指向改变了，需要额外的保存一份。
服务器返回的数据比较复杂时，获取的时候需要注意层次结构。
3.1回车查询
1.按下回车（v-on .enter）
2.查询数据(axios 接口 v-model)
3.渲染数据（v-for 数组 that）
html:
效果图：
3.2点击查询
自定义参数可以让代码的复用性更高。
methods中定义的方法内部，可以通过this关键字点出其他的方法。
效果图，点击后查询的结果：
3.3全部代码展示
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>天气查询案例</title>
</head>
<body>
<div id="app">
<input type="text" placeholder="输入查询的电台id" @keyup.enter="searchId" v-model="et"/>
<button type="button" @click="search">搜索</button>
<a @click="etd(11)">编号11</a>
<a @click="etd(12)">编号12</a>
<a @click="etd(13)">编号13</a>
<a @click="etd(14)">编号14</a>
<a @click="etd(15)">编号15</a>
<ul>
<li v-for="item in etlist">
<p>{{ item.name }}</p>
<p>{{item.description}}</p>
<p>{{ item.id}}</p>
</li>
</ul>
</div>
<!-- vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 导入js文件 -->
<script src="js/main.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
js代码:
var app = new Vue({
el: "#app",
data: {
et: '',
etlist: []
},
methods: {
searchId: function() {
// console.log("电台查询");
// console.log(this.city);
//调用接口
var that=this;
axios.get('https://autumnfish.cn/dj/program?rid=' + this.et)
.then(function(response) {
console.log(response.data.programs);
that.etlist=response.data.programs;
})
.catch(function(err) {})
},
etd:function(et){
this.et=et;
this.searchId();
},
search:function(){
this.searchId();
}
}
})
总结
Vue到这里就算结束了，这里只是浅浅的学了一遍，更加适合学后端的但想写出一些好看点的页面的去学习，如果是想走前端的话，这些知识还不够。需要系统的去学习Vue,花大量的时间去打代码练习每一个案例。代码不管是前端还是后端都要勤加练习才能有所收获。希望大家动起来，我们一起敲代码。
