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 })