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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: ウェブサイトのビジュアルデザイン(画像とテキスト)における情報伝達の役割と方法
MySQLテーブルパーティショニングプログラムを変更する方法1. サブテーブルの実装の原則は次のとお...
Docker 公式ドキュメント: https://docs.docker.com/ Docker は...
適切な設定を行うことで、Linux ユーザーにパスワードを定期的に変更させることができます。パスワー...
<link> タグは、現在のドキュメントと Web コレクション内の他のドキュメントとの...
背景レプリケーションはデータの完全なコピーです。レプリケーションが必要な理由として、まず思い浮かぶの...
序文起源は質問 1 です: umask が 022 に設定されている場合、作成するファイルのデフォル...
vue スキャフォールディング -> vue.cli大規模で完全に機能する Vue プロジェク...
目次序文1. Iceraven ブラウザ (Firefox) (Android) 2. (アンドロイ...
1. コンポーネントの実装方法:組件名稱首字母必須大寫1. JS関数を通じてコンポーネントを実装...
序文MRR は Multi-Range Read の略で、ランダム ディスク アクセスを削減し、ラン...
目次1. はじめに2. 切り替え1. 開発および本番環境の設定ファイルを追加する2. 複数の環境をサ...
まず、私の日常生活についてお話しします。MySQLの急速なアップデートにより、MySQLはバージョン...
<br />みなさんこんにちは!ここで皆さんとチャットできて光栄です! (*^__^*)...
目次1. 基本理論1.1 取引1.2 分散トランザクション2. 分散トランザクションソリューション2...
1. コマンドの紹介read コマンドは、シェルの組み込みコマンドで、標準入力または -u オプショ...