Vue 2 0學習筆記 自定義指令

2021-08-15 03:53:54 字數 536 閱讀 9568

在vue中為了更好的操作dom元素,其內建了一些指令,比如v-model、v-if、v-show、v-text、v-html、v-for和v-bind等。除此之外,vue也允許註冊自定義指令

建立自定義指令,在vue中乙個指令定義物件可以提供下面幾個鉤子函式,而這幾個鉤子函式都是可選的:

bind:只呼叫一次,指令第一次繫結到元素時呼叫。在這裡可以進行一次性的初始化設定

inserted:被繫結元素插入父節點時呼叫(僅保證父節點存在,但不一定已被插入文件中)

update:所在元件的vnode更新時呼叫,但是可能發生在其子vnode更新之前。指令的值可能發生了改變,也可能沒有。但是你可以通過比較更新前後的值來忽略不必要的模板更新

componentupdated:指令所在元件的vnode及其子vnode全部更新後呼叫

unbind:只呼叫一次,指令與元素解綁時呼叫

在vue中通過vue.directive('directivename', )方式來註冊乙個指令。在實際呼叫的時候需要前面新增v-來使用

vue自定義指令筆記

在vue中,有時候我們會把抽象的方法封裝為乙個自定義指令,多個地方共用 比如 拖拽指令 1 mychart1 class mychart1 v drag 2 3 4 1 data 8 9directives else if e.clientx disx parentwidth odiv.offset...

Vue2 0自定義過濾器

先了解一下什麼是vue過濾器 vue在1.0中有許許多多的各種功能的過濾器 先建立乙個例項裡面寫上一些資料稍後使用 var vm new vue methods dom 結構中 幾個1.0中自帶的過濾器例子 limitby 迴圈陣列的時候顯示幾條資料,從那條 索引 開始顯示 filterby在所有的...

vue自定義指令學習

doctype html utf 8 x ua compatible content ie edge title description content viewport content width device width,initial scale 1 stylesheet href vue v...