Vue.directive 自定義指令 · web前端

[TOC] # 什么是全局API 全局API并不在構造器里，而是先聲明全局變量或者直接在Vue上定義一些新功能，Vue內置了一些全局API，比如我們今天要學習的指令Vue.directive。說的簡單些就是，在構造器外部用Vue提供給我們的API函數來定義新的功能。 # vue.directive自定義指令我們也可以定義一些屬于自己的指令，比如我們要定義一個v-jdxia的指令，作用就是讓文字變成綠色。 ~~~ <div id="app"> <div v-jdxia="color">{{num}}</div> </div> <script type="text/javascript"> //el就是dom元素 //binding是js對象,可以打印出來看下 //binding.value就是獲取v-jdxia=的值,而這個值和下面的那個是同步的 //里面的匿名函數是可以傳遞3個參數,這邊就先寫2個 Vue.directive("jdxia", function (el, binding) { el.style = "color:" + binding.value; }); var app = new Vue({ el: '#app', data: { num: 10, color: 'red', } }) </script> ~~~ # 自定義指令中傳遞的三個參數 el: 指令所綁定的元素，可以用來直接操作DOM。 binding: 一個對象，包含指令的很多信息。 vnode: Vue編譯生成的虛擬節點 # 自定義指令的生命周期自定義指令有五個生命周期（也叫鉤子函數），分別是 bind,inserted,update,componentUpdated,unbind bind:只調用一次，指令第一次綁定到元素時調用，用這個鉤子函數可以定義一個綁定時執行一次的初始化動作。 inserted:被綁定元素插入父節點時調用（父節點存在即可調用，不必存在于document中）。 update:被綁定于元素所在的模板更新時調用，而無論綁定值是否變化。通過比較更新前后的綁定值，可以忽略不必要的模板更新。 componentUpdated:被綁定元素所在模板完成一次更新周期時調用。 unbind:只調用一次，指令與元素解綁時調用。 ~~~ <body> <div id="app"> <div v-jdxia="color">{{num}}</div> </div>  <p> <button onclick="unbind()">解綁</button> </p> </body> <script type="text/javascript"> function unbind() { //$destroy這個是vue提供給我們的 app.$destroy(); } //el就是dom元素 //binding是js對象,可以打印出來看下 //binding.value就是獲取v-jdxia=的值,而這個值和下面的那個是同步的 Vue.directive("jdxia", { bind: function (el, binding) { //被綁定 console.log('1 - bind'); el.style = "color:" + binding.value; }, inserted: function () { //綁定到節點 console.log('2 - inserted'); }, update: function () { //組件更新 console.log('3 - update'); }, componentUpdated: function () { //組件更新完成 console.log('4 - componentUpdated'); }, unbind: function () { //解綁 console.log('5 - unbind'); } }); var app = new Vue({ el: '#app', data: { num: 10, color: 'red', } }) </script> ~~~