Vue.js ディレクティブのカスタム命令の詳細な説明

Vue.directive(id, 定義)

<div id="アプリ">
	<!-- 入力ボックスにフォーカスが当たります-->
	<input type="text" v-focus/>
</div>

<スクリプト>
	// グローバルカスタムディレクティブ v-focus を登録する
	Vue.directive("フォーカス", {
		// バインドされた要素が DOM に挿入されるとき。
		挿入(el, バインディング) {
			// 要素にフォーカス el.focus();
		}
	})
</スクリプト>

<div id="アプリ">
    <p v-demo:red="msg">{{msg}}</p>
</div>

<スクリプト>
	// グローバルディレクティブ Vue.directive('demo', function (el, binding) {
        console.log(el) //p タグ console.log(binding) //出力はオブジェクト obj です
        console.log('コマンド名:'+binding.name) //コマンド名console.log('コマンドバインディング値:'+binding.value) //コマンドバインディング値console.log('バインディング値の文字列形式:'+binding.expression) //バインディング値の文字列形式console.log('コマンドに渡されたパラメーター:'+binding.arg) //コマンドに渡されたパラメーター})
    var vm = 新しい Vue({
        el: "#app",
        データ： {
            メッセージ: 'こんにちは!'
        },
        // ローカルディレクティブ:{
			デモ：{
				挿入: 関数 (el) {
					コンソール.log(el)
				}      
			}
		}
    })
</スクリプト>

<div id="アプリ">
    <p v-demo="colours">{{colours.text}}</p>
</div>

<スクリプト>
    Vue.directive('demo', 関数(el, バインディング) {
        console.log(el) // pタグ console.log(binding) // 出力はオブジェクトobjです
        console.log(binding.value) // {color: 'blue',text: 'hello!'}
        console.log(binding.value.color) // '青'
        console.log(binding.value.text) // 'hello!'
        el.style = 'color:' + binding.value.color  
    })
    var vm = 新しい Vue({
        el: "#app",
        データ： {
            色：
                色: '青'、
                テキスト: 'こんにちは!'
            }
        }
    })
</スクリプト>

<div id="アプリ">
    <p v-demo="color">{{num}}</p>
    <button @click="add">追加</button>
    <button onclick='unbind()'>バインド解除</button>
</div>

<スクリプト>
    関数アンバインド() {
        vm.$destroy(); //バインドを解除する別のメソッドを開始します}
    Vue.directive('demo', { // ディレクティブを登録するための 5 つのフック関数 bind: function () { //1. バインドする // バインドの準備をします。たとえば、イベント リスナーや、一度だけ実行する必要があるその他の複雑な操作を追加します console.log('1 - bind');
        },
        挿入: function () { //2. ノードにバインド console.log('2 - 挿入');
        },
        update: function () { //3. コンポーネントの更新 // 取得した新しい値に基づいて対応する更新を実行します。初期値の場合、console.log('3 - update'); も 1 回呼び出されます。
        },
        componentUpdated: function () { //4. コンポーネントの更新が完了しました console.log('4 - componentUpdated');
        },
        unbind: function () { //5. Unbind//クリーンアップ操作を実行します。たとえば、bind によってバインドされたイベント リスナーを削除する場合は、console.log('5 - bind');
        }
    })
    var vm = 新しい Vue({
        el: "#app",
        データ： {
            番号: 10,
            色: 「赤」
        },
        メソッド: {
            追加: 関数 () {
                this.num++;
            }
        }
    })
</スクリプト>