1. カスタム指示の登録以下の例はすべて、入力ボックスが自動的にフォーカスを取得するように実装するためのカスタム命令です。 1.1. グローバルカスタム指示vue2 では、グローバル カスタム ディレクティブは、 例1 : Vue2グローバルカスタム命令 Vue.directive('focus',{ 挿入:(el)=>{ el.フォーカス() } }) 例2 : Vue3グローバルカスタム命令 //グローバルカスタムディレクティブ app.directive('focus',{ マウントされた(el){ el.フォーカス() } }) //コンポーネントは <input type="text" v-focus /> を使用します 1.2. ローカルカスタム指示コンポーネントでは、 例3 : ローカルカスタム指示 <スクリプト> //ローカルカスタム命令 const defineDir = { 集中: マウントされた(el){ el.フォーカス() } } } エクスポートデフォルト{ ディレクティブ:defineDir、 設定(){} } </スクリプト> 2. カスタム命令のライフサイクルフック関数ディレクティブ定義オブジェクトは、次のフック関数を提供できます(すべてオプションで、必要に応じて導入されます)
例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) 戻る { 見せる、 ステータスの変更(){ 表示値 = !表示値 } } } } ボタンをクリックすると、 ただし、追加した ここで、 vue2からvue3ではカスタム命令のライフサイクルフック機能が変更になりました。具体的な変更点は以下の通りです。
3. カスタム命令フック関数のパラメータフック関数には次のパラメータが与えられます。
バインディングに含まれるプロパティは次のとおりです。
<テンプレート> <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データ、 } } } </スクリプト> カスタムディレクティブはいつ必要になりますか?
vue3 カスタム手順の詳細に関するこの記事はこれで終わりです。より関連性の高い vue3 カスタム手順については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: ウェブサイトのビジュアルデザイン(画像とテキスト)における情報伝達の役割と方法
どの DBMS でも、インデックスは最適化にとって最も重要な要素です。データ量が少ない場合、適切なイ...
この記事では、クラス抽選アプレットを実装するためのJavaScriptの具体的なコードを参考までに紹...
ここでは、あまり使われていない、または誤解されている 10 個の HTML タグを紹介します。あまり...
1. muttをインストールするsudo apt-get install mutt 2. msmtp...
<br />一部のWebサイトでアップロードする場合、「参照」ボタンをクリックすると[フ...
MySQL では通常、limit を使用してページ上のページング機能を完了しますが、データ量が大きな...
選択肢がある場合は、UTF-8を使用することをお勧めします。実際、Windows システム自体のプロ...
MacにMySQLデータベースをインストールし、環境変数を設定する手順を参考までに記録します。具体的...
1. Dockerの起動の問題:問題は解決しました: Hyper-V をオンにする必要があります (...
今日、Nginxを使っていたら500エラーが発生しました。エラーコードを検索してみんなに共有しました...
効果を直接確認するために、リロード、左を閉じる、右を閉じる、その他の機能を閉じるなどの右クリック メ...
操作効果コードの実装html <div id="ウォッチ"> <...
始める前に、これから紹介する JOIN タイプを示すために 2 つのテーブルを作成します。テーブルを...
1. コンポーネントをインストールする yum install epel-rpm-macros.no...
最近のビジネスでは、オンライン トレーニング システムが特定のオンライン プレビュー ページに対する...