vue3 カスタムディレクティブの詳細

vue3 カスタムディレクティブの詳細

1. カスタム指示の登録

以下の例はすべて、入力ボックスが自動的にフォーカスを取得するように実装するためのカスタム命令です。

1.1. グローバルカスタム指示

vue2 では、グローバル カスタム ディレクティブは、 Vue.directive('name',opt)を使用して、 directiveを通じて Vue オブジェクトにマウントされます。

例1 : Vue2グローバルカスタム命令

Vue.directive('focus',{

 挿入:(el)=>{

  el.フォーカス()

 }

})

inserted 、バインドされた要素が親ノードに挿入されるときに実行されるフック関数です。

vue3では、 createAppを通じて vue インスタンスが作成されるため、グローバルカスタムディレクティブのマウント方法も変更され、 directiveがアプリにマウントされるようになりました。

例2 : Vue3グローバルカスタム命令

//グローバルカスタムディレクティブ app.directive('focus',{

 マウントされた(el){

  el.フォーカス()

 }

})

//コンポーネントは <input type="text" v-focus /> を使用します



 

1.2. ローカルカスタム指示

コンポーネントでは、 directivesを使用してローカル カスタム ディレクティブを導入します。 Vue2Vue3で導入されたカスタム ディレクティブはまったく同じです。

例3 : ローカルカスタム指示

<スクリプト>

//ローカルカスタム命令 const defineDir = {

 集中:

  マウントされた(el){

   el.フォーカス()

  }

 }

}

エクスポートデフォルト{

 ディレクティブ:defineDir、

 設定(){}

}

</スクリプト>

2. カスタム命令のライフサイクルフック関数

ディレクティブ定義オブジェクトは、次のフック関数を提供できます(すべてオプションで、必要に応じて導入されます)

  • created : バインドされた要素属性またはイベント リスナーが適用される前に呼び出されます。これは、通常の v-on イベント リスナーの前に呼び出す必要があるイベント リスナーをディレクティブでアタッチする必要がある場合に便利です。
  • beforeMounted : ディレクティブが最初に要素にバインドされ、親コンポーネントがマウントされる前に実行されます。
  • mounted : バインドされた要素の親コンポーネントがマウントされた後に呼び出されます。
  • beforeUpdate : コンポーネントを含む VNode が更新される前に呼び出されます。
  • updated : 包含コンポーネントの VNode とそのサブコンポーネントの VNode が更新された後に呼び出されます。
  • beforeUnmounted : バインドされた要素の親コンポーネントがアンマウントされる前に呼び出されます
  • unmounted : ディレクティブが要素からアンバインドされ、親コンポーネントがアンマウントされたときに 1 回だけ呼び出されます。

例3 : 命令内のライフサイクル関数の実行をテストする

<テンプレート>

 <div>

  <input type="text" v-focus v-if="show"><br>

  <button @click="changStatus">{{show?'非表示':'表示'}}</button>

 </div>

</テンプレート>

 

//ローカルカスタム命令 const autoFocus = {

 集中:

  作成された(){

   console.log('作成されました');

  },

  マウント前(){

   console.log('マウント前');

  },

  マウントされた(el){

   console.log('マウントされました');

  },

  更新前(){

   コンソールログ('beforeUpdated')

  },

  更新されました(){

   console.log('更新されました');

  },

  アンマウント前(){

   console.log('アンマウント前');

  },

  アンマウント(){

   console.log('マウント解除されました');

  }

 },

}

'vue' から { ref } をインポートします

エクスポートデフォルト{

 ディレクティブ:autoFocus、

 設定(){

  定数 show = ref(true)

  戻る {

   見せる、

   ステータスの変更(){

    表示値 = !表示値

   }

  }

 }

}

 

ボタンをクリックすると、 input要素が作成されると、 createdbeforeMount 、およびmountedの 3 つのフック関数がトリガーされることがわかります。

input要素が非表示の場合、 beforeUnmountunmountedトリガーされます。

ただし、追加したbeforeUpdateupdated関数は実行されませんでした。

ここで、 input要素のv-if v-showに変更すると、上記2つのメソッドが実行されます。具体的な実行状況はご自身で確認することができます。

vue2からvue3ではカスタム命令のライフサイクルフック機能が変更になりました。具体的な変更点は以下の通りです。

  • bind関数はbeforeMountedに置き換えられました。
  • update削除されました。
  • componentUpdated updatedに置き換えられました。
  • unbind unmountedに置き換えられました。
  • insertedが削除されました。

3. カスタム命令フック関数のパラメータ

フック関数には次のパラメータが与えられます。

  • el : 命令がバインドされ、 DOMを直接操作できる要素。
  • binding : ディレクティブのすべての情報を含むオブジェクトです。

バインディングに含まれるプロパティは次のとおりです。

  • argはカスタム命令のパラメータ名です。
  • value カスタムディレクティブにバインドされたvalue
  • oldValueディレクティブがバインドされていた以前の値。
  • dirフック関数が実行されました
  • modifiers : 修飾子を含むオブジェクト。

<テンプレート>

 <div>

  <div v-fixed >配置</div>

 </div>

</テンプレート>

 

<スクリプト>

//カスタム命令の動的パラメータ const autoFocus = {

 修理済み:

  beforeMount(el,binding){

   コンソールログ('el',el)

   console.log('binding',binding)

  }

 }

}

エクスポートデフォルト{

 ディレクティブ:autoFocus、

 設定(){

 }

}

</スクリプト>

4. カスタムコマンドパラメータ

カスタム命令にはパラメータも設定でき、コンポーネント インスタンス データに基づいて動的にリアルタイムで更新できます。

例4 : 命令の動的パラメータのカスタマイズ

<テンプレート>

 <div>

  <div v-fixed:pos="posData" style="width:100px;height:100px;background:grey">配置</div>

 </div>

</テンプレート>

<スクリプト>

//カスタム命令の動的パラメータ const autoFocus = {

 修理済み:

  beforeMount(el,binding){

   el.style.position = "固定"

   el.style.left = binding.value.left+'px'

   el.style.top = binding.value.top + 'px'

  }

 }

}

エクスポートデフォルト{

 ディレクティブ:autoFocus、

 設定(){

  定数posData = {

   残り:20,

   トップ:200

  }

  戻る {

   posデータ、

  }

 }

}

</スクリプト>

カスタムディレクティブはいつ必要になりますか?

  • 通常の DOM 要素に対して低レベルの操作を実行する必要があり、このときにカスタム命令が使用されます。
  • 一部の機能は特定の DOM 要素に対して使用する必要がありますが、多数の DOM 要素を操作したり、大幅な変更を加えたりする必要がある場合は、ディレクティブではなくコンポーネントを使用することをお勧めします。

vue3 カスタム手順の詳細に関するこの記事はこれで終わりです。より関連性の高い vue3 カスタム手順については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue2.x および Vue3.x のカスタム命令の使用方法とフック関数の原理を理解する
  • Vueソースコード学習callHookフック関数の詳しい説明
  • Vue3.0 カスタム命令(命令)知識の要約
  • vue3 でのカスタムフック関数の使用

<<:  HTML埋め込みタグの使用方法と属性の詳細な説明

>>:  ウェブサイトのビジュアルデザイン(画像とテキスト)における情報伝達の役割と方法

推薦する

MySQLテーブルパーティショニングプログラムを変更する方法

MySQLテーブルパーティショニングプログラムを変更する方法1. サブテーブルの実装の原則は次のとお...

Nuxt.jsプロジェクトのDockerデプロイメントの実装

Docker 公式ドキュメント: https://docs.docker.com/ Docker は...

Linux でパスワードの有効期限を表示および設定する方法

適切な設定を行うことで、Linux ユーザーにパスワードを定期的に変更させることができます。パスワー...

HTMLリンクタグのrel属性

<link> タグは、現在のドキュメントと Web コレクション内の他のドキュメントとの...

MySQL レプリケーション メカニズムの原理の説明

背景レプリケーションはデータの完全なコピーです。レプリケーションが必要な理由として、まず思い浮かぶの...

新しい Linux ファイル権限設定における umask の詳細な理解

序文起源は質問 1 です: umask が 022 に設定されている場合、作成するファイルのデフォル...

Vue スキャフォールディング プロジェクトを作成するための詳細な手順

vue スキャフォールディング -> vue.cli大規模で完全に機能する Vue プロジェク...

携帯電話に GreasyFork js スクリプトをインストールするチュートリアル

目次序文1. Iceraven ブラウザ (Firefox) (Android) 2. (アンドロイ...

React Stateの状態とライフサイクルの実装方法

1. コンポーネントの実装方法:組件名稱首字母必須大寫1. JS関数を通じてコン​​ポーネントを実装...

MySQL InnoDB MRR 最適化ガイド

序文MRR は Multi-Range Read の略で、ランダム ディスク アクセスを削減し、ラン...

Vue3 Vue CLI マルチ環境設定

目次1. はじめに2. 切り替え1. 開発および本番環境の設定ファイルを追加する2. 複数の環境をサ...

mysql8.0.11 winx64 手動インストールと設定チュートリアル

まず、私の日常生活についてお話しします。MySQLの急速なアップデートにより、MySQLはバージョン...

ウェブデザインの仕事に応募する方法

<br />みなさんこんにちは!ここで皆さんとチャットできて光栄です! (*^__^*)...

MySQL と Golan 間の従来の分散トランザクションのための 7 つのソリューション

目次1. 基本理論1.1 取引1.2 分散トランザクション2. 分散トランザクションソリューション2...

Linuxの読み取りコマンドの使用

1. コマンドの紹介read コマンドは、シェルの組み込みコマンドで、標準入力または -u オプショ...