vue 自定義指令

自定義指令：在vue中，除了可以使用它提供的內建指令，還可以自己定義一些指令

自定義指令用於不可避免要操作dom元素時，把它放在自定義指令中

自定義指令後面可以跟乙個布林值，讓滿足條件的元素執行這個自定義指令

如：v-my-focus="true"

此時binding.value = true

自定義聚焦指令不能放在bind鉤子函式裡

註冊自定義指令：

①包括全域性註冊和區域性註冊

全域性註冊在任何元件中都可以使用

區域性註冊只能在當前元件中使用

如果在多個元件中同時使用這個指令，就把它註冊成全域性的

如果只在乙個元件總使用，就把它註冊成區域性的

註冊：1、先註冊自定義屬性，再繫結要遍歷的盒子

2、在註冊時，名字可以隨便取，但在繫結時，前面必須加 v- 字首

如果是駝峰命名，在繫結時必須把大寫字母改小寫，並用 - 連線單詞

3、繫結時，el是繫結的元素，binding是乙個物件，物件裡面有很多屬性，其中 value 指的是繫結的值

4、指令物件含四個鉤子

①bind:只呼叫一次，指令第一次繫結到元素時呼叫。在這裡可以進行一次性的初始化設定，比如css樣式。

②inserted:被繫結元素插入父節點時呼叫 (僅保證父節點存在，但不一定已被插入文件中)，和js相關的操作放在inserted裡。

同點：都只執行一次，以後再也不會 被呼叫了，前兩個的區別是：前者不能拿到父元素，後者可以

③update：節點更新前呼叫，但很可能發生在它的子節點更新前

如果裡面的函式簡寫，自動呼叫bind和updata，因為它們一般情況下都執行相同的內容

如：vue.directive('my-bind', function () )

④componentupdated：節點更新後呼叫

③和④基本一樣，都是在該指令的模板更新時呼叫，區別在於模板內容不一樣

⑤unbind：只呼叫一次，指令和元素解綁時呼叫。比如前面制定了定時器，則在最後把定時器清除

呼叫：

註冊：

vue.directive('myshow',  else 

},inserted: function (el, binding) ,
update: function (el, binding)  else 
},componentupdated: function (el, binding) ,
unbind: function (el, binding) ,
})		data: 
})

全域性的自定義指令可以在所有的例項裡面使用，區域性的只能在當前例項裡面使用

Vue自定義指令

vue有很多內建的指令，比如說v on，v model，v clock等等，每乙個指令會完成一定的功能，但是這些內建的指令總會有些侷限性，要是能夠自定義指令就好了 vue的自定義指令分類 全域性指令和區域性指令 vue指令的定義和用法 以全域性指令為例 1.語法 vue.directive 指令id...

vue自定義指令

自定義指令主要有兩種方式。一是在元件裡以directives的選項來自定義指令的內容。這樣的自定義指令是區域性的自定義指令，只在當前的元件裡面才能使用。script export default directives arr arr.join el.style.csstext arr script ...

VUE 自定義指令

dom插入便獲取焦點 vue.directive focus 根據指令的值決定自否獲取焦點 vue.directive focus 注 被拖拽的元素必須有定位樣式 vue.directive drag function el,binding document.nm useup function 拓展...