指令
就是在vue中带有v-前缀的html特殊属性
语法：
写在html的开标签中 使用v-指令=”指令值”
作用：
在vue扩展了标签的功能
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
35
36
37
38
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./node_modules/_vue@2.6.14@vue/dist/vue.js"></script>
</head>
<body>
<div id="box">
<h1>v-model</h1>
<input type="text" v-model="xiaoyang">
<h4>{{xiaoyang}}</h4>
<h4>{{xiaoyang}}</h4>
<h4>{{xiaoyang}}</h4>
<h4>{{xiaoyang}}</h4>
<h4>{{xiaoyang}}</h4>
</div>
<script>
new Vue({
el: "#box",
data: {
xiaoyang: "你好",
}
})
</script>
</body>
</html>
|
双向绑定的原理：
双向绑定 就是数据劫持与发布者订阅者模式
数据劫持：数据拦截 通过object.defineProperty()方法 进行劫持 通过这个方法下的getter（读取） 与setter（修改） 因为数据被劫持了 那么当数据改变的时候 vm层就会通过数据拦截 来反向的告诉模型或者视图做出反应
发布者订阅者模式：就是一个一对多的关系 发布者改变了 所有订阅者也会随之改变
v-show
作用：控制元素的显示和隐藏（使用css的display来控制元素的显示和隐藏）
语法：v-show=“布尔值” true显示 false隐藏
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./node_modules/_vue@2.6.14@vue/dist/vue.js"></script>
</head>
<body>
<div id="box">
<h1>v-show</h1>
<h1 v-show="bool">控制我的显示与隐藏</h1>
</div>
<script>
new Vue({
el: "#box",
data: {
bool: true
}
})
</script>
</body>
</html>
|
v-on
作用: 给dom元素绑定事件
语法： v-on:事件=“函数” 鼠标左键单击事件 onclick vue中: v-on:click=””
简写： 把v-on: 替换成@ v-on:click @click
函数写在哪？
在el data 同级位置使用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
29
30
31
32
33
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./node_modules/_vue@2.6.14@vue/dist/vue.js"></script>
</head>
<body>
<div id="box">
<h1>v-on</h1>
<button v-on:click="fun()"></button>
</div>
<script>
new Vue({
el: "#box",
data: {
text: "我是变量"
},
methods: {
fun() {
alert(this.text)
}
}
})
</script>
</body>
</html>
|
v-for
作用：遍历data中的数据，并且在页面进行内容的展示
语法：v-for=”(遍历的数据，遍历的下标) in 你要遍历的数据”
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
45
46
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="box">
<ul>
<li v-for="(v,i) in arr">
{{v}}
</li>
</ul>
<table border="1">
<tr v-for="(v,i) in obj">
<td>{{v.name}}</td>
<td>{{v.age}}</td>
</tr>
</table>
</div>
<script>
new Vue({
el: "#box",
data: {
arr: ["c", "js", "python", "java"],
obj: [{
name: "xixi",
age: 18
}, {
name: "huanghuanng",
age: 32
}, {
name: "lili",
age: 28
}]
}
})
</script>
</body>
</html>
|
v-bind
作用：给html的属性插入变量
语法： v-bind:html的属性=”属性值” 简写 :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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="box">
<a v-bind:href="ahref">{{text}}</a>
<a :href="ahref">{{text}}</a>
</div>
<script>
new Vue({
el: "#box",
data: {
text: "点我去百度",
ahref: "http://www.baidu.com"
},
methods: {
}
})
</script>
</body>
</html>
|
绑定多个属性怎么办？
逗号隔开
v-if全家桶
作用：对网页的dom内容进行添加和移除
v-if
语法:v-if=“布尔值” true 添加 false移除
v-show 与v-if的区别
1.v-if是对dom元素进行添加和删除从而完成的页面显示和隐藏 v-show是通过css的方式进行显示和隐藏
2.v-if 在初始化对页面的性能损耗低 v-show损耗高
3.v-if在页面频繁切换的时候性能损耗高 v-show损耗低
v-else
必须配合v-if来使用 不能单独使用
当v-if不符合的时候显示v-else的内容
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="box">
<h1 v-if="bool">请登录</h1>
<h1 v-else>欢迎您</h1>
</div>
<script>
new Vue({
el: "#box",
data: {
bool: true
}
})
</script>
</body>
</html>
|
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
25
26
27
28
29
30
31
32
33
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="box">
<h1 v-if="1==num">吃饭</h1>
<h1 v-else-if="2==num">睡觉</h1>
<h1 v-else-if="3==num">打豆豆</h1>
<h1 v-else-if="4==num">写代码</h1>
<h1 v-else>打游戏</h1>
</div>
<script>
new Vue({
el: "#box",
data: {
num: 1
},
methods: {
}
})
</script>
</body>
</html>
|
v-text
作用：向网页中插入纯文本内容
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.js"></script>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="box" v-cloak>
<h1>{{text}}</h1>
<h1>{{text}}</h1>
<h1>{{text}}</h1>
</div>
<script>
new Vue({
el: "#box",
data: {
text: "我是变量"
}
})
</script>
</body>
</html>
|
扩展–屏幕闪烁
当用户网速较慢的时候 有可能会把花括号显示出来 然后等网络恢复 在显示正常 那么这个过程就是屏幕闪烁
1.v-text可以解决
2.v-cloak指令 用来保持元素直到被关联之后再进行编译
v-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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="box">
{{newhtml}}
<div v-html="newhtml"></div>
</div>
<script>
new Vue({
el: "#box",
data: {
newhtml: "<i>我是i标签</i>"
}
})
</script>
</body>
</html>
|
v-once
作用：变量一次性插值
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="box">
<input type="text" v-model="text">
<h1>{{text}}</h1>
<h1 v-once>{{text}}</h1>
<h1>{{text}}</h1>
<h1>{{text}}</h1>
<h1>{{text}}</h1>
<h1>{{text}}</h1>
</div>
<script>
new Vue({
el: "#box",
data: {
text: "我是默认值"
},
methods: {
}
})
</script>
</body>
</html>
|
watch监听属性
watch就是对vue实例中data属性的数据进行监听 当data属性发生改变的时候 watch就会触发 从而执行一些指定的逻辑
语法：写在与el data methods的同级位置
watch:{
你要监听的data数据( 你监听的数据改变之后的结果，你监听的数据改变之前的结果){
你的逻辑
}
}
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./node_modules/_vue@2.6.14@vue/dist/vue.js"></script>
</head>
<body>
<div id="box">
<input type="text" v-model="text">
<h1>{{text}}</h1>
</div>
<script>
new Vue({
el: "#box",
data: {
text: "你好么么哒"
},
methods: {
},
watch: {
text(newval, oldval) {
console.log(`${newval}------${oldval}`);
}
}
})
</script>
</body>
</html>
|
扩展：watch在首次加载会触发吗？如果我想让他在首次加载就触发怎么办？
immediate:true
1
2
3
4
5
6
7
8
9
10
| watch: {
text: {
handler(newval, oldval) {
console.log(`${newval}------${oldval}`);
},
immediate: true
}
}
})
|
computed计算属性
计算属性：它是vue实例中的一个属性（是在vue中完成一些特殊功能）它是有一个计算功能的属性 计算属性可以处理data中的数据 通过计算属性的处理 从而对数据进行操作 计算属性也会根据它所处理的data数据的改变从而发生改变进行重新计算
语法：写在 el data methods watch 等同级位置
computed:{
你处理之后的结果变量() {
必须要有return 你的处理逻辑
}
}
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
45
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./node_modules/_vue@2.6.14@vue/dist/vue.js"></script>
</head>
<body>
<div id="box">
<h1>{{text}}</h1>
<h1>{{uptext}}</h1>
</div>
<script>
new Vue({
el: "#box",
data: {
text: "sdfghjksdfgh"
},
methods: {
},
watch: {
},
computed: {
uptext() {
return this.text.substr(2, 9).toUpperCase()
}
}
})
</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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./node_modules/_vue@2.6.14@vue/dist/vue.js"></script>
</head>
<body>
<div id="box">
<h1>方法：{{fun()}}</h1>
<h1>{{fun()}}</h1>
<h1>{{fun()}}</h1>
<h1>{{fun()}}</h1>
<h1>{{fun()}}</h1>
<h1>{{fun()}}</h1>
<h1>{{fun()}}</h1>
<h1>计算属性：{{newtext}}</h1>
<h1>{{newtext}}</h1>
<h1>{{newtext}}</h1>
<h1>{{newtext}}</h1>
<h1>{{newtext}}</h1>
</div>
<script>
new Vue({
el: "#box",
data: {
text: "你好么么哒"
},
methods: {
fun() {
console.log("我是函数");
return this.text.substr(1, 3)
}
},
computed: {
newtext() {
console.log("我是计算属性")
return this.text.substr(1, 3)
}
}
})
</script>
</body>
</html>
|
计算属性无论被调用多少次只执行一次 因为计算属性走缓存（就是他会在第一次执行完毕之后会把处理好的数据放在内存中 只要数据不变 那么一直就读取内存中的数据）
方法只要被调用就会执行 浪费性能
计算属性与watch的区别
计算属性：是依赖data的数据 当数据改变了 计算属性只会对依赖的数据重新计算返回新的结果
watch: 监听data的数据 当数据变了 他会调用一个函数从而完成其他的逻辑
事件对象
谁触发这个事件 事件对象就包含谁的信息 $event
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./node_modules/_vue@2.6.14@vue/dist/vue.js"></script>
</head>
<body>
<div id="box">
<input type="text" @keyDown.ctrl="fun($event)">
</div>
<script>
new Vue({
el: "#box",
data: {
},
methods: {
fun(e) {
console.log("ctrl按下了");
}
}
})
</script>
</body>
</html>
|
修饰符
对事件操作进行一些细节的处理
语法：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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./node_modules/_vue@2.6.14@vue/dist/vue.js"></script>
<style>
.fu {
width: 500px;
height: 500px;
background-color: aqua;
}
.zi {
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div id="box">
<div class="fu" @click="fu()">
<div class="zi" @click.stop="zi()"></div>
</div>
</div>
<script>
new Vue({
el: "#box",
data: {
},
methods: {
fu() {
console.log("fufufufufufufu");
},
zi() {
console.log("zizizizizizizi");
}
}
})
</script>
</body>
</html>
|
按键修饰符
为了解决键盘上的对应事件的复杂度提供了按键修饰符 来修饰指定按键的细节
.up .down .left .right .ctrl .space .enter
事件修饰符
阻止事件冒泡 ：stop
阻止默认行为 ：prevent
设置事件捕获: captrue
设置事件触发范围 在自己范围内生效不包含子元素范围 : self
只触发一次: once
