Vue
目标：
- 能够使用
Vue中常用指令和表达式- 能够使用
Vue生命周期函数mounted
# 概述
Vue：是一套前端框架，它可以免除原生JavaScript中的DOM操作，简化代码书写。
我们之前也学习过后端框架MyBatis，MyBatis是用来简化jdbc代码编写的，而Vue是前端的框架，可以用来简化JavaScript代码编写。比如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>JavaScript演示</title>
</head>
<body>
<input type="button" onclick="on()" value="开灯" />
<img
id="myImage"
border="0"
src="../imgs/off.gif"
style="text-align:center;"
/>
<input type="button" onclick="off()" value="关灯" />
<script>
function on() {
document.getElementById("myImage").src = "../imgs/on.gif";
}
function off() {
document.getElementById("myImage").src = "../imgs/off.gif";
}
// 定义一个变量，用来记录灯的状态，偶数是开灯，奇数是关灯
var x = 0;
// 使用循环定时器
setInterval(function () {
if (x % 2 == 0) {
// 表示是偶数，开灯，调用on()
on();
} else {
// 奇数，关灯，调用off()
off();
}
x++; // 改变变量的值
}, 1000);
</script>
</body>
</html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
学习了Vue后，这部分代码我们就不需要再写了，那该如何写，或者Vue是如何简化JavaScript代码的呢？
Vue是基于**MVVM(Model-View-ViewModel)**思想，实现数据的双向绑定，将编程的关注点放在数据上。之前我们使用JavaScript操作DOM，关注点是在DOM操作上，而要了解MVVM思想，我们得先来看下MVC思想，如下图：
C就是咱们的JS代码，M就是数据，而V是页面上展示的内容，如下面的代码：
for (let i = 0; i < brands.length; i++) {
let brand = brands[i];
tableData +=
"\n" +
'<tr align="center">\n' +
" <td>" +
(i + 1) +
"</td>\n" +
" <td>" +
brand.brandName +
"</td>\n" +
" <td>" +
brand.companyName +
"</td>\n" +
" <td>" +
brand.ordered +
"</td>\n" +
" <td>" +
brand.description +
"</td>\n" +
" <td>" +
brand.status +
"</td>\n" +
' <td><a href="#">修改</a> <a href="#">删除</a></td>\n' +
"</tr>";
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
MVC思想是没办法进行双向绑定的，双向绑定是指当数据模型中的数据发生变化时，页面展示的内容也会随之发生变化，如果表单数据发生变化，绑定的模型数据也会随之发生变化。那下面我们就来学习一下MVVM思想，如下图是MVVM思想三个组件的图解：
上图中的Model就是我们的数据，View是视图，也就是页面标签，用户可以通过浏览器看到的内容；Model和View是通过ViewModel对象进行双向绑定的，而ViewModel对象是Vue提供的。
接下来我们就来看一下双向绑定的效果，代码如下，输入框绑定了username模型数据，而在页面上也使用{{}}绑定了username模型数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input v-model="username"> <br>
<!-- 插值表达式 -->
{{username}}
</div>
<script src="../js/vue.js"></script>
<script>
// 1. 创建Vue核心对象
new Vue({
el: "#app",
data() {
return {
username: ""
}
},
methods: {
}
})
</script>
</body>
</html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
通过浏览器打开该页面可以看到如下效果：
当我们在输入框中输入内容，而输出框后面会随之实时展示我们输入的内容，这个就是双向绑定的效果。
# 快速入门
Vue使用起来比较简单，总共分为如下三步：
- 新建HTML页面，引入vue.js文件
<script src="../js/vue.js"></script>
- 在JS代码区域，创建Vue核心对象，进行数据绑定
// 1. 创建Vue核心对象
new Vue({
el: "#app",
data() {
return {
username: "",
};
},
methods: {
}
});
2
3
4
5
6
7
8
9
10
11
12
创建Vue对象时，需要传递一个JS对象，而该对象中需要如下属性
el：用来指定哪儿个标签受Vue管理，该属性取值为#app，其中app是受管理标签的id属性值data：用来定义数据模型methods：用来定义函数，这个我们后面会介绍
- 编写视图
<div id="app">
<input v-model="username" /> <br />
<!-- 插值表达式 -->
{{username}}
</div>
2
3
4
5
{{}}是Vue中定义的插值表达式，在里面可以写数据模型，到时候会将该模型的数据值展示到对应的位置上。
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input v-model="username"> <br>
<!-- 插值表达式 -->
{{username}}
</div>
<script src="../js/vue.js"></script>
<script>
// 1. 创建Vue核心对象
new Vue({
el: "#app",
data() {
return {
username: ""
}
},
methods: {
}
})
</script>
</body>
</html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
# Vue 指令
指令：HTML标签上带有v-前缀的特殊属性，不同指令具有不同含义，例如：v-if，v-for...
常用的指令有：
| 指令 | 作用 |
|---|---|
v-bind | 为HTML标签绑定属性值，如设置href，css样式等 |
v-model | 在表单元素上创建双向数据绑定 |
v-on | 为HTML标签绑定事件 |
v-if | 条件性的渲染某元素，判定为true时渲染，否则不渲染 |
v-else | |
v-else-if | |
v-show | 根据条件展示某元素，区别在于切换的是display属性的值 |
v-for | 列表渲染，遍历容器的元素或者对象的属性 |
# v-bind 和 v-model 指令
| 指令 | 作用 |
|---|---|
v-bind | 为HTML标签绑定属性值，如设置href，css样式等 |
v-model | 在表单元素上创建双向数据绑定 |
- v-bind：该指令可以给标签原有属性绑定模型数据，这样模型数据发生变化，标签属性值也随之发生变化。
例如：
<a v-bind:href="url">百度一下</a>
上面的v-bind:可以简化写成:，如下：
<!-- v-bind 可以省略 -->
<a :href="url">百度一下</a>
2
- v-model：该指令可以给表单项标签绑定模型数据，这样就能实现双向绑定的效果，例如：
<input name="username" v-model="username">
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<a v-bind:href="url">点击一下</a>
<a :href="url">点击一下</a>
<input v-model="url">
</div>
<script src="../js/vue.js"></script>
<script>
// 1. 创建Vue核心对象
new Vue({
el: "#app",
data() {
return {
username: "",
url: "https://www.baidu.com"
}
}
});
</script>
</body>
</html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
通过浏览器打开上面的页面，并且使用开发者工具查看超链接的路径，该路径会根据输入框中输入的路径变化而变化，这是因为超链接和输入框都绑定了同一个模型的数据。
# v-on 指令
| 指令 | 作用 |
|---|---|
v-on | 为HTML标签绑定事件 |
在页面定义一个按钮，并给该按钮使用v-on指令绑定单击事件，HTML代码如下：
<input type="button" value="一个按钮" v-on:click="show()">
而使用v-on时还可以使用简化的写法，将v-on:替换成@，HTML代码如下：
<input type="button" value="一个按钮" @click="show()">
上面代码绑定的show()需要在Vue对象中的methods属性中定义出来
new Vue({
el: "#app",
methods: {
show() {
alert("我被点了");
}
}
});
2
3
4
5
6
7
8
注意
v-on：后面的事件名称是之前原生事件属性名去掉on。比如：
- 单击事件：事件属性名为
onclick，而在Vue中使用是v-on:click - 失去焦点事件：事件属性名是
onblur，而在Vue中使用是v-on:blur
整体页面代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="button" value="一个按钮" v-on:click="show()"> <br>
<input type="button" value="一个按钮" @click="show()">
</div>
<script src="../js/vue.js"></script>
<script>
// 1. 创建Vue核心对象
new Vue({
el: "#app",
data() {
return {
username: "",
}
},
methods: {
show() {
alert("我被点了")
}
}
});
</script>
</body>
</html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
# 条件判断指令
| 指令 | 作用 |
|---|---|
v-if | 条件性的渲染某元素，判定为true时渲染，否则不渲染 |
v-else | |
v-else-if | |
v-show | 根据条件展示某元素，区别在于切换的是display属性的值 |
接下来通过代码演示一下效果，在Vue中定义一个count的数据模型，如下
new Vue({
el: "#app",
data() {
return {
count: 1
}
}
});
2
3
4
5
6
7
8
现在要实现，当count模型的数据是1时，在页面上展示div1的内容；当count模型的数据是2时，在页面上展示div2的内容；count模型数据是其他值时，在页面上展示div3。这里为了动态改变模型数据count的值，再定义一个输入框绑定count模型数据，HTML代码如下：
<div id="app">
<div v-if="count == 1">div1</div>
<div v-else-if="count == 2">div2</div>
<div v-else>div3</div>
<hr>
<input v-model="count">
</div>
2
3
4
5
6
7
整体页面代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<div v-if="count == 1">div1</div>
<div v-else-if="count == 2">div2</div>
<div v-else>div3</div>
<hr>
<input v-model="count">
</div>
<script src="../js/vue.js"></script>
<script>
// 1. 创建Vue核心对象
new Vue({
el: "#app",
data() {
return {
count: 1
}
}
});
</script>
</body>
</html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
下面我们再来看下v-show指令的效果，如果模型数据count的值时1时，展示div v-show内容，否则不展示，HTML页面代码如下：
<div v-show="count == 1">div v-show</div>
<br>
<input v-model="count">
2
3
通过上图可以看出v-show不展示的原理是给对应的标签添加了display的CSS属性，并将该属性值设置为none，这样就达到了隐藏的效果，而v-if指令是条件不满足时根本就不会渲染对应的标签。
# v-for 指令
| 指令 | 作用 |
|---|---|
v-for | 列表渲染，遍历容器的元素或者对象的属性 |
这个指令从名字就能看出是用来遍历的，该指令使用的格式如下：
<标签 v-for="变量名 in 集合模型数据">
{{变量名}}
</标签>
2
3
注意
需要循环哪个标签，v-for指令就写在哪个标签上。
如果在页面需要使用集合模型数据的索引，就需要使用下面的格式：
<标签 v-for="(变量名, 索引变量) in 集合模型数据">
<!-- 索引变量是从0开始，所以要表示序号的话，需要手动加1 -->
{{ 索引变量 + 1}} {{ 变量名 }}
{{变量名}}
</标签>
2
3
4
5
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<div v-for="addr in addrs">
{{addr}} <br>
</div>
<hr>
<div v-for="(addr, i) in addrs">
{{i+1}} -- {{addr}} <br>
</div>
</div>
<script src="../js/vue.js"></script>
<script>
// 1. 创建Vue核心对象
new Vue({
el: "#app",
data() {
return {
addrs: ["北京", "上海", "西安"]
}
}
});
</script>
</body>
</html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
通过浏览器打开效果如下：
# 生命周期
Vue生命周期有八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。
| 状态 | 周期阶段 |
|---|---|
beforeCreate | 创建前 |
created | 创建后 |
beforeMount | 载入前 |
mounted | 挂载完成 |
beforeUpdate | 更新前 |
updated | 更新后 |
beforeDestory | 销毁前 |
destroyed | 销毁后 |
下图是Vue官网提供的从创建Vue到销毁Vue对象的整个过程以及各个阶段对应的钩子函数。
看到上面的图，大家无需过多关注它，了解Vue的生命周期即可，这些钩子方法我们只关注mounted就可以了。
mounted：挂载完成，Vue初始化成功，HTML页面渲染成功，以后我们会在该方法中发送异步请求，加载数据。