Vue -- 自定義指令 · Vue&&TypeSprict--基礎總結

>[success] # vue 自定義指令 [官方文檔對應章節](https://cn.vuejs.org/v2/guide/custom-directive.html) ~~~ 1.Vue的指令官網是這樣說的: Vue 允許注冊自定義指令。注意，在 Vue2.0 中，代碼復用和抽象的主要形式是組件。然而，有的情況下，你仍然需要對普通 DOM 元素進行底層操作，這時候就會用到'自定義指令'。 2.可以參考 --- 前端使用手冊Vue章節有講解輪播圖的用法 ~~~ >[info] ## 用法講解 ~~~ 1.使用 Vue.directive() 定義全局的指令 2.第一參數是自定義組件名稱 3.第二個參數是一個對象，對象中包含了一些鉤子函數(均為可選)依次是： 3.1.'bind'：只調用一次，指令第一次綁定到元素時調用。在這里可以進行一次性的初始化設置。 3.2.'inserted'：被綁定元素插入父節點時調用 (僅保證父節點存在，但不一定已被插入文檔中)。 3.3.'update'：所在組件的 VNode 更新時調用，但是可能發生在其子 VNode 更新之前。指令的值可能發生了改變，也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新 3.4.'componentUpdated'：指令所在組件的 VNode及其子 VNode全部更新后調用。 3.5.'unbind'：只調用一次，指令與元素解綁時調用。注：其中bind，inserted，unbind 是只調用一次，update是一些屬性重新生調用 4.這些鉤子函數中參數依次為 'el、binding、vnode 和 oldVnode' 4.1.'el' 是當前綁定自定義的dom元,可以直接操作dom 4.2.'binding'是一個和自定義指令相關的對象內容包含依次如下： 4.2.1.'name'：獲取指令名，這里的指令名指的是不包括'v-'前綴。 4.2.2.'value'：獲取指令的綁定值，例如：v-my-directive="1 + 1" 中，綁定值為 2 4.2.3.'oldValue'：指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。 4.2.4.'expression'：字符串形式的指令表達式。例如 v-my-directive="1 + 1" 中，表達式為 "1 + 1"。 4.2.5.'arg'：傳給指令的參數，可選。例如'v-my-directive:foo'中，參數為"foo"。 4.2.6.'modifiers'：一個包含修飾符的對象。例如：'v-my-directive.foo.bar'中，修飾符對象為`{ foo: true, bar: true }`。 4.3.'vnode'：Vue 編譯生成的虛擬節點 4.4.'oldVnode'：上一個虛擬節點，僅在'update'和'componentUpdated'鉤子中可用 ~~~ >[danger] ##### 指令中的鉤子函數對應階段可做的事情 ~~~ 1.bind：只調用一次，指令第一次綁定到元素時調用。在這里可以進行一次性的初始化設置。(還沒有創建dom ，可以做一些不需要dom節點的事情，比如樣式初始化) 2.inserted：被綁定元素插入父節點時調用（創建了dom 對象，可以做一些 dom的操作） 3.update：所在組件的 VNode 更新時調用（vue 中元素改變后才會改變） 4.componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調用。(不清楚如何使用后續了解) 5.unbind：只調用一次，指令與元素解綁時調用。（不清楚如何使用后續了解） ~~~ >[danger] ##### 自定義獲取焦點和改變字體顏色的案例 ~~~ 1.傳參接受的時候binding.value 2.在很多時候，你可能想在 bind 和 update 時觸發相同行為，而不關心其它的鉤子。比如這樣寫: Vue.directive('color-swatch', function (el, binding) { el.style.backgroundColor = binding.value }) ~~~ ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="lib/vue.js"></script> </head> <body> <div id="app">  <input type="button" value="改變顏色屬性" @click="color='yellow'">  <input type="text" v-color="'red'">  <input type="text" v-color="color">  <input type="text" v-changecolor="color"> <input type="text" v-focus> </div> <script> Vue.directive('color', { // 1.el 是被綁定的當前元素 2.binding 是接受指令的參數 bind:function (el,binding) { // 還沒有創建dom ，可以做一些不需要dom節點的事情，比如樣式更改 // el.style.color = 'red' el.style.color= binding.value }, } ); Vue.directive('focus',{ inserted:function (el,binding) { // 創建了dom 對象，可以做一些dom的操作， console.log(el) el.focus() } }); Vue.directive('changecolor',{ update:function (el,binding) { // vue 中元素改變后才會改變 el.style.color= binding.value } }); Vue.directive('color', { // 1.el 是被綁定的當前元素 2.binding 是接受指令的參數 bind:function (el,binding) { // 還沒有創建dom ，可以做一些不需要dom節點的事情，比如樣式更改 // el.style.color = 'red' el.style.color= binding.value }, update:function (el,binding) { // vue 中元素改變后才會改變 el.style.color= binding.value } } ); var vm = new Vue({ el:"#app", data:{ color:'red' }, }) </script> </body> </html> ~~~