Vue 指令
Vue 会根据不同的指令,针对标签实现不同的功能,指令为带有 v-
前缀的特殊标签属性
v-html
用于设置元素的 innerHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<head>
<meta charset="utf-8">
<title>v-html</title>
</head>
<body>
<div id="app">
<div v-html="link"></div>
</div>
<script src="js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
link:'<a href="https://yexca.net/">yexca</a>'
}
})
</script>
</body>
</html>
v-show 与 v-if
\ | v-show | v-if |
---|---|---|
作用 | 控制元素显示隐藏 | 控制元素显示隐藏 (条件渲染) |
语法 | v-show=”表达式” | v-if=”表达式” |
表达式值 | ture 显示,false 隐藏 | ture 显示,false 隐藏 |
隐藏说明 | 通过控制属性 style="display:none;" |
直接删除或创建元素 |
场景 | 频繁切换 | 不频繁切换 |
v-else 与 v-else-if
用于辅助 v-if 进行渲染,需要紧挨着 v-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
25
26
27
28
<html>
<head>
<meta charset="utf-8">
<title>v-else and v-else-if</title>
</head>
<body>
<div id="app">
<p v-if="gender === 1">性别:男</p>
<p v-else>性别:女</p>
<hr />
<p v-if="score >= 90">成绩判定 A</p>
<p v-else-if="score >= 70">成绩判定 B</p>
<p v-else-if="score >= 60">成绩判定 C</p>
<p v-else>成绩判定 D</p>
</div>
<script src="js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
gender: 1,
score: 89
}
})
</script>
</body>
</html>
v-on
用于注册事件 = 添加监听 + 提供处理逻辑
语法一
v-on:事件名=”内联语句”
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
<html>
<head>
<meta charset="utf-8">
<title>v-on 1</title>
</head>
<body>
<div id="app">
<button v-on:click="count1--">-</button>
<span> </span>
<!-- v-on: 可以替换为 @ -->
<button @click="count1++">+</button>
<hr />
<button v-on:mouseenter="count2--">-</button>
<span></span>
<button v-on:mouseenter="count2++">+</button>
</div>
<script src="js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
count1: 1,
count2: 2
}
})
</script>
</body>
</html>
语法二
v-on:事件名=”methods中的函数名”
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
<html>
<head>
<meta charset="utf-8">
<title>v-on 2</title>
</head>
<body>
<div id="app">
<button @click="fun">切换显示隐藏</button>
<p v-show="isShow">hello yexca</p>
</div>
<script src="js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
isShow: true
},
methods: {
fun(){
// this 始终指向当前实例
this.isShow = !this.isShow
}
}
})
</script>
</body>
</html>
调用传参
直接上案例
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
<html>
<head>
<meta charset="utf-8">
<title>v-on 3</title>
<style>
.box{
border-style: solid;
border-color: aqua;
padding: 10px;
margin: 10px;
width: 200px;
}
</style>
</head>
<body>
<div id="app">
<div class="box">
<h3>自动售货机</h3>
<button @click="fun(5)">可乐5元</button>
<button @click="fun(10)">咖啡10元</button>
</div>
<div style="padding-left: 20px;">余额:</div>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
balance: 900
},
methods: {
fun(a){
this.balance -= a
}
}
})
</script>
</body>
</html>
v-bind
用于动态的设置 html 的标签属性,如 src、url、title 等
语法:v-bind:属性名=”表达式”
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
<html>
<head>
<meta charset="utf-8">
<title>v-bind</title>
<style>
img{
width: 400px;
}
</style>
</head>
<body>
<div id="app">
<!-- v-bind 可以省略 -->
<img v-bind:src="imgURL" :title="imgTitle" :alt="imgAlt" />
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
imgURL: '../img/01.jpg',
imgTitle: 'warma',
imgAlt: 'warma'
}
})
</script>
</body>
</html>
v-for
基于数据循环,多次渲染整个元素
语法:v-for=”(item, index) in 数组”
item:每一项,index:下标
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
<html>
<head>
<meta charset="utf-8">
<title>v-for</title>
</head>
<body>
<div id="app">
<h3>fruit shop</h3>
<ul>
<!-- 当 index 不需要时可以省略 -->
<li v-for="item in list"></li>
</ul>
<ul>
<li v-for="(item,index) in list"></li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
list: ['apple', 'banana', 'watermelon']
}
})
</script>
</body>
</html>
为便于 Vue 进行列表项的正确排序复用,需要给元素添加唯一标识,即 key 属性
key 的值只能是字符串或数字类型,且必须具有唯一性
1
<li v-for="(item, index) in list" :key="item.id"></li>
推荐使用 id 作为 key,不推荐使用 index 作为 key (会变化,不对应)
v-model
给表单元素使用,实现双向数据绑定,以可以快速获取或设置表单元素内容
双向数据绑定即视图变化,数据自动更新
语法:v-model=’变量’
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
<html>
<head>
<meta charset="utf-8">
<title>v-model</title>
</head>
<body>
<div id="app">
username: <input type="text" v-model="username"/><br /><br />
password: <input type="password" v-model="password" /><br /><br />
<button @click="login">登录</button>
<button @click="reset">重置</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
username: '',
password: ''
},
methods: {
login(){
console.log(this.username, this.password)
},
reset(){
this.username = ''
this.password = ''
}
}
})
</script>
</body>
</html>
指令修饰符
通过 .
指明一些指令后缀,不同后缀封装了不同的处理操作
按键修饰符
@keyup.enter 键盘回车监听
v-model 修饰符
v-model.trim 去除首尾空格
v-model.number 转数字
事件修饰符
@事件名.stop 阻止冒泡
@事件名.prevent 阻止默认行为
计算属性
基于现有的数据,计算出来的新属性。依赖的数据变化,自动重新计算
Vue 生命周期
生命周期指一个对象从创建到销毁的整个过程
Vue 生命周期有 8 个阶段,每触发一个生命周期事件,会自动执行一个生命周期方法 (钩子)
状态 | 阶段周期 |
---|---|
beforeCreate | 创建前 |
created | 创建后 |
beforeMount | 载入前 |
mounted | 挂载完成 |
beforeUpdate | 更新前 |
updated | 更新后 |
beforeDestroy | 销毁前 |
destroyed | 销毁后 |
其中 mounted
较为常用,指 Vue 初始化成功,HTML 渲染成功。(发送请求到服务端,加载数据)
1
2
3
4
5
6
7
8
9
10
11
12
new Vue(){
el: "#app",
data: {
},
mounted(){
console.log("Vue 挂载完成,发送请求获取数据");
},
methods: {
}
}