Vue3 のディレクティブ機能: カスタム命令は Vue3 の機能を拡張します-Vue.js-php.cn

Vue3 のディレクティブ機能: カスタム命令は Vue3 の機能を拡張します

王林

リリース： 2023-06-18 17:40:37

オリジナル

3348 人が閲覧しました

Vue3 は Vue の最新バージョンであり、Vue2 と比較して多くの点でアップグレードおよび改良が加えられています。ディレクティブ機能は Vue3 の新機能で、命令をカスタマイズして Vue3 の機能を拡張することができます。

ディレクティブとは何ですか?

ディレクティブは、Vue によって提供される特別なコンポーネント属性であり、テンプレートに特定の動作を追加するために使用されます。ディレクティブは、要素を操作してその外観や動作を変更する AngularJS の一般的なディレクティブと考えることができます。たとえば、Vue で一般的な v-if、v-for、v-bind などはすべて命令です。

Vue3 の命令は関数に基づいています。これは、関数を使用してカスタム命令を作成できることを意味します。これらのディレクティブ関数は、アプリケーションが初期化される前に Vue と組み合わせる必要があり、要素、コンポーネント、または他の DOM ノードで使用できます。

命令関数の構文形式は次のとおりです。

const myDirective: Directive = {
  beforeMount(el, binding, vnode) {
    // ...
  },
  mounted(el, binding, vnode) {
    // ...
  },
  beforeUpdate(el, binding, vnode, prevVnode) {
    // ...
  },
  updated(el, binding, vnode, prevVnode) {
    // ...
  },
  beforeUnmount(el, binding, vnode) {
    // ...
  },
  unmounted(el, binding, vnode) {
    // ...
  }
}

ログイン後にコピー

命令関数は、オブジェクトを作成することによって定義されます。このオブジェクトには 6 つのメソッドがあり、マウント、更新、アンマウント時のコマンドのさまざまな段階を表します。各メソッドには、要素、バインディングオブジェクト、仮想ノードという 3 つのパラメータがあります。

上記のコードでは、各関数に 3 つのパラメーターがあることがわかります。

el (HTMLElement): 命令がバインドされる要素。 (例: v-myDirective ディレクティブを使用する場合、el はディレクティブがバインドされる要素です)
binding (DirectiveBinding): ディレクティブ情報を含むオブジェクト。 (例: 命令の名前、値、パラメータなどが含まれます)
vnode (VNode): Vue によって生成された仮想ノード。 (例: v-myDirective ディレクティブを使用する場合、vnode はディレクティブを含むコンポーネントまたは要素の仮想ノードです)

次に、カスタムディレクティブの作成方法を見てみましょう。

カスタムディレクティブを作成する

カスタムディレクティブを作成するには、Vue が提供するディレクティブ関数を使用する必要があります:

import { Directive } from 'vue'

const myDirective: Directive = {
  beforeMount(el, binding, vnode) {
    // ...
  }
}

Vue.directive('my-directive', myDirective)

ログイン後にコピー

この例では、ディレクティブを使用します。関数を使用して、my-directive という名前のカスタムディレクティブを作成し、ディレクティブの定義を関数に渡します。この例では、beforeMount フックのみを定義しました。これは、この命令関数が Vue インスタンスのマウントプロセス中に呼び出されることを意味します。ニーズに応じてフック機能を選択できます。

カスタムディレクティブの使用

カスタムディレクティブを定義したら、それを Vue テンプレートで使用できます。特定の HTML 属性を使用してディレクティブをバインドできます。Vue では、この属性は v- プレフィックスで始まります。例:

<div v-my-directive>这是一个自定义指令</div>

ログイン後にコピー

この例では、v-my-directive を使用してカスタムディレクティブを <div> 要素にバインドします。 Vue インスタンスが要素をマウントすると、beforeMount フックが呼び出されます。

概要

Vue3 では命令は関数ベースの API となり、カスタム命令はディレクティブ関数を使用して作成されます。カスタムディレクティブを要素、コンポーネント、またはその他の DOM ノードで使用して、Vue の機能を拡張できます。

命令関数には 6 つのライフサイクルフックがあり、命令のさまざまな状態にマップされます。開発者は、適切なフック関数の使用を選択して、特定の段階で操作を実行できます。

ディレクティブの主な目的は DOM 操作とインタラクティブな動作を実装することですが、カスタムディレクティブを使用すると、開発者は特定の動作をディレクティブに簡単にカプセル化し、テンプレート内のディレクティブを呼び出すだけでそれらを実装できます。これらの動作によりコードが作成されます。より簡潔になり、保守と拡張が容易になります。

以上がVue3 のディレクティブ機能: カスタム命令は Vue3 の機能を拡張しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。