ホームページ >ウェブフロントエンド >jsチュートリアル >Vueカスタム命令と命令定義関数(コード)の詳細分析

Vueカスタム命令と命令定義関数(コード)の詳細分析

不言オリジナル: 2018-07-21 16:09:362081ブラウズ

Vue のカスタム命令はグローバルまたはローカルに定義できます。Vue コンポーネントは HTML とコードの再利用ですが、Vue の命令は DOM の拡張された再利用です。Vue のカスタム命令の分析を詳しく見てみましょう。

1. Vue カスタム命令: Vue.directive(id,diction) を使用してグローバルカスタム命令を登録し、コンポーネントのディレクティブオプションを使用してローカルカスタム命令を登録します。

2. Vue フック関数:

命令定義関数はいくつかのフック関数を提供します (オプション):

bind: 命令が初めて要素にバインドされたときに呼び出され、このフック関数を使用して定義します。 a バインド中に 1 回実行される初期化アクション。

inserted: バインドされた要素が親ノードに挿入されるときに呼び出されます (親ノードが存在する限り呼び出され、ドキュメント内に存在する必要はありません)。

update: バインド直後に初めて呼び出されるとき、取得されるパラメーターはバインディングの初期値であり、バインド値が変更されるかどうかに関係なく、バインドされた要素が配置されているテンプレートが更新されたときに後で呼び出されます。更新前後のバインディング値を比較することで、不要なテンプレートの更新を無視することができます（フック関数のパラメータの詳細については下記を参照）。

componentUpdated: バインドされた要素が配置されているテンプレートが更新サイクルを完了すると呼び出されます。

unbind: 命令が要素からバインドされていないときに呼び出され、1 回だけ呼び出されます。

3. Vueフック関数のパラメータ: (el, binding, vnode, oldVnode)

el: 命令によってバインドされた要素を使用して、DOMを直接操作できます。

binding: 次の属性を含むオブジェクト

name: v- プレフィックスを除く命令名;

value: 命令のバインディング値 (例: v-my-directive="1+1") value 値は 2 です。

oldValue: 命令によってバインドされた前の値。値が変更されるかどうかに関係なく使用できます。

式: バインドされた値の文字列形式。 v-my -directive="1+1"、expression の値は '1+1' です。

arg: 命令に渡されるパラメーター。例: v-my-directive:foo、arg の値は ' foo';

modifiers : 修飾子を含むオブジェクト。例: v-my-directive.a.b、修飾子の値は {'a':true,'b':true} です。

vnode: によって生成される仮想ノードVue コンパイル;

oldVnode: 最後の仮想ノードは、update フック関数とcomponentUpdated フック関数でのみ使用できます。

<p id="app" v-demo:foo.a.b="message"></p>

Vue.directive(&#39;demo&#39;, {
  bind: function (el, binding, vnode) {
      console.log(&#39;bind&#39;);
    var s = JSON.stringify
    el.innerHTML =
      &#39;name: &#39;       + s(binding.name) + &#39;<br>&#39; +
      &#39;value: &#39;      + s(binding.value) + &#39;<br>&#39; +
      &#39;expression: &#39; + s(binding.expression) + &#39;<br>&#39; +
      &#39;argument: &#39;   + s(binding.arg) + &#39;<br>&#39; +
      &#39;modifiers: &#39;  + s(binding.modifiers) + &#39;<br>&#39; +
      &#39;vnode keys: &#39; + Object.keys(vnode).join(&#39;, &#39;)
  }
});
new Vue({
  el: &#39;#app&#39;,
  data: {
    message: &#39;hello!&#39;
  }
});

4. 関数の省略形: ほとんどの場合、バインドフックと更新フックで繰り返しアクションを実行する必要があり、他のフック関数については気にしたくありません。次のように記述できます:

Vue.directive(&#39;color-swatch&#39;, function (el, binding) {
  el.style.backgroundColor = binding.value
})

5. オブジェクトリテラル: 命令に複数の値が必要な場合は、JavaScript オブジェクトリテラルを渡すことができます。ディレクティブ関数は、すべての正当な種類の JavaScript 式を受け入れることに注意してください。

<p v-demo="{ color: &#39;white&#39;, text: &#39;hello!&#39; }"></p>

Vue.directive(&#39;demo&#39;, function (el, binding) {
  console.log(binding.value.color) // => "white"
  console.log(binding.value.text)  // => "hello!"
})

分析例:

<p id="app">
    <my-comp v-if="msg" :msg="msg"></my-comp>
    <button @click="update">更新</button>
    <button @click="uninstall">卸载</button>
    <button @click="install">安装</button>
</p>
<script type="text/javascript">
    Vue.directive(&#39;hello&#39;, {
        bind: function (el){
            console.log(&#39;bind&#39;);
        },
        inserted: function (el){
            console.log(&#39;inserted&#39;);
        },
        update: function (el){
            console.log(&#39;update&#39;);
        },
        componentUpdated: function (el){
            console.log(&#39;componentUpdated&#39;);
        },
        unbind: function (el){
            console.log(&#39;unbind&#39;);
        }
    });

    var myComp = {
        template: &#39;<h1 v-hello>{{msg}}</h1>&#39;,
        props: {
            msg: String
        }
    }

    new Vue({
        el: &#39;#app&#39;,
        data: {
            msg: &#39;Hello&#39;
        },
        components: {
            myComp: myComp
        },
        methods: {
            update: function (){
                this.msg = &#39;Hi&#39;;
            },
            uninstall: function (){
                this.msg = &#39;&#39;;
            },
            install: function (){
                this.msg = &#39;Hello&#39;;
            }
        }
    })
</script>

a、ページのロード時: バインド挿入

b、コンポーネント更新: コンポーネント更新更新

c、コンポーネントのアンインストール: アンバインド

d、コンポーネントの再インストール: バインド挿入

違いに注意してください: bind および挿入: バインド時には親ノードは null、挿入時には親ノードが存在します。update およびcomponentUpdated: update はデータが更新される前、componentUpdated はデータが更新された後です。

6. 最後に、実際に開発した命令カプセル化実装

基本的な考え方

import store from &#39;@/store&#39;

export default {
  inserted(el, binding, vnode) {
    const { value } = binding
    const roles = store.state.permission.pagePermission
    if (value && typeof value === &#39;string&#39; && value.length > 0) {
      const hasPermission = roles.some(role => {
        return role.permission == value
      })
      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error(`need roles! Like v-permission="&#39;button&#39;"`)
    }
  }
}

API を外部に公開する

import permission from &#39;./permission&#39;

const install = function(Vue) {
  Vue.directive(&#39;permission&#39;, permission)
}

if (window.Vue) {
  window[&#39;permission&#39;] = permission
  Vue.use(install) // eslint-disable-line
}

permission.install = install
export default permission

Vueカスタム命令と命令定義関数(コード)の詳細分析

関連記事