VUEでカスタムディレクティブを作成する方法は？

VUEでカスタムディレクティブを作成して、DOMが直接操作されるシナリオを処理します。 1.カスタム命令は、入力ボックス、許可制御、動的スタイルなどに焦点を当てるなど、コンポーネント化が抽象化に良くないシナリオに適しています。 2。コンポーネントのディレクティブオプションを使用するローカル命令を定義し、マウントされたフックを使用してロジックを実装します。 3.命令ライフサイクルには、さまざまな段階で操作を実行するために使用されるbeforemount、beforeupdate、updated、upterated、unmounted、およびmountedが含まれます。 4.命令は、バインディング、Value、サポート文字列、オブジェクト、関数、その他のタイプを通じてパラメーターを受信し、柔軟な制御を実現できます。

VUEでカスタムディレクティブを作成することは難しくありませんが、多くの人は、カスタムディレクティブの強力な能力を無視して、最初はビルトインv-modelまたはv-showを使用する場合があります。コンポーネント化が抽象化に適していないシナリオの処理に適しており、入力ボックス、許可制御レンダリング、動的スタイルの変更など、DOMの直接操作が必要です。

独自のVueコマンドを段階的に書く方法を見てみましょう。

VUEカスタムディレクティブとは何ですか？

Vueの指令はv-で始まる特別な属性であり、その機能は一般に、DOM要素に何らかの動作またはデータバインディングを追加することです。 v-ifやv-showなどの公式情報に加えて、 directivesオプションを介して独自の指示を登録することもできます。

たとえば、ロード時にページを入力ボックスに自動的に集中させる場合は、 element.focus()手動で書き込むことなく、 v-focus命令を書くことができます。

基本的なカスタムディレクティブを定義する方法は？

単一のコンポーネントで定義されているローカル指示から始めることができます。使用方法は、コンポーネントオプションにdirectivesフィールドを含めることです。

デフォルトのエクスポート{
  指令：{
    集中： {
      マウント（el）{
        el.focus（）
      }
    }
  }
}

次に、次のようなテンプレートで使用します。

 <入力v-focus />

ここにmountedフックがあります。つまり、この要素がDOMに挿入された後にfocus()メソッドが実行されます。このステップは最も基本的なライティング方法であり、単純なニーズに適しています。

一般的なフック関数は何ですか？いつ使用する必要がありますか？

VUE指令にはいくつかのライフサイクルフックがあり、一般的なフックは次のとおりです。

• beforeMount ：バインディング要素の親コンポーネントがマウントされる前に呼び出されます。
• mounted ：結合要素がDOMに挿入されています。
• beforeUpdate ：コンポーネントを含むVNodeの前に呼び出されます。
• updated ：コンポーネントを含むVNodeとその子VNodeが更新された後に呼び出されます。
• beforeUnmount ：指令の前に呼び出された要素（VUE3の新規）からの請求がありません。
• unmounted ：指令が要素とバウンドされていない後に呼び出されます。

たとえば、データの変更を聞き、DOMスタイルを更新する場合は、 updatedを使用できます。イベントのリスナーやタイマーをクリーンアップしたい場合は、 beforeUnmountまたはunmountedことを行うことができます。

パラメーターと値を渡す方法は？

命令は、ブール値を受信するだけでなく、オブジェクト、文字列、数値、さらには関数を渡すこともできます。 binding.valueを介して合格した値を取得できます。

たとえば、権限に従って要素を表示/ヒデシスティンに表示するディレクティブを実装すると仮定します。

 app.directive（ 'can'、{
  取り付けられた（el、バインディング）{
    const userpermissions = ['edit'、 'delete'];
    if（！userpermissions.includes（binding.value））{
      el.parentnode.RemoveChild（el）;
    }
  }
}）

次に、次のように使用します。

 <button v-can = "&#39;edit&#39;">編集</button>

ユーザーに'edit'許可がない場合、ボタンは削除されます。もちろん、Vuexを組み合わせて現在のユーザー許可を取得するなど、実際のプロジェクトでは、より複雑なロジックが必要になる場合があります。

まとめ

カスタム命令は全能ではありませんが、特にDOM操作をコンポーネントロジックに組み合わせたくない場合は、特定のシナリオで非常に実用的です。

上記の状況は、開発で遭遇するニーズのほとんどをカバーしています。基本的にそれだけです。ライフサイクルとパラメーター伝送メカニズムを理解しており、残りは特定のビジネスに従って拡大することです。

以上がVUEでカスタムディレクティブを作成する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。