自定義指令

2022-09-21 04:15:13 字數 848 閱讀 9910

1註冊全域性指令

//

註冊乙個全域性自定義指令 `v-focus`

vue.directive('focus',

})

2註冊區域性指令

directives: 

}}

3使用4引數意義

1、鉤子

//只呼叫一次 指令第一次繫結到元素時觸發

bind(el, binding, vnode, oldvnode) {}

//被繫結元素插入到父節點時呼叫

inserted(el, binding, vnode, oldvnode) {}

//元件所在的vnode更新時觸發,

update(el, binding, vnode, oldvnode) {}

//指令所在元件的vnode及其子vnode 更新之後觸發

componentupdated(el, binding, vnode, oldvnode) {}

//只呼叫一次 指定與元素解綁時觸發

unbind(el, bingding, vnode, oldvnode) {}

2、引數

el 指的是所繫結的dom元素

el.dataset 指的是元素自定義的引數值,可以修改,可以用來和上面的鉤子函式之前傳遞資訊

bingding 是乙個物件

name: 去掉"v-"及字尾後的名稱

rawname: 自定義的全部名稱

express: 是個字串,展示指令繫結的值value

value: 指令繫結的值

arg: 傳給指令的引數,如果沒有傳給指令引數則不會出現此引數

自定義指令

像v if,v show等,是vue已經內建的指令,我們也可以使用directive來自定義指令 其中的blue要被引號所包裹,不然會被識別為變數來進行查詢全域性自定義指令 vue.directive focus vue.directive color var vm new vue 簡寫形式,代表我...

自定義指令

自定義指令有兩種方法 complieprovider.directive 指令名 function return restrict acem replace true,transclude true,template content return restrict acem replace true...

自定義指令

directives.js 存放 自定義標籤 strict require scope link 接收兩個引數 第乙個引數表示自定義指令的名稱 在頁面中使用 分隔單詞,在自定義指令中通過駝峰式命名 第二個引數表示自定義指令處理函式 返回值是乙個物件,用來描述我們自定義指令的 描述自定義指令的物件有一...