Vueカスタム命令の詳細な説明

Vueカスタムディレクティブ

カスタムディレクティブ

ページが読み込まれたときに要素にフォーカスを当てるために使用されるグローバルディレクティブv-focusを登録します。

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8">
		<タイトル></タイトル>
		<script src="../js/vue.js"></script>
	</head>
	<本文>
		<div id="アプリ">
			<v-fo を入力>
		</div>
		<スクリプト>
            // カスタムディレクティブを登録する Vue.directive('fo',{
				挿入:function(el){
                    // 要素にフォーカス el.focus()
				}
			})
			新しいVue({
				el: '#app'
			})
		</スクリプト>
	</本文>
</html>

画像-20211112151122161

インターフェースを開き、入力ボックスに直接カーソルを置きます

フック機能

ディレクティブ定義関数は、いくつかのフック関数 (オプション) を提供します。

bind : ディレクティブが最初に要素にバインドされるときに 1 回だけ呼び出されます。このフック関数は、バインド中に 1 回実行される初期化アクションを定義するために使用できます。
inserted : バインドされた要素が親ノードに挿入されたときに呼び出されます (親ノードが存在する場合に呼び出すことができますが、必ずしもドキュメント内にあるとは限りません)。
update : バインドされた値が変更されたかどうかに関係なく、バインドされた要素が配置されているテンプレートが更新されたときに呼び出されます。更新前後のバインディング値を比較することで、不要なテンプレートの更新を無視できます。
componentUpdated : バインドされた要素のテンプレートが更新サイクルを完了したときに呼び出されます。
unbind : ディレクティブが要素からアンバインドされたときに 1 回だけ呼び出されます。

フック関数のパラメータは主に以下のとおりです。

el : 命令がバインドされる要素。これを使用して DOM を直接操作できます。
binding : 以下のプロパティを含むオブジェクト
name : v- プレフィックスを除いたディレクティブの名前。
value : ディレクティブのバインディング値。たとえば、v-my-directive="1+1" の場合、値は 2 になります。
oldValue : ディレクティブにバインドされた以前の値。値が変更されたかどうかに関係なく、update フックと componentUpdated フックでのみ使用できます。
expression : バインディング値の式または変数名。たとえば、v-my-directive="1+1" の場合、式の値は "1+1" になります。
arg : ディレクティブに渡されるパラメータ。たとえば、v-my-directive:foo の場合、arg の値は "foo" です。
modifiers : 修飾子を含むオブジェクト。たとえば、 v-my-directive.foo.bar の場合、修飾子オブジェクト modifiers の値は {foo: true, bar: true} になります。
vnode : Vue コンパイルによって生成される仮想ノード。
oldVnode : 以前の仮想ノード。update フックと componentUpdated フックでのみ使用できます。

出力関連属性

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8">
		<タイトル></タイトル>
		<script src="../js/vue.js"></script>
	</head>
	<本文>
		<div id="app" v-hh:abc="mess">
		</div>
		<スクリプト>
			Vue.directive('hh',{
				バインド: 関数(el,binding,vnode){
					var s = JSON.stringify
					el.innerHTML = 'name:'+s(binding.name)+'<br>'+
					'値:'+s(binding.value)+'<br>'+
					'式:'+s(binding.expression)+'<br>'+
					'引数:'+s(binding.arg)+'<br>'+
					'修飾子:'+s(binding.modifiers)+'<br>'+
					'vnode キー:'+Object.keys(vnode).join(',')
				}
			})
			新しいVue({
				el:'#app',
				データ：{
					混乱:'abc'
				}
			})
		</スクリプト>
	</本文>
</html>

画像-20211112163153199

アプリケーション例

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8">
		<タイトル></タイトル>
		<script src="../js/vue.js"></script>
	</head>
	<本文>
		<div id="アプリ">
			<div v-hh="{text:'123',c:'blue'}"></div>
		</div>
		<スクリプト>
			Vue.directive('hh',function(el,binding){
				el.innerHTML=バインディング値テキスト
				el.style.color=バインディング値.c
			})
			新しいVue({
				el:'#app'
			})
		</スクリプト>
	</本文>
</html>

画像-20211112164831459