1、Vue.directive(id,definition)注冊一個全局自定義指令，接收兩個參數，指令ID以及定義對象
2、鈎子函數：將作用域與DOM進行鏈接，鏈接函數用來創建可以操作DOM的指令
bind - 只調用一次，在指令第一次綁定到元素上時候調用 update - 在bind之后立即以初始值為參數第一次調用，之后綁定值變化的時候，參數為新值與舊值 unbind - 只調用一次，在指令從元素上解綁的時候調用
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Vue.directive('my-directive',{
bind : function(){
//准備工作
//例如，添加事件處理器或只需要運行一次的高耗任務
},
update : function(){
//值更新時的工作
//也會以初始值為參數調用一次
},
unbind : function(){
//清理工作
//例如，刪除bind()添加的事件監聽器
}
})
//調用
<div v-my-directive="someValue"></div>
//只需要update函數，可以傳一個函數替代定義對象
Vue.directive('my-directive',function(value){})
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
<!-- 如果指令需要多個值，可以傳入一個js對象 --> <!-- 指令可以使用合法的js表達式 --> <body id="example"> <div id="demo" v-demo="{color : 'white',text : 'hello!'}"></div> </body> <script> Vue.directive('demo',function(value){ console.info(value.color); //white console.info(value.text) // hello! }) var demo = new Vue({ el : '#demo' }) </script>
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
當指令使用字面修飾符，值將按普通字符串處理並傳遞給update方法，update方法只調用一次，因為普通字符串不能影響數據變化
<body id="example"> <div id="demo" v-demo.literal="foo bar baz"></div> </body> <script> Vue.directive('demo',function(value){ console.info(value); //foo bar baz }) var demo = new Vue({ el : '#demo' }) </script>
3、以屬性的形式使用自定義屬性
<body id="demo"> <my-directive class="hello" name="hi"></my-directive> </body> <script type="text/javascript"> Vue.elementDirective('my-directive',{ //api同普通指令一致 bind : function(){ console.info(this.el.className); console.info(this.el.getAttribute('name')) } }) var demo = new Vue({ el : '#demo' }) </script>
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
<body id="demo"> <my-directive class="hello" name="hi" a="params"></my-directive> </body> <script type="text/javascript"> Vue.elementDirective('my-directive',{ params : ['a'], //api同普通指令一致 bind : function(){ console.info(this.el.className); console.info(this.el.getAttribute('name')) } }) var demo = new Vue({ el : '#demo' }) </script> <!-- 或者需要自動更新的時候，需要一個回調 --> <body id="demo"> <my-directive class="hello" name="hi" v-bind:a="someValue"></my-directive> <input type="text" v-model="someValue"> </body> <script type="text/javascript"> Vue.elementDirective('my-directive',{ params : ['a'], paramWatchers : { a : function(val,oldValue){ console.info('a changes'); } } }) var demo = new Vue({ el : '#demo', data : { someValue : 'value' } }) </script>
4、自定義屬性用在對象上，對象內部屬性變化的時候觸發update，在指令定義對象中指定deep:true
<body id="demo"> <div v-my-directive="a"></div> <button @click="change">change</button>{{a,b,c}} </body> <script> Vue.directive('my-directive',function(){ deep : true, update : function(obj){ //當obj的嵌套屬性變化時候調用 console.info(obj.b.c); } }) var demoVM = new Vue({ el : '#demo', data : { a : {b : {c : 2}} }, method : { change : function(){ demoVM.a.b.c = 4; } } }) </script>
5、acceptStatement讓自定義指令接受內聯語句
<body id="demo"> <div v-my-directive="a++"></div> {{a}} </body> <script> Vue.directive('my-directive',function(){ acceptStatement : true, update : function(fn){ //當obj的嵌套屬性變化時候調用 console.info(fn.toString()) fu(); } }) var demoVM = new Vue({ el : '#demo', data : { a : 5 } }) </script>
6、v-on綁定多個事件時，要是是不同的事件類型，例如點擊，focus，change，會按照業務需求進行選擇，要是綁定了2個甚至多個click事件，那么v-on只會綁定第一個click事件