Vue是什么
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
引入
使用 CDN：
1
2
3
4
5
| 开发版本：
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
生产版本：
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
|
下载并自行引入：
1
2
| https://cdn.jsdelivr.net/npm/vue@next/dist/
https://unpkg.com/browse/vue@3.2.31/dist/
|
第一个Vue应用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Hello Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
message: "Hello"
}
});
</script>
</body>
</html>
|
常用指令
插值表达式
1
2
| {{name}}
{{school.name}}
|
通过插值表达式可以直接在页面中使用变量的值
v-html
向标签中插入一段html代码
1
2
3
4
5
6
7
8
9
10
11
12
| <div id="app">
<div v-html="strong"></div>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
strong: '<b>strong</b>'
}
})
</script>
|
v-text
向标签中插入一段纯文本
1
2
3
| <span v-text="message"></span>
<span>{{message}}</span>
|
v-for
循环指令，用于遍历数组等，在遍历数组时还可以加上index获取下标
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <div id="app">
<h1 v-for="(item, index) in items">
{{item.name}} ===> {{index}}
</h1>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
items: [
{name: "Pillage"},
{name: "Daisy"},
{name: "Steven"}
]
}
});
</script>
|
v-if
条件语句，可以结合使用 v-else v-else-if，值为布尔类型
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <div id="app">
<h1 v-if="flag">Yes</h1>
<h1 v-else>No</h1>
===================================
<h1 v-if="tag == 'A'">A</h1>
<h1 v-else-if="tag == 'B'">B</h1>
<h1 v-else-if="tag == 'C'">C</h1>
<h1 v-else>D</h1>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
flag: true,
tag: "A"
}
});
</script>
|
v-show
根据判断条件来决定是否展示该标签
1
2
3
4
5
6
7
8
9
10
11
12
13
| <div id="app">
<div v-show="show"><h1>展示</h1></div>
<div v-show="notShow">未展示</div>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
show: true,
notShow: false
}
})
</script>
|
v-bind
为属性绑定一个值或变量
1
2
3
4
5
6
7
8
9
10
11
| <div id="app">
<a v-bind:href="hao123">hao123</a>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
hao123: 'https://www.hao123.com/'
}
})
</script>
|
此指令具有简写形式（v-bind: 可以简写为 :）
1
| <a v-bind:href="hao123">hao123</a> => <a :href="hao123">hao123</a>
|
v-on
为标签绑定事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <div id="app">
<button v-on:click="click">Click Me</button>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "pillage"
},
methods: {
click: function() {
alert(this.message)
}
}
});
</script>
|
修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
1
| <form v-on:submit.prevent="onSubmit">...</form>
|
此指令也具有简写形式（v-on: 可以简写为 @）
1
2
| <button v-on:click="click">Click Me</button> =>
<button @click="click">Click Me</button>
|
v-model
v-model可以实现对数据的双向绑定
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <div id="app">
输入一段文字：
<input type="text" v-model="message">
<br><br><br>
您输入的文字为：{{message}}
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
message: ""
}
});
</script>
|
v-once
仅加载一次数据，以后数据即使改变也不会影响
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <div id="app">
<p>姓名为：<span v-once>{{name}}</span></p>
<button @click="changeName">修改姓名</button>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
name: 'pillage'
},
methods: {
changeName() {
this.name = '小白'
}
}
})
</script>
|
v-cloak
当 Vue 实例编译结束，页面渲染后，此属性会立刻消失
作用：可以用来解决网速慢时页面出现一堆 的情况
基本使用：
1
2
3
4
5
6
7
8
9
10
11
| <style>
[v-cloak] {
display: none;
}
</style>
<body>
<div id="app" v-cloak>
{{info.name}}
</div>
</body>
|
计算属性和侦听器
计算属性
计算属性使用了缓存机制，所以它执行的效率要比 methods 方法要高
计算属性也有两种写法：
- 类似于函数的简写形式
1
2
3
4
5
6
7
8
9
10
11
12
13
| <div id="app">
{{date}}
</div>
<script>
const vm = new Vue({
el: '#app',
computed: {
date() {
return Date.now()
}
}
})
</script>
|
这样写默认只有getter方法，没有setter方法
- 对象形式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <div id="app">
{{name}}
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
currentName: 'pillage'
},
computed: {
name: {
get() {
return this.currentName
},
set(newValue) {
this.currentName = newValue
}
}
}
})
</script>
|
此时运行 vm.name = '小白' 时，setter 会被自动调用，currentName 的值被更新
侦听器
虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
他也有两种写法（简写形式和对象形式）
1
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
| <div id="app">
<p v-text="university"></p>
<p>{{person}}</p>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
university: "东北林业大学",
person: {
name: "pillage",
age: 19
}
},
watch: {
university(newValue, oldValue) {
console.log("newValue:" + newValue + " oldValue:" + oldValue)
},
person: {
deep: true,
handler(obj) {
console.log("name:" + obj.name + " age:" + obj.age)
}
}
},
});
</script>
|
基本使用：收集表单数据
1
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
42
43
44
| <div id="app">
<form action="">
账号：<input type="text" v-model="account"> <br><br>
密码：<input type="password" v-model="password"> <br><br>
性别：
男<input type="radio" name="sex" value="boy" v-model="sex">
女<input type="radio" name="sex" value="girl" v-model="sex"> <br><br>
爱好：
敲代码<input type="checkbox" value="code" name="hobby" v-model="hobby">
吃包子<input type="checkbox" value="eat" name="hobby" v-model="hobby">
刷视频<input type="checkbox" value="video" name="hobby" v-model="hobby"> <br><br>
所在省份：
<select name="province" v-model="province">
<option value="">请选择</option>
<option value="henan">河南</option>
<option value="tianjin">天津</option>
<option value="beijing">北京</option>
<option value="chongqing">重庆</option>
</select> <br><br>
其他信息：
<textarea v-model="other"></textarea> <br><br>
<input type="checkbox" v-model="accept">我已阅读并接受<a href="">《隐私声明》</a> <br><br>
<button>提交</button>
</form>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
account: '',
password: '',
sex: '',
hobby: [],
province: '',
other: '',
accept: false,
}
})
</script>
|
生命周期钩子
如下图：
(图片来源于网络)
其中 mounted 最常用，常用于发送 ajax 请求获取数据
