<
!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
"x-ua-compatible" content=
"ie=edge"
>
document<
/title>
"vue.js"
>
<
/script>
// 自定義指令的鉤子函式
// 1、bind:只呼叫一次事件
// 2、inserted:被繫結的元素插入到父類節點時呼叫
// 3、update:被繫結的元素模板裡更新時呼叫
// 4、compontupdated:被繫結的元素模板完成一次很小的週期時呼叫
// 5、unbind:只呼叫一次,在指令與元素解綁時呼叫
// vue.directive("run",
// })
// 引數屬性值
// el當前繫結自定義指令的標籤
// binding物件獲得標籤下的引數 例如:v-run:h.a.b="msg"
// (1)binding.name:指令名稱 例如:run
// (2)binding.value:獲得屬性裡的值 例如:hello
// (1)binding.expresion:被繫結屬性的名稱 例如:h
// (1)binding.arg:呼叫vue的變數名稱 例如msg
// (1)binding.modifiers:呼叫了屬性的名稱,返回乙個物件 例如:
window.
onload
=function()
})newvue(}
)}<
/script>
<
/head>
>
"msg"
>看看標籤裡的指令<
/h1>
<
/div>
<
/body>
<
/html>
自定義指令(鉤子函式)
自定義指令 指令是個函式 物件,用來操作dom的,裡面的this 返回window a 全域性 vue.directive 指令名不帶v 函式 el,binding el 使用指令的dom元素 binding 是個物件 含有傳入的 引數 binding.value b 區域性 定義在選項裡面 dir...
Vue 自定義指令 鉤子函式
除了核心功能缺省內置的指令,vue也允許註冊自定義指令 頁面載入後,讓文字框自動獲取焦點,原生js做法是獲取文字框元素後呼叫focus 方法,但vue不建議手動操作dom元素,所以此時要自定義指令 這裡需要注意的是v on指令繫結focus事件的方式是實現不了上面需求的,區別就像onfocus和fo...
VUE自定義指令鉤子函式講解
除了vue 內建指令外,vue也支援我們自定義註冊指令,分為區域性和全域性註冊 但這些想必大家都不陌生,其中官方api也是寫的明明白白 官方api點這裡 而且自定義指令也會極大程度上幫助我們日常的程式設計,但這是很有意思的事情出現了,就是鉤子函式,很多老鐵都弄不明白這五個函式的具體區別 contai...