vue之自定义指令
像v-if、v-show、等这些都是系统指令，比如说我想写一个v-color的指令，但是系统是没有这个指令的，如果我们直接这样写肯定会报错，所以我们下面就需要自定义指令。
1 <div id="app"> 2 3 <h1 v-color="pink">11111111111111</h1> 4 5 </div> 6 7 <script src="vue.js"></script> 8 <script> 9 10 Vue.directive("color",function(el,binding){ 11 /*console.log(el); 12 console.log(binding); */ 13 14 el.style[binding.name] = binding.expression; 15 16 }); 17 new Vue({ 18 el:"#app", 19 data:{ 20 pink:"" 21 } 22 23 }) 24 </script> 25 </body>
上面这种Vue.directive是全局的写法，里面有两个参数第一个是指令名称，第二个是一个方法，方法里面也有两个参数第一个参数el就是Dom节点，第二个是这个对象里面有个name属性，name对应color就是这个color。
这是一个全局的写法。
下面这种是局部的写法（注意的是directive要加s）：
1 <div id="app"> 2 3 <h1 v-color>11111111111111</h1> 4 <h2 v-date>456</h2> 5 6 </div> 7 8 <script src="vue.js"></script> 9 <script> 10 new Vue({ 11 el:"#app", 12 directives:{ 13 "color":function(el,binding){ 14 el.style.color = "red" 15 }, 16 "date":function(el,binding){ 17 18 el.innerHTML = "123" 19 } 20 } 21 })
