Vue 指令
数据引用
‘‘大括号内可以写变量也可以写表达式
举例:
1 |
|
基础指令
Vue中的指令都是以”v-“开头的,写在标签内
v-once 一次性插值,不会随着变量的改变而改变
1
<h3 v-once>{{ msg }}</h3>
v-html 选人html字符串为html代码,但是并不会渲染script代码,防止XSS工具
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<body>
<div id="app01">
<!--{{}}表达式-->
<h3>{{ msg }}</h3>
<h3>{{ score + 1}}</h3>
<h3 v-once>{{ msg }}</h3>
<span>{{ contentHtml }}</span><br/>
<h1 v-html="contentHtml"></h1>
</div>
<script>
var vue = new Vue({
el: "#app01",
data: {
msg: "HELLO WORLD",
score: 99,
}
})
</script>
</body>
````
* v-bind 数据绑定
* 完整格式: v-bind:元素属性='variable'
* 缩写::元素属性='variable'
````html
<body>
<div id="app01">
<img v-bind:src="imgurl">
<!--缩写形式-->
<img :src="imgurl">
<a v-bind:href="baidu">baidu</a>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
var vue = new Vue({
el: "#app01",
data: {
imgurl: "https://cn.vuejs.org/images/logo.png",
baidu: "https://www.baidu.com/"
}
})
</script>
</body>v-on 绑定事件
- 完整格式: v-on:事件=’method’
- 缩写 @:事件=’method’
1 | <body> |
methods和computed
- method会监听属性值,只支持getter属性所以是单项的,如果给method方法赋值会报错,没有缓存不管监听的属性值是否发生改变都会重新执行函数,调用方法必须添加小括号()
- computed监听属性值是双向的,并且有缓存,当监听的属性值没有改变并不会重新调用,计算函数是作为属性存在的所以调用的时候不需要添加小括号()
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<body>
<div id="app">
Meth <input type="text" v-model="meth"><br>
English <input type="text" v-model="english"><br>
<!--绑定函数的时候一定要添加()-->
Total(函数) <input type="text" v-model="sum()"><br>
<!--计算属性是作为一个属性的所以不需要添加()-->
Total(计算属性) <input type="text" v-model="sum01"><br>
Total(计算属性双向) <input type="text" v-model="sum02"><br>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
meth: 0,
english: 0,
},
methods: {// 函数只支持单项绑定
sum: function () {
console.log('sum函数 被执行 ')
// -0是为了将字符串传唤为数字
return (this.meth-0) + (this.english-0)
}
},
computed: {// 定义计算属性,默认为单项绑定,只有getter
sum01:function () {// 计算属性有缓存,如果计算属性属性内的属性值没有发生改变则不会执行
console.log('sum属性 被执行 ')
return (this.meth-0) + (this.english-0)
},
sum02:{
get:function () {
console.log('sum01.get')
return (this.meth-0) + (this.english-0)
},
// 当sum02计算属性更新之后, 则会调用set
set: function (newValue) {// newValue是 sum02更新后的新值
console.log('sum01.set')
var avgScore = newValue/2
this.meth = avgScore
this.english = avgScore
}
}
}
})
</script>
</body>
watch监听器
- 当属性发生改变的时候执行对应的函数
- 通过watch选项或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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63<body>
<div id="app">
Meth <input type="text" v-model="meth"><br>
English <input type="text" v-model="english"><br>
<!--绑定函数的时候一定要添加()-->
Total(函数) <input type="text" v-model="sum()"><br>
<!--计算属性是作为一个属性的所以不需要添加()-->
Total(计算属性) <input type="text" v-model="sum01"><br>
Total(计算属性双向) <input type="text" v-model="sum02"><br>
watch 监听器 <input type="text" v-model="sum03"><br>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
meth: 0,
english: 0,
sum03: 0
},
methods: {// 函数只支持单项绑定
sum: function () {
console.log('sum函数 被执行 ')
// -0是为了将字符串传唤为数字
return (this.meth-0) + (this.english-0)
}
},
computed: {// 定义计算属性,默认为单项绑定,只有getter
sum01:function () {// 计算属性有缓存,如果计算属性属性内的属性值没有发生改变则不会执行
console.log('sum属性 被执行 ')
return (this.meth-0) + (this.english-0)
},
sum02:{
get:function () {
console.log('sum01.get')
return (this.meth-0) + (this.english-0)
},
// 当sum02计算属性更新之后, 则会调用set
set: function (newValue) {// newValue是 sum02更新后的新值
console.log('sum01.set')
var avgScore = newValue/2
this.meth = avgScore
this.english = avgScore
}
}
},
watch: {
// 监听meth属性,当meth发生改变时执行函数
meth: function (newValue, oldValue) {
// newValue更新后的值,oldValue更新前的值d
this.sum03 = (newValue-0) + (this.english-0)
}
}
})
// 监听方式二,通过实例vm.watch进行监听
vm.$watch('english', function (newValue, oldValue) {
console.log('english 发生改变')
this.sum03 = (newValue-0) + (this.meth-0)
})
</script>
</body>
条件渲染 v-if
- v-if 当条件为真时渲染元素
- v-else-if
- v-else
- v-show 与v-if类似,渲染后元素会始终存在,支持通过display属性进行控制显示或隐藏,如果频繁显示或隐藏使用v-show减少渲染开销
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23<body>
<div id="app">
<input type="checkbox" v-model="seen">
<p v-if="seen" class="fk">xxx</p>
<p v-else>小黄块隐藏</p>
<p v-show="seen" class="fk">xxx</p>
<p v-if="al === 'A'">A</p>
<p v-else-if="al === 'B'">B</p>
<p v-else-if="al === 'C'">C</p>
<p v-else>Not A,B,C</p>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
seen: true,
al:'A'
}
})
</script>
</body>
v-for 迭代列表
- 语法: v-for=”(item, index) [in|of] items”,in|of 是分隔符都可以使用,item为元素,index为元素下表从0开始
1 | <body> |
- v-on事件处理
- 完整格式:v-on:事件=”函数(参数。。。)”
- 缩写:@事件=”函数(参数。。。)”
- event: 原生的dom事件,函数中的默认参数,如果函数中有其他参数时需要显示的使用$event传参
1 | <body> |
- 事件修饰符
- .stop 阻止单击传播
- .prevent 阻止事件的默认行为
- .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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55<body>
<div id="app">
<button v-on:click="say">Say {{msg}}</button><br>
<button @click="say01('hello,xiaoxin',$event)">Say something</button>
<div @click="todo">
<!--.stop阻止事件传播,如果没有.stop "dothis"执行完之后就会继续执行todo-->
<button @click.stop="dothis">dothis</button>
</div>
<!--.prevent阻止默认行为-->
<a href="https://www.baidu.com/" @click.prevent="doStop">baidu</a><br>
<!--.once只会执行一次,适合提交表单场景-->
<button @click.once="once">一次事件</button><br>
<!--keyup表示键入任何值都会调用对应的函数-->
<input type="text" @keyup="ks"><br>
<!--.enter表示只有在敲回车键时触发函数-->
<input type="text" @keyup.enter="keyEnter"><br>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: 'hello,world'
},
methods:{
// event是dom的原生事件,当函数没有参数时默认传递
say: function (event) {
alert(event.target.innerHTML)
},
say01: function (msg,event) {
alert(msg + ','+event.target.innerHTML)
},
todo: function () {
alert('todo')
},
dothis: function () {
alert('do this')
},
doStop: function () {
alert('do stop...')
},
once: function () {
alert('do once')
},
ks: function () {
alert('key anything..')
},
keyEnter: function () {
alert('key Enter..')
},
}
})
</script>
</body>
- 表单双向绑定示例
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<body>
<div id="app">
.prevent阻止了默认提交事件
<form action="#" v-on:submit.prevent="submitFunc">
姓名:<input type="text" v-model="name"><br>
性别:<input type="radio" name="sex" value="0" v-model="sex"> 女
<input type="radio" name="sex" value="1" v-model="sex"> 男<br>
技能:<br><input type="checkbox" name="skills" value="java" v-model="skills">Java开发<br>
<input type="checkbox" name="skills" value="vue" v-model="skills">vue.js开发<br>
<input type="checkbox" name="skills" value="python" v-model="skills">python开发<br>
<input type="checkbox" name="skills" value="php" v-model="skills">PHP开发<br>
城市:<select v-model="city">
<option v-for="city in cities" v-bind:VALUE="city.code">{{city.name}}</option>
</select><br>
说明:<textarea v-model="desc"></textarea><br>
<input type="submit" value="submit">
</form>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
name: "",
sex: 0,
// skills对应的是多选框所以是一个列表
skills: [],
// city表示下拉列表中默认选中的值
city:"bj",
cities:[
{code:'bj',name:'北京'},
{code:'tj',name:'天津'},
{code:'hn',name:'河南'},
],
desc: ""
},
methods:{
submitFunc: function () {
// 实际环境应该是ajax异步调用接口
alert(
this.name + "," + this.sex + "," + this.skills + "," + this.city + "," + this.desc
)
}
}
})
</script>
</body> - v-pre
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21<!--用于显示双大括号"{{}}",并跳过这个元素和它子元素的编译过程,加快编译-->
<body>
<div id="app">
<!--
1,用于显示双大括号{{}}}
2,跳过这个元素和子元素的编译过程,可以提高性能
-->
<span v-pre>{{ hello }}</span><br>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "hello, world!"
}
})
</script>
</body> - 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
35<!-- 等价于"{{}}"用于显示内容,区别在于"{{}}"会造成闪烁,v-text不会,如果还想使用"{{}}"又不想有闪烁问题可以使用v-clock-->
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<!--
1,用于显示双大括号{{}}}
2,跳过这个元素和子元素的编译过程,可以提高性能
-->
<span v-pre>{{ hello }}</span><br>
<!--使用双大括号会有闪烁问题-->
<span>{{msg}}</span><br>
<span>{{msg}}</span><br>
<span>{{msg}}</span><br>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "hello, world!"
}
})
</script>
</body>
转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 jaytp@qq.com
文章标题:Vue 指令
文章字数:3.3k
本文作者:Aaron
发布时间:2019-11-30, 14:03:39
最后更新:2020-01-01, 22:28:09
原始链接:http://blog.linuxerbulo.com/2019/11/30/Vue-%E6%8C%87%E4%BB%A4/版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。