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の複合インデックス方式の詳細な説明

どの DBMS でも、インデックスは最適化にとって最も重要な要素です。データ量が少ない場合、適切なイ...

JavaScript はクラス宝くじアプレットを実装します

この記事では、クラス抽選アプレットを実装するためのJavaScriptの具体的なコードを参考までに紹...

あまり使われていない、または誤解されている HTML タグ 10 個

ここでは、あまり使われていない、または誤解されている 10 個の HTML タグを紹介します。あまり...

Raspberry Pi msmtp と mutt のインストールと設定のチュートリアル

1. muttをインストールするsudo apt-get install mutt 2. msmtp...

タイプファイルの入力ボタン機能の研究

<br />一部のWebサイトでアップロードする場合、「参照」ボタンをクリックすると[フ...

大きなオフセットによる MySQL 制限ページングが遅い理由と最適化ソリューション

MySQL では通常、limit を使用してページ上のページング機能を完了しますが、データ量が大きな...

Web ページのエンコーディングで gbk や gb2312 ではなく utf-8 が使用されるのはなぜですか?

選択肢がある場合は、UTF-8を使用することをお勧めします。実際、Windows システム自体のプロ...

MySQL 8.0.11 MacOS 10.13 のインストールと設定方法のグラフィックチュートリアル

MacにMySQLデータベースをインストールし、環境変数を設定する手順を参考までに記録します。具体的...

DockerとVMwareの競合を解決する

1. Dockerの起動の問題:問題は解決しました: Hyper-V をオンにする必要があります (...

Nginx 500 内部サーバーエラーの解決方法

今日、Nginxを使っていたら500エラーが発生しました。エラーコードを検索してみんなに共有しました...

Vueはマルチタブコンポーネントを実装します

効果を直接確認するために、リロード、左を閉じる、右を閉じる、その他の機能を閉じるなどの右クリック メ...

実行中の時計を実装するための純粋な CSS3 コード

操作効果コードの実装html <div id="ウォッチ"> <...

7つのMySQL JOINタイプのまとめ

始める前に、これから紹介する JOIN タイプを示すために 2 つのテーブルを作成します。テーブルを...

cobbler ベースの Linux システムを自動的にインストールする

1. コンポーネントをインストールする yum install epel-rpm-macros.no...

Vue ページ監視ユーザープレビュー時間機能実装コード

最近のビジネスでは、オンライン トレーニング システムが特定のオンライン プレビュー ページに対する...