1.8 v-once
v-once：不需要表达式，只渲染元素或组件一次；以后渲染时，组件/组件及下面的子元素都当成静态页面不再被渲染
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-once demo</title> <script src="../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script> </head> <body> <div id="app"> <input v-model="message" placeholder="edit"> <span>{{message}}</span> <span v-once>{{message}}</span> </div> <script type="text/javascript"> var vm=new Vue({ el:'#app', data:{ message:'hello' } }) </script> </body> </html>
1.9 v-if
v-if：条件渲染指令，动态地在DOM内添加或删除DOM元素
主要用法：根据表达式值的真假判断是否渲染元素，在切换时元素及它的数据绑定/组件被销毁并重建
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-if demo</title> <script src="../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script> </head> <body> <div id="app"> <select v-model="message"> <option>3</option> <option>1</option> </select> <span v-if="message > 2">{{message}}</span> </div> <script type="text/javascript"> var vm=new Vue({ el:'#app', data:{ message:'begin' } }) </script> </body> </html> 复制代码
1.10 v-else
v-else：条件渲染指令，必须与v-if成对使用
主要用法：v-else必须跟在v-if或者v-else-if后面，否则无法识别
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-else demo</title> <script src="../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script> </head> <body> <div id="app"> <select v-model="message"> <option>3</option> <option>1</option> </select> <span v-if="message > 2">选择的值大于2</span> <span v-else>选择的值小于2</span> </div> <script type="text/javascript"> var vm=new Vue({ el:'#app', data:{ message:'begin' } }) </script> </body> </html> 复制代码
1.11 v-else-if
v-else-if：判断多层条件，必须与v-if成对使用
主要用法：就是相当于else if
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-else-if demo</title> <script src="../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script> </head> <body> <div id="app"> <input v-model="score" placeholder="edit"> <p v-if="score>=90">优秀</p> <p v-else-if="score>=80">良好</p> <p v-else-if="score>=70">中等</p> <p v-else-if="score>=60">及格</p> <p v-else>不及格</p> </div> <script type="text/javascript"> var vm=new Vue({ el:'#app', data:{ score:100 } }) </script> </body> </html> 复制代码
1.12 v-show
v-show：条件渲染指令，为DOM设置css的style属性
主要用法：根据表达式的真假切换元素的css属性display，当条件变化时，该指令触发过渡效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-show demo</title> <script src="../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script> </head> <body> <div id="app"> <select v-model="message"> <option>90</option> <option>30</option> </select> <span v-show="message>60">ok</span> </div> <script type="text/javascript"> var vm=new Vue({ el:'#app', data:{ message:'' } }) </script> </body> </html> 复制代码
v-show其实是使用css中的display:none来控制元素的显示和隐藏，形式上和v-if效果是一样的，但是v-if才是真正的条件渲染，而v-show始终会渲染元素，并且保存在DOM中
2.自定义指令
自定义指令又分为局部自定义指令和全局自定义指令，使用Vue.directive(id,definition)可以注册全局自定义指令，使用组件的directives选项可以注册局部自定义指令
2.1 局部注册
局部注册自定义指令，作用在局部，默认只会在当前页面的Vue实例生效。
使用directives写在Vue实例中，指令名不用字符串格式，指令名和directives都是以对象的形式来写，其中的钩子函数写法和全局一样，写好后直接用v-指令名使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>局部自定义指令 demo</title> <script src="../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script> </head> <body> <div id="app"> <input type="text" v-content> </div> <script type="text/javascript"> var vm=new Vue({ el:'#app', data: {}, directives:{ content:{ inserted:el=>{ el.value='请输入文本框内容'; } } } }); </script> </body> </html>
2.2 全局注册
全局注册自定义指令，作用在全局，写法是在Vue实例前用Vue.directive()方法；
这个方法需要传入两个参数，第一个参数是指令名，指令名要求必须是字符串；
第二个参数是一个对象，在对象中属性为钩子函数，在钩子函数中传入参数，根据参数进行编写
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>全局自定义指令 demo</title> <script src="../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script> </head> <body> <div id="app"> <input type="text" v-content> </div> <script type="text/javascript"> Vue.directive('content',{ inserted:function(el){ el.value='请输入文本框内容'; } }) var vm=new Vue({ el:'#app', data: {}, }); </script> </body> </html> 复制代码
2.3 钩子函数
一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。unbind：只调用一次，指令与元素解绑时调用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>钩子函数 demo</title> <script src="../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script> </head> <body> <div id="app"> <input type="text" v-focus> </div> <script type="text/javascript"> Vue.directive('focus',{ bind:function(){}, inserted(el){ el.value='hahaha' }, updated(){} }) var vm=new Vue({ el:'#app', }); </script> </body> </html> 复制代码
2.4 钩子函数参数
指令钩子函数会被传入以下参数：
el：指令所绑定的元素，可以用来直接操作 DOM。- binding：一个对象，包含以下 property：
name：指令名，不包括v-前缀。value：指令的绑定值，例如：v-my-directive="1 + 1"中，绑定值为2。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 编译生成的虚拟节点。oldVnode：上一个虚拟节点，仅在update和componentUpdated钩子中可用。
除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。
2.5 简写
// 全局注册自定义指令 Vue.directive('指令名',function(el,binding){ el.style.backgroundColor=binding.value; }) v-bind:href = :href v-on:click="xxx" = @click="xxx" 复制代码
2.6 对象字面量
如果指令需要多个值，可以传入一个 JavaScript 对象字面量。指令函数能够接受所有合法的 JavaScript 表达式。
