カスタム命令の登録方法
v-focusオートフォーカスコマンドを登録します.
   
1.グローバル登録

Vue.directive("focus", {
        // Vue  html      
        //     ，                
        // inserted  ，            ，            
        inserted: function (el) {
          // el         el，             

          el.focus()
          // console.log(el);
        }
      })

2.ローカル登録
Vueインスタンスを作成するとき、パラメータオブジェクトにdirectivesプロパティを追加し、プロパティにコマンドを登録すればいいです.
グローバル登録すべてのvueインスタンスで使用可能
ローカル登録は、現在のvueインスタンスでのみ使用できます.

const vm = new Vue({
        el: "#app",
        data: {
          msg: "
hello world
"
        },
        directives: {
          focus: {
            inserted(el){
              el.focus();
            }
          }
        }
      });

カスタム命令のフック関数:

 directives: {
          focus: {

            //  vue                    
            bind(el){
              console.log("bind         ")
            },
            //                     ，      
            inserted(el){
              console.log("inserted         ")
              // el.focus();
            },
            //           ，       ，   update  
            update(el){
              console.log("update         ")
            },
            //        ，        ，   componentUpdated
            componentUpdated(el){
              console.log("componentUpdated         ")
            },
            //          
            unbind(el){
              console.log("unbind         ")
            }
          }
        }

 
カスタム命令のパラメータの説明:
命令の使用構文:
v-bind:src="msg"
v-on:click="clickHandler"
v-on:click.stop=""
命令の完全な書き方:
指令名称:指令パラメータ.修飾子=式
 
カスタム命令のフック関数では、現在の命令に関連するすべての情報を取得できます.
指令名称:指令パラメータ.修飾子=式

Vue.directive("focus", {
        bind(el, binding){
          console.log(el);
          console.log(binding);

          // binding                
          // name:            
          // rawName:  v       
          // expression:         
          // value:         
          // arg:                    
          // modifiers:       ，      ，                  ，    true
        }
      })

カスタムコマンドでv-textとv-htmlの機能をシミュレート

  
    
    
    
    
  
  
    


        

        

        
    
    
    

      Vue.directive("mytext", {
        bind(el, binding){
          //   ，   msg  ，        innerText  

          // msg  ： binding.value
          //     ： el
          el.innerText = binding.value;
        },
        update(el, binding){
          el.innerText = binding.value;
        }
      })

      Vue.directive("myhtml", {
        bind(el, binding){
          //   ，   msg  ，        innerText  

          // msg  ： binding.value
          //     ： el
          el.innerHTML = binding.value;
        },
        update(el, binding){
          el.innerHTML = binding.value;
        }
      })

      const vm = new Vue({
        el: "#app",
        data: {
          msg: "<h1>hello world</h1>"
        }
      });
    
  

自定义指令的简写形式：

Vue.directive("mytext", function(el, binding){
        el.innerText = binding.value;
      })

 
シミュレーションv-on命令:

//1. v-myon Vue.directive("myon", { bind(el, binding){ // ， = // ： el // ： binding.arg // ： binding.value // capture: binding.modifiers.capture // stop: binding.modifiers.stop // el.addEventListener( , , isCapture) // el.addEventListener( , , isCapture) // el.addEventListener(binding.arg, function(e){ // binding.value(e); // if(binding.modifiers.stop){ // e.stopPropagation(); // } // }) el.addEventListener(binding.arg, function(e){ binding.value(e) // if(binding.modifiers.stop){ // e.stopPropagation(); // } }, binding.modifiers.capture) } }) const vm = new Vue({ el: "#app", methods: { childClickHandler(){ alert(" ") }, parentClickHandler(){ alert(" ") } } })