站長資訊網
        最全最豐富的資訊網站

        了解Vue中的自定義指令

        了解Vue中的自定義指令

          除了默認設置的核心指令( v-modelv-show ),Vue 也允許注冊自定義指令。在Vue里,代碼復用的主要形式和抽象是組件。然而,有的情況下,仍然需要對純 DOM 元素進行底層操作,這時候就會用到自定義指令。本文將詳細介紹Vue自定義指令

        指令注冊

          以一個input元素自動獲得焦點為例,當頁面加載時,使用autofocus可以讓元素將獲得焦點 。但是autofocus在移動版Safari上不工作。現在注冊一個使元素自動獲取焦點的指令

          指令注冊類似于組件注冊,包括全局指令和局部指令兩種

        【全局指令】

          使用Vue.diretive()來全局注冊指令

        // 注冊一個全局自定義指令 v-focusVue.directive('focus', {  // 當綁定元素插入到 DOM 中。   inserted: function (el) {    // 聚焦元素    el.focus()   } })

        【局部指令】

          也可以注冊局部指令,組件或Vue構造函數中接受一個 directives 的選項

        var vm = new Vue({   el: '#example',   directives:{     focus:{       inserted: function (el) {         el.focus()       }           }   }  })

          然后可以在模板中任何元素上使用新的 v-focus 屬性

        <p id="example">   <input v-focus></p>
        <script>// 注冊一個全局自定義指令 v-focusVue.directive('focus', {  // 當綁定元素插入到 DOM 中。  inserted: function (el) {    // 聚焦元素    el.focus()   } })var vm = new Vue({   el: '#example',  })</script>

        了解Vue中的自定義指令

        鉤子函數

          指令定義函數提供了幾個鉤子函數(可選)

        【bind】

          只調用一次,指令第一次綁定到元素時調用,用這個鉤子函數可以定義一個在綁定時執行一次的初始化動作

        【inserted】

          被綁定元素插入父節點時調用(父節點存在即可調用,不必存在于 document 中)

        【update】

          所在組件的 VNode 更新時調用,但是可能發生在其孩子的 VNode 更新之前。指令的值可能發生了改變也可能沒有。但是可以通過比較更新前后的值來忽略不必要的模板更新

        【componentUpdated】

          所在組件的 VNode 及其孩子的 VNode 全部更新時調用

        【unbind】

          只調用一次, 指令與元素解綁時調用

        鉤子函數參數

          鉤子函數被賦予了以下參數

        【el】

          指令所綁定的元素,可以用來直接操作 DOM

        【binding】

          一個對象,包含以下屬性:

        name: 指令名,不包括 v- 前綴。 value: 指令的綁定值, 例如: v-my-directive="1 + 1", value 的值是 2。 oldValue: 指令綁定的前一個值,僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。 expression: 綁定值的字符串形式。 例如 v-my-directive="1 + 1" , expression 的值是 "1 + 1"。 arg: 傳給指令的參數。例如 v-my-directive:foo, arg 的值是 "foo"。 modifiers: 一個包含修飾符的對象。 例如: v-my-directive.foo.bar, 修飾符對象 modifiers 的值是 { foo: true, bar: true }。

        【vnode】

          Vue 編譯生成的虛擬節點

        【oldVnode】

          上一個虛擬節點,僅在 updatecomponentUpdated 鉤子中可用

          [注意]除了 el 之外,其它參數都是只讀的,盡量不要修改他們。如果需要在鉤子之間共享數據,建議通過元素的 dataset 來進行

          下面是一個使用了這些參數的自定義鉤子樣例

        <p id="example" v-demo:foo.a.b="message"></p>
        <script>Vue.directive('demo', {   bind: function (el, binding, vnode) {    var s = JSON.stringify     el.innerHTML =       'name: '       + s(binding.name) + '<br>' +       'value: '      + s(binding.value) + '<br>' +       'expression: ' + s(binding.expression) + '<br>' +       'argument: '   + s(binding.arg) + '<br>' +       'modifiers: '  + s(binding.modifiers) + '<br>' +       'vnode keys: ' + Object.keys(vnode).join(', ')   } })new Vue({   el: '#example',   data: {     message: 'hello!'   } })</script>

        了解Vue中的自定義指令

        【函數簡寫】

           大多數情況下,可能想在bindupdate鉤子上做重復動作,并且不想關心其它的鉤子函數。可以這樣寫:

        Vue.directive('color-swatch', function (el, binding) {   el.style.backgroundColor = binding.value })

        【對象字面量】

          如果指令需要多個值,可以傳入一個JS對象字面量。指令函數能夠接受所有合法類型的JS表達式

        <p v-demo="{ color: 'white', text: 'hello!' }"></p>
        Vue.directive('demo', function (el, binding) {   console.log(binding.value.color) // => "white"   console.log(binding.value.text)  // => "hello!" })

        贊(0)
        分享到: 更多 (0)
        網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
        主站蜘蛛池模板: 国产99精品久久| 国产精品成人一区二区| 国产精品午夜国产小视频| 欧美精品hdvideosex4k| 国产精品视频一区二区三区不卡| 久久91精品综合国产首页| 精品一区二区久久| 日韩三级精品| 精品人体无码一区二区三区| 久久精品这里热有精品| 无码国模国产在线无码精品国产自在久国产 | 99精品高清视频一区二区| 亚洲国产精品13p| 99热成人精品热久久669| 热re99久久精品国99热| 国产精品.XX视频.XXTV| 无码人妻精品一区二区三区夜夜嗨| 精品一区二区三区免费 | 亚洲精品欧美二区三区中文字幕 | 伊人久久精品无码二区麻豆| 久久夜色精品国产亚洲av| 国产亚洲精品线观看动态图| 人妻熟妇乱又伦精品视频| 人妻无码久久精品| 蜜臀久久99精品久久久久久| 精品成人一区二区三区四区| 91精品国产福利在线导航| 久久精品午夜一区二区福利| 亚洲AV无码久久精品蜜桃| 亚洲精品午夜无码专区| 在线精品亚洲| 国产精品香蕉在线观看| 国产精品伦理久久久久久| 8x福利精品第一导航| 99久久99这里只有免费的精品| 亚洲精品色午夜无码专区日韩| 99久久婷婷国产综合精品草原| 久久99国内精品自在现线| 精品无码国产污污污免费网站国产 | 日韩人妻无码精品一专区| 亚洲AV永久纯肉无码精品动漫|