Vue カスタム命令の学習と理解 (コード例)

この記事の内容は、Vue のカスタム命令 (コード例) の学習と理解に関するものです。必要な方は参考にしていただければ幸いです。

最近最終デザインを完成させたので、シーンを実装する必要がありました。領域をクリックすると、編集領域が表示されます。ページ上の他の場所をクリックすると、編集領域が非表示になります。以前のモーダルボックスのように、方法を探していたときに、vue 関連のものを使用してこの問題をエレガントに解決してみようと突然思いつき、次のカスタム命令を学びました。

1 Vue カスタム手順

1.1 定義

公式 Web サイトの紹介文を見てください (公式ドキュメントは非常に明確だと思いますので、基本的にそれらはすべて彼からコピーしたものです）。

コア関数のデフォルトの組み込みディレクティブ (v-model および v-show) に加えて、Vue ではカスタム ディレクティブの登録も可能です。 Vue2.0 では、コードの再利用と抽象化の主な形式はコンポーネントであることに注意してください。ただし、場合によっては、通常の DOM 要素に対して低レベルの操作を実行する必要がある場合もあり、その場合にはカスタム ディレクティブが使用されます。

1.2 基本的な実装

これは 2 つの状況に分けられます。グローバル カスタム コンポーネントを定義する場合は、プロジェクト内の main.js で定義します。たとえば、公式 Web サイトを定義します。フォーカス命令

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

特定のコンポーネント内で使用するローカル命令を定義したいだけの場合は、対応するコンポーネントで定義します

// 跟 data(),methods:{} 那些同级写了
directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

定義が完了したら、問題なく使用できるようになります。 it

<input v-focus>

1.2 フック関数

もちろん、このカスタム命令は、いくつかの実際のシナリオを解決するために、単なる小さなものではありません。私たちの汚いトリックのいくつかを実装してください。詳細は次のとおりです (すべてオプション):

bind: 命令が初めて要素にバインドされるときに 1 回だけ呼び出されます。ここではワンタイムの初期化設定を行うことができます。

inserted: バインドされた要素が親ノードに挿入されるときに呼び出されます (親ノードのみが存在することが保証されますが、必ずしもドキュメントに挿入されるわけではありません)。

update: コンポーネントの VNode が更新されるときに呼び出されますが、その子 VNode が更新される前に発生する場合もあります。ディレクティブの値は変更されている場合もあれば、変更されていない場合もあります。ただし、更新前後の値を比較することで、不要なテンプレートの更新を無視できます (フック関数のパラメーターの詳細については以下を参照してください)。

componentUpdated: 命令が配置されているコンポーネントのすべての VNode とそのサブ VNode が更新された後に呼び出されます。

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

次に、フック関数のパラメータ (el、binding、vnode、oldVnode) を見てみましょう。

もちろん、このフック関数を有効に活用するには、次のパラメータの使用方法を知っておく必要があります。

1.3 フック関数のパラメータ

コマンド フック関数次のパラメータで渡されます。 ：

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

binding: 次のプロパティを含むオブジェクト:

name: v- プレフィックスを除いた命令名。

value: ディレクティブのバインディング値。例: - v-my-directive="1 1"、バインディング値は 2 です。

oldValue: 命令バインディングの以前の値。update フックとcomponentUpdated フックでのみ使用できます。値が変更されているかどうかに関係なく使用できます。

expression: 文字列形式の命令式。たとえば、v-my-directive="1 1" の場合、式は「1 1」になります。

arg: コマンドに渡されるパラメータ (オプション)。たとえば、v-my-directive:foo の場合、パラメーターは「foo」です。

modifiers: モディファイアを含むオブジェクト。例: v-my-directive.foo.bar では、修飾子オブジェクトは { - foo: true, bar: true } です。

vnode: Vue のコンパイルによって生成された仮想ノード。詳細については、VNode API に移動してください。

oldVnode: 以前の仮想ノード。update フックとcomponentUpdated フックでのみ使用できます。

その後、公式 Web サイトには次のようなことが書かれています。

el を除き、他のすべてのパラメータは読み取り専用であり、変更してはなりません。フック間でデータを共有する必要がある場合は、要素のデータセットを通じて行うことをお勧めします。

それでは、以下に簡単な例を挙げてみましょう

// 在组件内部定义一个局部指令
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(', ')}`
    }
  }
}
 // 绑定到组件中的一个 div 中
<div v-demo:foo.a.b="message"></div>

そうすると、Web ページ上にこのような大量のテキストが表示されます (もちろん、以下のコメントは私が書いたものです)

name: "demo" 
// 指定名称
value: "Welcome to Your Vue.js App" 
// 指令绑定值
expression: "message" 
// 字符串形式的指令表达式
argument: "foo" 
// 传给指令的参数
modifiers: {"a":true,"b":true} 
// 修饰符的对象
vnode keys: tag, data, children, text, elm, ns, context, fnContext, fnOptions, fnScopeId, key, componentOptions, componentInstance, parent, raw, isStatic, isRootInsert, isComment, isCloned, isOnce, asyncFactory, asyncMeta, isAsyncPlaceholder
// Vue 编译生成的虚拟节点

1.4 関数省略形

多くの場合、他のフックを気にせずに、バインドと更新中に同じ動作をトリガーしたい場合があります。たとえば、次のように記述します。

colorSwatch: function colorSwitch(el, binding) {
  el.style.backgroundColor = binding.value
},

1.5 オブジェクト リテラル

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

リーリーリー

以上がVue カスタム命令の学習と理解 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。