一、内置指令
1. v-text 指令
- 作用：向其所在的节点中渲染文本内容。
- 与插值语法的区别：v-text 会替换掉节点中的内容，{{}} 则不会。
<div id="root"> <p>Hello {{name}}</p> <p v-text="name">Hello</p> </div> const vm = new Vue({ el: '#root', data: function () { return { name: 'Vue' } } })
2. v-html 指令
作用：向指定节点中渲染包含 html 结构的内容。
与插值语法的区别：
（1）v-html 会替换掉节点中所有的内容，{{xx}} 则不会。
（2）v-html 可以识别 html 结构。
严重注意：v-html 有安全性问题！！
（1）在网站上动态渲染任意 HTML 是非常危险的，容易导致 XXS攻击。
（2）一定要在可信的内容上使用 v-html，永不要用在用户提交的内容上！
<div id="root"> <p>v-text 不支持结构的解析</p> <p v-text="str"></p> <p v-html="str"></p> </div> const vm = new Vue({ el: '#root', data: function () { return { str: '<h3>Hello vue</h3>' } } })
3. v-cloak 指令（没有值）
- 本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉 v-cloak 属性。
- 使用 css 配合 v-cloak 可以解决网速慢时页面展示出 {{xxx}} 的问题。
[v-cloak]{ display: none; /* 标签中含有v-cloak指令的内容都隐藏 */ } <div id="root"> <h2 v-cloak>Hello {{name}}</h2> </div> const vm = new Vue({ el: '#root', data: { name: 'Vue~' } })
4. v-once 指令
- v-once 所在节点在初次动态渲染后，
- 以后数据的改变不会引起 v-once 所在结构的更新，可用于优化性能。
<div id="root"> <h3 v-once>初始化n的值为：{{n}}</h3> <h3>当前n的值为：{{n}}</h3> <button @click="add">点我+1</button> </div> const vm = new Vue({ el: '#root', data: function () { return { n: 0 } }, methods: { add() { this.n++ } }, })
5. v-pre 指令
- 跳过其所在节点的编译过程。
- 可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。
<div id="root"> <h2 v-pre>Vue so easy!(v-pre行不会解析，写的是什么就呈现什么)</h2> <h2 v-pre>当前的n值是：{{n}}</h2> <h2>当前的n值是：{{n}}</h2> <button @click="n++">点我n+1</button> </div> const vm = new Vue({ el: '#root', data: { n: 0 } })
二、自定义指令
1. 定义语法 （局部指令）
new Vue({ directives: {指令名: 配置对象} })
new Vue({ directives: {指令名: 回调函数} })
2.定义语法（全局指令）
Vue.directive(指令名, 配置对象)
Vue.directive(指令名, 回调函数)
3. 配置对象中常见的三个回调
- .bind：指令与元素成功绑定时调用。
- .inserted：指令所在元素被插入页面时调用。
- .update：指令所在模板结构被重新解析时调用。
4. 注意事项
- 指令定义时不加 v-，但使用时要加 v-。
- 指令名如果是多个单词，要使用 kebab-case 命名方式，不要用cameCase 命名。
实例
需求：
- 定义一个 v-big 指令，和 v-text 功能类似，但会把绑定的数值 放大10倍。
- 定义一个 v-fbind 指令，和 v-bind 功能类似，但可以让其所绑定的 input 元素 默认获取焦点。
<div id="root"> <h3>当前n的值是：<span v-text="n"></span></h3> <h3>放大10倍后的n值是：<span v-big="n"></span></h3> <button @click="n++">点我 n+1</button> <hr/> <input type="text" v-fbind="n"> </div> const vm = new Vue({ el: '#root', data: function () { return { n: 1 } }, directives: { //big函数何时会被调用？ 1.指令与元素成功绑定时。2.指令所在的模板被重新解析时。 big(element, binding) { console.log('big', this) //注意此处的this是window element.innerHTML = binding.value * 10 }, fbind: { //指令与元素成功绑定时 bind(element, binding) { element.value = binding.value }, //指令所在元素被插入页面时 inserted(element, binding) { element.focus() }, //指令所在的模板被重新解析时 update(element, binding) { element.value = binding.value } } } })
初始页面（会自动获取焦点）
加到 n 的值为 6 时
不积跬步无以至千里 不积小流无以成江海
