Vue指令学习

发表于 | 分类于

Vue指令

指令 (Directives) 是特殊的带有前缀 v- 的特性。指令的值限定为绑定表达式，因此上面提到的 JavaScript 表达式及过滤器规则在这里也适用。指令的职责就是当其表达式的值改变时把某些特殊的行为应用到 DOM 上。

在Vue中，常用的指令有v-text、v-html、v-if、v-show、v-for、v-on、v-bind、v-model、v-ref、v-el、v-pre、v-cloak。

先上代码：

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script type="text/javascript" src="js/vue.js"></script>
        <title></title>
        <style>
            .item {
                margin: 1px;
                padding: 5px 0 5px 0;
            }
            
            .item:hover {
                background: #cccccc;
            }
        </style>
    </head>
    <div id="dr01">
        <h3>v-text</h3>
        <div v-text="msgText"></div>
        <div>{{msgText}}</div>
        <hr />
        <h3>v-html</h3>
        <div v-html="msgHtml"></div>
        <div>{{{msgHtml}}}</div>
        <hr />
        <h3>v-if</h3>
        <div>msgBoolean01:true</div>
        <div v-if="msgBoolean01">(here is v-if code block)if msgBoolean01 is true show this div</div>
        <div v-else>(here is v-else code block)if msgBoolean01 is false show this div</div>
        <br />
        <div>msgBoolean01:false</div>
        <div v-if="msgBoolean02">(here is v-if code block)if msgBoolean02 is true show this div</div>
        <div v-else>(here is v-else code block)if msgBoolean02 is false show this div</div>
        <h3>template v-if</h3>
        <div>msgBoolean01:true</div>
        <template v-if="msgBoolean01">
            <div>(here is template v-if code block)if msgBoolean01 is true show this div</div>
        </template>
        <template v-else>
            <div>(here is template v-else code block)if msgBoolean01 is false show this div</div>
        </template>
        <br />
        <div>msgBoolean02:false</div>
        <template v-if="msgBoolean02">
            <div>(here is template v-if code block)if msgBoolean02 is true show this div</div>
        </template>
        <template v-else>
            <div>(here is template v-else code block)if msgBoolean02 is false show this div</div>
        </template>
        <h3>v-show</h3>
        <div>msgBoolean01:true</div>
        <div v-show="msgBoolean01">(here is v-show code block)if msgBoolean01 is true show this div</div>
        <div v-else>(here is v-else code block)if msgBoolean01 is false show this div</div>
        <br />
        <div>msgBoolean01:false</div>
        <div v-show="msgBoolean02">(here is v-show code block)if msgBoolean02 is true show this div</div>
        <div v-else>(here is v-else code block)if msgBoolean02 is false show this div</div>
        <h3>v-else（不需要表达式）</h3>
        <div>限制：前一兄弟必须有v-if或者v-show</div>
        <div>v-else的用法：上面三个例子中都有使用，请参考代码</div>
        <hr />
        <h3>v-for</h3>
        <div>遍历数组：</div>
        <ul>
            <li v-for="(index,item) in itemArrs">
                <!-- index代表的是当前item的下标，如果要取出下标的值则用{{$index}}即可 -->
                index:{{$index}}, item:{{item}}
            </li>
        </ul>
        <div>遍历对象key、value（不带下标index）</div>
        <ul>
            <li v-for="(key,value) in itemObjs">
                <!-- 
                    key代表的是当前对象的属性名称，value代表的是当前对象的属性值
                    key取值的时候可以用{{$key}}，也可以使用{{key}}
                    value取值的时候只能用{{value}}
                    建议：遍历对象不带index下标的时候同时用{{key}}和{{value}}
                 -->
                $key:{{$key}},key:{{key}}, value:{{value}}
            </li>
        </ul>
        <div>遍历对象key、value（带下标index）</div>
        <ul>
            <li v-for="(index,key,value) in itemObjs">
                <!-- 
                    index代表的是当前属性的下标，key代表的是当前对象的属性名称，value代表的是当前对象的属性值
                    index取值的时候只能用{{$index}}
                    key取值的时候只能用{{$key}}
                    value取值的时候只能用{{value}}
                    建议：遍历对象不带index下标的时候同时用{{key}}和{{value}}
                 -->
                $index:{{$index}}, $key:{{$key}}, value:{{value}}
            </li>
        </ul>
        <hr />
        <h3>v-on</h3>
        <ul>
            <li v-for="(index,item) in itemArrs">
                <div class="item" v-on:click="itemClick01">
                    <span>index:{{$index}}, item:{{item}}</span>
                    <button v-on:click="itemClick02($index,item)">内联语句（参数item参数）</button>
                    <button v-on:click="itemClick03(item,$event)">内联语句（参数event参数）</button>
                    <button v-on:click.stop="itemClickStop(item)">阻止冒泡</button>
                    <a href="http://www.baidu.com">跳转到百度</a>
                    <a href="http://www.baidu.com" v-on:click.prevent="itemClickPrevent()">阻止a标签默认行为，不会跳转到百度</a>
                    <input v-on:keyup.enter="keyUpEnter($event)" placeholder="获取焦点后点击enter试试" />
                </div>
            </li>
        </ul>
        <h3>v-bind</h3>
        <div>
            <!-- 绑定 attribute -->
            <img v-bind:src="imageSrc">
            <!-- 缩写 -->
            <img :src="imageSrc">
            <!-- 绑定 class -->
            <div :class="{ red: isRed }">对象class</div>
            <div :class="[classA, classB]">数组class</div>
            <div :class="[classA, { classB: isB, classC: isC }]">对象数组class混用</div>
            <!-- 绑定 style -->
            <div :style="{ fontSize: size + 'px' }">对象style</div>
            <div :style="[styleObjectA, styleObjectB]" style="background-color: ;">数组style</div>
        </div>
    </div>
    <body>
        <script>
            var dr01 = new Vue({
                el: "#dr01",
                data: {
                    msgText: "this is msgText!",
                    msgHtml: '<span style="color:red;">this is msgHtml</span>',
                    msgBoolean01: true,
                    msgBoolean02: false,
                    itemArrs: ["item A", "item B", "item C", "item D"],
                    itemObjs: {
                        key01: "this is value01",
                        key02: "this is value02",
                        key03: "this is value03"
                    },
                    imageSrc: "img/favicon.ico",
                    isRed: true,
                    classA: "class-a",
                    classB: "class-b",
                    isB: true,
                    isC: true,
                    size: "14",
                    styleObjectA: {
                        backgroundColor: "#cccccc"
                    },
                    styleObjectB: {
                        color: "red"
                    },
                },
                methods: {
                    //方法处理器
                    itemClick01: function() {
                        console.log("u clicked the parent div");
                    },
                    //内联语句
                    itemClick02: function(index, item) {
                        console.log("current index: " + index + "; item: " + item);
                    },
                    //event参数传递
                    itemClick03: function(item, event) {
                        console.log("current item: " + item + "; event target tagName: " + event.target.tagName);
                    },
                    //阻止冒泡
                    itemClickStop: function(item) {
                        console.log("child button is clicked, please watch whether the parent div's log is priented!")
                    },
                    //阻止默认的行为
                    itemClickPrevent: function() {
                        console.log("Prevent Default behaviour");
                    },
                    //点击
                    keyUpEnter: function(event) {
                        console.log("keyCode: " + event.keyCode);
                    },
                }
            })
        </script>
    </body>
</html>

v-if与v-else

根据条件判断结果渲染页面，也就是说只会渲染if和else里面的一个

1
2
3
4
5
6
7
8
<h3>v-if</h3>
<div>msgBoolean01:true</div>
<div v-if="msgBoolean01">(here is v-if code block)if msgBoolean01 is true show this div</div>
<div v-else>(here is v-else code block)if msgBoolean01 is false show this div</div>
<div>msgBoolean01:false</div>
<div v-if="msgBoolean02">(here is v-if code block)if msgBoolean02 is true show this div</div>
<div v-else>(here is v-else code block)if msgBoolean02 is false show this div</div>

template v-if与template v-else

根据条件判断结果渲染页面，也就是说只会渲染if和else里面的一个

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<h3>template v-if</h3>
<div>msgBoolean01:true</div>
<template v-if="msgBoolean01">
    <div>(here is template v-if code block)if msgBoolean01 is true show this div</div>
</template>
<template v-else>
    <div>(here is template v-else code block)if msgBoolean01 is false show this div</div>
</template>
<div>msgBoolean02:false</div>
<template v-if="msgBoolean02">
    <div>(here is template v-if code block)if msgBoolean02 is true show this div</div>
</template>
<template v-else>
    <div>(here is template v-else code block)if msgBoolean02 is false show this div</div>
</template>

v-text: 更新元素的textContent

在内部，大括号大括号Mustache大括号大括号插值也被编译为textNode的一个v-text指令，所以下面两个span渲染结果一致

1
2
3
<h3>v-text</h3>
<div v-text="msgText"></div>
<div>{{msgText}}</div>

v-html：更新元素的 innerHTML

1
2
3
<h3>v-html</h3>
<div v-html="msgHtml"></div>
<div>{{{msgHtml}}}</div>
1
2
3
<h3>v-html</h3>
<div v-html="msgHtml"></div>
<div>{{{msgHtml}}}</div>

v-show与v-else

v-show的语句与v-if不同，不论判断条件结果如何，都会渲染整个html页面，只是将判断结果为false的那个节点加上style=”display:none;”

1
2
3
4
5
6
7
8
<h3>v-show</h3>
<div>msgBoolean01:true</div>
<div v-show="msgBoolean01">(here is v-show code block)if msgBoolean01 is true show this div</div>
<div v-else>(here is v-else code block)if msgBoolean01 is false show this div</div>
<div>msgBoolean01:false</div>
<div v-show="msgBoolean02">(here is v-show code block)if msgBoolean02 is true show this div</div>
<div v-else>(here is v-else code block)if msgBoolean02 is false show this div</div>

v-else

不需要表达式，但是使用的前提条件是前面的兄弟节点必须是v-if或者v-show

v-for

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>遍历数组：</div>
<ul>
    <li v-for="(index,item) in itemArrs">
        <!-- index代表的是当前item的下标，如果要取出下标的值则用{{$index}}即可 -->
        index:{{$index}}, item:{{item}}
    </li>
</ul>
<div>遍历对象key、value（不带下标index）</div>
<ul>
    <li v-for="(key,value) in itemObjs">
        <!-- 
            key代表的是当前对象的属性名称，value代表的是当前对象的属性值
            key取值的时候可以用{{$key}}，也可以使用{{key}}
            value取值的时候只能用{{value}}
            建议：遍历对象不带index下标的时候同时用{{key}}和{{value}}
         -->
        $key:{{$key}},key:{{key}}, value:{{value}}
    </li>
</ul>
<div>遍历对象key、value（带下标index）</div>
<ul>
    <li v-for="(index,key,value) in itemObjs">
        <!-- 
            index代表的是当前属性的下标，key代表的是当前对象的属性名称，value代表的是当前对象的属性值
            index取值的时候只能用{{$index}}
            key取值的时候只能用{{$key}}
            value取值的时候只能用{{value}}
            建议：遍历对象不带index下标的时候同时用{{key}}和{{value}}
         -->
        $index:{{$index}}, $key:{{$key}}, value:{{value}}
    </li>
</ul>
1
2
3
4
5
6
7
8
itemArrs和itemObjs定义如下：
itemArrs: ["item A", "item B", "item C", "item D"],
itemObjs: {
    key01: "this is value01",
    key02: "this is value02",
    key03: "this is value03"
}

结果:

'结果'

v-on: 绑定事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<h3>v-on</h3>
<ul>
    <li v-for="(index,item) in itemArrs">
        <div class="item" v-on:click="itemClick01">
            <span>index:{{$index}}, item:{{item}}</span>
            <button v-on:click="itemClick02($index,item)">内联语句（参数item参数）</button>
            <button v-on:click="itemClick03(item,$event)">内联语句（参数event参数）</button>
            <button v-on:click.stop="itemClickStop(item)">阻止冒泡</button>
            <a href="http://www.baidu.com">跳转到百度</a>
            <a href="http://www.baidu.com" v-on:click.prevent="itemClickPrevent()">阻止a标签默认行为，不会跳转到百度</a>
            <input v-on:keyup.enter="keyUpEnter($event)" />
        </div>
    </li>
</ul>

定义在vue的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
methods: {
    //方法处理器
    itemClick01: function() {
        console.log("u clicked the button");
    },
    //内联语句
    itemClick02: function(index, item) {
        console.log("current index: " + index + "; item: " + item);
    },
    //event参数传递
    itemClick03: function(item, event) {
        console.log("current item: " + item + "; event target tagName: " + event.target.tagName);
    },
    //阻止冒泡
    itemClickStop: function(item) {
        console.log("child button is clicked, please watch whether the parent div's log is priented!")
    },
    //阻止默认的行为
    itemClickPrevent: function() {
        console.log("Prevent Default behaviour");
    },
    //点击
    keyUpEnter: function(event) {
        console.log("keyCode: " + event.keyCode);
    },
}

简单介绍：

通过v-for来遍历items，div内的span标签是遍历的结果，后面紧跟了几个点击事件：

div上的itemClick01是方法处理器

itemClick02是可以传递当前item值的内联语句

itemClick03是可以传递当前item的event事件的内联语句

itemClickStop是阻止冒泡，即相应完当前标签的事件后，阻止点击事件传递到上层div

itemClickPrevent是阻止默认行为，a标签本身是跳转到其他页面，加上itemClickPrevent后阻止了打开新页面的行为

keyUpEnter是响应enter键的事件，但是前提是光标是当前input内

页面显示结果如下（定义了item的hover，当前鼠标悬停在第二个item上）

'效果'

点击“内联语句（参数item参数）”

1
2
current item: item B; event target tagName: BUTTON
u clicked the parent div

点击“阻止冒泡”

1
child button is clicked, please watch whether the parent div's log is priented!

点击“跳转到百度”：跳转到了百度页面。

点击“阻止a标签默认行为，不会跳转到百度”：没有响应

点击“input标签”： u clicked the parent div ，并点击enter键： keyCode: 13

v-bind

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<h3>v-bind</h3>
<div>
    <!-- 绑定 attribute -->
    <img v-bind:src="imageSrc">
    <!-- 缩写 -->
    <img :src="imageSrc">
    <!-- 绑定 class -->
    <div :class="{ red: isRed }">对象class</div>
    <div :class="[classA, classB]">数组class</div>
    <div :class="[classA, { classB: isB, classC: isC }]">对象数组class混用</div>
    <!-- 绑定 style -->
    <div :style="{ fontSize: size + 'px' }">对象style</div>
    <div :style="[styleObjectA, styleObjectB]">数组style</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
data中的定义
imageSrc: "img/favicon.ico",
isRed: true,
classA: "class-a",
classB: "class-b",
isB: true,
isC: true,
size: "14",
styleObjectA: {
    backgroundColor: "#cccccc"
},
styleObjectB: {
    color: "red"
}

展示结果：

'效果'

v-el

用法：
在其所有者Vue实例的$els对象上注册对DOM元素的引用，以便于访问。

1
2
3
4
<span v-el:msg>hello</span>
<span v-el:other-msg>world</span>
this.$els.msg.textContent // -> "hello"
this.$els.otherMsg.textContent // -> "world"

v-ref

注册对父项的子组件的引用，以便直接访问。不期待一个表达。必须提供一个参数作为注册的id。组件实例将可以在其父$refs对象上访问。

当与组件一起使用时v-for，注册的值将是包含与其绑定到的Array相对应的所有子组件实例的Array。如果数据源v-for是一个Object，则注册的值将是包含镜像源对象的键 - 实例对的Object。

1
2
3
<!--html-->
<comp v-ref:child></comp>
<comp v-ref:some-child></comp>
1
2
3
4
//js
// access from parent:
this.$refs.child
this.$refs.someChild

和 v-for 使用

1
2
<!--html-->
<comp v-ref:list v-for="item in list"></comp>
1
2
3
//js
// this will be an array in parent
this.$refs.list

在vue2的版本中，v-ref和v-el都被 ref指令代替

v-pre

v-pre标签内不解析

1
<span v-pre>{{ this will not be compiled }}</span>