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

初識vue.js，我的學習之路（三）