快捷導(dǎo)航

Vue中的directive指令快速使用

更新時間：2022年10月18日 09:05:57 作者：小鐵匠95

這篇文章主要介紹了Vue中的directive指令快速使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

一、用法：注冊或獲取全局指令

Vue.directive(id,[definition])

除了核心功能默認內(nèi)置的指令 (v-model 和 v-show)，Vue 也允許注冊自定義指令。注意，在 Vue2.0 中，代碼復(fù)用和抽象的主要形式是組件。

然而，有的情況下，你仍然需要對普通 DOM 元素進行底層操作，這時候就會用到自定義指令。

二、鉤子函數(shù)

一個指令定義對象可以提供如下幾個鉤子函數(shù)(均為可選)：

bind:只調(diào)用一次，指令第一次綁定到元素時調(diào)用。在這里可以進行一次性的初始化設(shè)置。
inserted:被綁定元素插入父節(jié)點時調(diào)用(僅保證父節(jié)點存在，但不一定已被插入文檔中)。
update:所在組件的vNode更新時調(diào)用，但是可能發(fā)生在其子vNode更新之前。指令的值可能發(fā)生了改變，也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新。
componentUpdated:指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用。
unbind:只調(diào)用一次，指令與元素解綁時調(diào)用。

// 注冊
Vue.directive('my-directive',{
    bind:  function () {},         
    inserted: function () {},
    update: function () {},
    componentUpdated: function () {},
    unbind: function() {}
})

鉤子函數(shù)參數(shù):

使用property的自定義鉤子樣例：

<template>
  <div class="content">
    <div id="hook-arguments-example" v-demo:foo.a.b="message"></div>
  </div>
</template>  
<script>
export default {
  name: 'Content',
  data(){
    return{
      message: 'hello!'
    }
  },
  directives: {
    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(', ')
      }
    }
  }
}
</script>

頁面顯示：

三、快速使用-----獲取input框的焦點

1.全局指令

在main.js總注冊：

Vue.directive('focus',{
  // 當(dāng)綁定元素插入到 DOM 中
  inserted: function(el) {
    el.focus();
  }
})
new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

頁面引入：

<template>
  <div class="content">
    <input type="text" v-focus/>
  </div>
</template>

2.局部指令

<template>
  <div class="content">
    <input type="text" v-focus/>
  </div>
</template>  
<script>
export default {
  name: 'Content',
  directives: {
    focus: {
      // 指令的定義
      inserted: function(el) {
        el.focus();
      }
    }
  }
}
</script>

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: