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

I. カスタム指定

1. Vue 2.0におけるコードの再利用と抽象化の主な形態はコンポーネントです。しかし、DOM要素に対してアンダーザフードの操作を行う必要がある場合もあります。
2. Vueインスタンス/コンポーネントは、データバインディング、イベントリスニング、DOM更新に使用されます。Vueディレクティブの主な目的は、ネイティブなDOM操作です。
3. ディレクティブの役割：繰り返しを減らす
   
   DOM 操作が頻繁に使われる場合は、ディレクティブとしてカプセル化することができます。
   
   DOM 操作が複雑な場合は、ディレクティブとしてカプセル化することができます。
   
   

コードサンプル

v-logコマンドを定義し、クリックして印刷します。

//html
<div id="app">
 <button v-log>クリックして印刷する</button>
</div>
<script src="https://..////../..js"></>
 
//js
//ローカルディレクティブの定義
const vm = new Vue({
 el: "#app",
 directives: {
 log: {
 // ディレクティブの定義
 inserted: function(el) {
 el.addEventListener("click", () => {
 console.log("y");
 });
 },
 unbind: function(el) {
 el.removeEventListener("click", () => {
 console.log("y");
 });
 },
 },
 },
});
//グローバルディレクティブの定義
//グローバルカスタムディレクティブを登録する`v-log`;
Vue.directive("log", {
 // バインドされた要素がDOMに挿入されたときに呼ばれる。
 inserted: function(el) {
 el.addEventListener("click", () => {
 console.log("y");
 });
 },
 unbind: function(el) {
 el.removeEventListener("click", () => {
 console.log("y");
 });
 },
});

フック関数

コマンド定義オブジェクトは、以下のようにいくつかのフック機能を提供することができます：

1. bind: 命令が初めて要素にバインドされるときに、一度だけ呼び出されます。一度だけの初期化設定が可能です。
2. inserted: バインドされた要素が親ノードに挿入されるときに呼び出されます。
3. update: コンポーネントのVNodeが更新されたときに呼び出されます。ディレクティブの値は変更されているかもしれませんし、変更されていないかもしれません。しかし、更新前後の値を比較することで、不要なテンプレート更新を無視することができます。
4. componentUpdated: ディレクティブが配置されているコンポーネントのVNodeとその子VNodeがすべて更新されたときに呼ばれます。
5. unbind: ディレクティブが要素から外れるときに一度だけ呼ばれます。