VUE自定義指令鉤子函式講解

除了vue 內建指令外，vue也支援我們自定義註冊指令，分為區域性和全域性註冊 但這些想必大家都不陌生，其中官方api也是寫的明明白白 官方api點這裡

而且自定義指令也會極大程度上幫助我們日常的程式設計，但這是很有意思的事情出現了，就是鉤子函式，很多老鐵都弄不明白這五個函式的具體區別

="container"
>
="row"
>
="col-xs-12"
>
<
!-區域性這側的元件-
>if=
"btn"
:text
="text"
>
<
="create"
>載入<
/button>
="update"
>更新<
/button>
="destory"
>關閉<
/button>
<
/div>
<
/div>
<
/div>
<
/template>
export default },
components:}}
, methods:,/
/更新元件內容
update()
,//利用內部指令摧毀元件
destory()
},}<
/script>

import vue from 'vue'

//全域性註冊自定義指令 在每個鉤子函式輸出相應內容
//其中為了區分bind ,inserted 還相應輸出元素的父節點
//為了區本update,componentupdated 還想贏輸出元素內容
vue.
directive
('test',,
inserted: function (el)
, update: function (el)
, componentupdated: function (el)
, unbind: function (el)})
newvue
()

bind

null
inserted
​…​​

updata

hello
componentupdated
hi

unbind

bind

null
inserted
​…​​

這時我們應該可以弄明白鉤子函式

但其實大多數情況 我們只希望節點在載入和更新時發生同樣的事情，而忽略其它鉤子函式,可以這麼寫

vue

.directive
('color-swatch'
, function (el, binding)
)

Vue 自定義指令 鉤子函式

除了核心功能缺省內置的指令，vue也允許註冊自定義指令 頁面載入後，讓文字框自動獲取焦點，原生js做法是獲取文字框元素後呼叫focus 方法，但vue不建議手動操作dom元素，所以此時要自定義指令 這裡需要注意的是v on指令繫結focus事件的方式是實現不了上面需求的，區別就像onfocus和fo...

Vue自定義指令與鉤子函式

什麼是自定義指令？除了使用 vue 提供的內建指令之外，我們可以自定義一些自己的指令 什麼時候需要自定義指令？當需要不可避免的操作 dom 的時候，使用自定義指令來解決 如何註冊和使用自定義指令？一 註冊 1 全域性註冊，在任何元件中都可以使用全域性註冊自定義指令 2 區域性註冊，只能在當前元件使用...

自定義指令（鉤子函式）

自定義指令 指令是個函式 物件,用來操作dom的,裡面的this 返回window a 全域性 vue.directive 指令名不帶v 函式 el,binding el 使用指令的dom元素 binding 是個物件 含有傳入的 引數 binding.value b 區域性 定義在選項裡面 dir...