简述Vue的十个常用指令
- v-text 指令
- v-bind 指令
- v-on 指令
- v-if 指令
- v-show 指令
- v-for指令
- v-cloak 指令
- v-pre 指令
- v-once 指令
- v-model 指令
v-text
该指令可以为html中的元素内容进行赋值操作，形如<any v-text="model层当中的变量名称"></any>，这段代码也等价于<any> {{变量名称}} </any>，<any>表示任何标签；在这里可以引申出v-html指令，该指令可以识别出数据中的html标签，举以下例子：
<div id="example">
欢迎：<span v-text="userName"></span><br>
欢迎：<span>{{userName}}</span><br><br>
<span v-text="url"></span><br>
<span v-html="url"></span><br>
</div>
var example = new Vue({
el: "#example",
data: {
userName: "sam",
url: "<a href='http://www.baidu.com'>详细信息</a>"
}
});
效果：
v-bind
该标签可以修改html中元素的属性，写作<any v-bind:属性名称="变量名称"></any>等价于
<any ：属性名称="变量名称"></any>，形如：
<div id="example2">
图片:<img v-bind:src="imgsrc" />
</div>
var example2 = new Vue({
el: "#example2",
data: {
imgsrc: "img/1.png"
}
});
效果：
v-on
该指令可为元素添加绑定事件，写作<any v-on:事件名称="处理函数名称/方法名称"></any>等价于
<any @事件名称="处理函数名称/方法名称"></any>，形如：
<div id="example3">
<p>立{{ count }}个扫把</p>
<button v-on:click="addCount">扫把+1</button>
</div>
var example3 = new Vue({
el: '#example3',
data: {
count: 0
},
methods: {
addCount: function() {
this.count = this.count + 1;
}
}
});
效果：
v-if
该指令见名知意，可以根据数据决定是否渲染该元素，为true渲染，为false不渲染，写作：
v-if
<any v-if="条件表达式">
v-if v-else
<any v-if="条件表达式">
<any v-else>
v-if v-else-if v-else
<any v-if="条件表达式">
<any v-else-if="条件表达式">
<any v-else-if="条件表达式">
... ...
<any v-else>
形如：
<div id="app1">
<div v-if="type == 'A'">
A
</div>
<div v-else-if="type == 'B'">
B
</div>
<div v-else-if="type == 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
var app1 = new Vue({
el: "#app1",
data: {
type: "D"
}
});
效果：
v-show
该元素只是很单纯的决定被修饰的元素是否渲染，写作：<any v-show="条件表达式">，该指令的底层实现就是给隐藏元素添加style的display属性：style="display: none;"，形如：
<div id="example4">
<span v-show="num>10">大于10</span>
<span v-show="num<10">小于10</span>
</div>
var example4 = new Vue({
el: "#example4",
data: {
num: 20
}
});
效果：
v-for
循环指令，在表格table中用的比较多，给要循环显示的元素加上此标签，如果element为一个对象，则用element点出该对象的属性名获取值，语法：
<any v-for="element of 数组" >
{{element}}
</any>
<any v-for="(element,index) of 数组" >
{{element}} {{index}}
</any>
形如：
<div id="app4">
<table border="1px">
<tr>
<th>id</th>
<th>name</th>
</tr>
<tr v-for="person of persons">
<td>{{person.id}}</td>
<td>{{person.name}}</td>
</tr>
</table>
</div>
var app4 = new Vue({
el: "#app4",
data: {
persons: [ {"id": 1,"name": "张三"},
{"id": 2,"name": "sam"},
{"id": 3,"name": "lily"}
]
}
});
效果：
v-cloak
该指令会在vue加载完之前，短暂隐藏{{ }} ，当vue对象实例化完毕后，此属性会自动移除，但要在页面上自定义样式，通过属性选择器定义：[v-cloak]{display:none;}，该指令可以解决用户因网速问题数据还未全部加载而看到{{ }}的问题。
<div id="app5" v-cloak>
<span>欢迎{{userName}}访问</span>
</div>
v-pre
该指令可以保护标签内容不被vue编译和插值，保持原内容不变，语法：
<any v-pre> {{原样数据}} </any>，形如：
<div id="app6">
<span v-pre>{{password}}</span>
</div>
var app6 = new Vue({
el: "#app6",
data: {
password: "123456"
}
});
效果：
v-once
该指令可以控制被修饰的元素内容就为第一次赋的值，后续view中的内容不会随着模型层数据的变化而发生变化，语法：<any v-once> {{model定义的模型层数据}} </any>。
v-model
该指令可以实现view层与model层数据的双向绑定，比如说页面上有一个文本框和一个span标签，文本框中的数据与span标签的内容一致，并可以实时同步，语法：
<any v-model="属性名称"> {{显示vue中定义的模型层数据}} </any>
形如：
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
});
效果：我在往文本框里输入数据是，span标签内容会实时改变，控制器可以监控文本框内的数据变化，从而修改span中的{{ message }}
以上为10个vue常用指令。
Vue自定义指令
自定义指令顾名思义可以根据需要灵活地创建自己的指令，分为全局指令与局部指令；指令中对元素的操作方法叫做钩子函数
- 全局指令语法：
Vue.directive("指令名称", {
//钩子函数组:
"钩子函数名": function("参数") {
//进行的操作
},
"钩子函数名": function("参数") {
//进行的操作
},
...
});
- 局部指令语法：
new Vue({
el: "#app1",
data: {},
directives: {
"指令名称": {
"钩子函数名": function("参数") {
//进行的操作
},
"钩子函数名": function("参数") {
//进行的操作
}
}
}
});
元素可以通过v-钩子函数名去调用单个钩子函数或钩子函数组，形如：
<div id="app1">
<span v-钩子函数名>武汉加油</span>
</div>
那么钩子函数有哪些呢，看以下：
- bind：只调用一次，在这里可以进行一次性的初始化设置，与样式相关的操作可以在此阶段进行
- inserted：被绑定元素插入父节点时调用，和js行为相关的操作可以在此阶段执行
- update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
- componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用
- unbind：只调用一次，指令与元素解绑时调用
举以下例子，包含全局与局部指令，element参数代表的是html元素：
<div id="app1">
<input type="text" v-mystyle />
<span v-mycolor>武汉加油</span>
</div>
Vue.directive("mycolor", {
bind: function(element) {
element.style.color = "red";
}
});
new Vue({
el: "#app1",
data: {},
directives: {
"mystyle": {
inserted: function(el) {
el.placeholder = "user";
el.focus();
},
bind: function(el) {
el.style.color = "red";
}
}
}
});
效果：
钩子函数中也包含很多参数：
- el：指令所绑定的元素，可以用来直接操作 DOM 。
- binding：一个对象，取值时通过
binding.属性名，包含以下属性：
name：指令名，不包括 v- 前缀。
value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。value中可以存放多个json格式的参数，形如：v-demo="{ color: 'white', text: 'hello!' }"。
oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression：字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。
arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。
modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
- vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
- oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
举以下例子：
<div id="app2">
<span v-mycolor2:foo.a.b="'pink'">{{message}}</span><br>
</div>
new Vue({
el: "#app2",
data: {
message: "樱花🌸",
},
directives: {
"mycolor2": {
bind: function(el, binding, vnode) {
el.style.color = binding.value;
el.innerHTML =
'name: ' + binding.name + '<br>' +
'value: ' + binding.value + '<br>' +
'expression: ' + binding.expression + '<br>' +
'argument: ' + binding.arg + '<br>' +
'modifiers: 参数a=' + binding.modifiers.a + '，参数b=' + binding.modifiers.b + '<br>' +
'vnode keys: ' + Object.keys(vnode).join(', ');
}
}
}
});
效果：
指令的参数还可以是动态的，例如在v-mydirective:[argument]="value"中，argument 参数可以根据组件实例数据进行更新，这使得自定义指令可以在应用中被灵活使用，形如：
<div id="dynamicexample">
<p v-pin:[direction]="'red'">test</p>
</div>
new Vue({
el: "#dynamicexample",
data: {
direction: "color"
},
directives: {
"pin": {
bind: function(el, binding) {
el.style[binding.arg] = binding.value
}
}
}
});
效果：
以上就是Vue的自定义指令。
175
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
