vuejs學習4 自定義指令
阿新 • • 發佈：2018-12-22
1\只是方法名由component 改為了directive 。上例只是註冊了自定義指令
v-focus ，還沒有實現具體功能，下面具體介紹自定義指令的各個選工頁。
自定義指令的選項是由幾個鉤子函式組成的，每個都是可選的。
• bind ： 只調用一次，指令第一次繫結到元素時呼叫，用這個鉤子函式可以定義一個在繫結
時執行一次的初始化動作．
• inserted ： 被繫結元素插入父節點時呼叫（父節點存在即可呼叫，不必存在於document 中） ．
• update： 被繫結元素所在的模板更新時呼叫，而不論繫結值是否變化。通過比較更新前後
的繫結值，可以忽略不必要的模板更新。
• componentUpdated ： 被繫結元素所在模板完成一次更新週期時呼叫．
v-focus ，還沒有實現具體功能，下面具體介紹自定義指令的各個選工頁。
自定義指令的選項是由幾個鉤子函式組成的，每個都是可選的。
• bind ： 只調用一次，指令第一次繫結到元素時呼叫，用這個鉤子函式可以定義一個在繫結
時執行一次的初始化動作．
• inserted ： 被繫結元素插入父節點時呼叫（父節點存在即可呼叫，不必存在於document 中） ．
• update： 被繫結元素所在的模板更新時呼叫，而不論繫結值是否變化。通過比較更新前後
的繫結值，可以忽略不必要的模板更新。
• componentUpdated ： 被繫結元素所在模板完成一次更新週期時呼叫．
• unbind ： 只調用一次，指令與元素解綁時呼叫。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script> </head> <body> <div id="app"> <div v-lang="color">{{num}}</div> <div v-lang2=https://www.cnblogs.com/lhl66/p/7492444.html"color">test</div> <p><button @click="add">add</button></p> </div> <p> <button onclick='unbind()'>解綁</button> </p> </body> <script type="text/javascript"> function unbind() { vm.$destroy();//另外起一個方法解綁 } Vue.directive('lang', { //五個註冊指令的鉤子函式 bind: function() { //被繫結 console.log('1 - bind'); }, inserted: function() { //繫結到節點 console.log('2 - inserted'); }, update: function() { //元件更新 console.log('3 - update'); }, componentUpdated: function() { //元件更新完成 console.log('4 - componentUpdated'); }, unbind: function() { //解綁 console.log('5 - bind'); } }); Vue.directive('lang2', { //五個註冊指令的鉤子函式 bind: function() { //被繫結 console.log('1 - bind2'); }, inserted: function() { //繫結到節點 console.log('2 - inserted2'); }, update: function() { //元件更新 console.log('3 - update2'); }, componentUpdated: function() { //元件更新完成 console.log('4 - componentUpdated2'); }, unbind: function() { //解綁 console.log('5 - bind2'); } }); var vm = new Vue({ el: "#app", data: { num: 10, color: 'red' }, methods: { add: function() { this.num++; } } }); </script> </html>