vue 自定义指令

html模板

<template>
    <div class="block">
         <span>{{a}}</span>
        <button v-fool>{{userName}}</button>
    </div>

</template>

js

<script>
    export default {
        name:'FormContent',
        mounted(){
            this.checkFn()
        },
        data() {
              return {
                  a:"新增",
                userName:'11'
              }
            },
        methods: {
            checkFn:function(){
                 this.userName = "33";
                 this.a = "6";
                }
            },
        directives:{
             fool:{
                 bind:function(el){//指令启动时调用。即绑定到元素时候。用来执行初始化。
                  console.log(el.innerHTML)    //33
                 },
                 inserted:function(){//被绑定的元素插入到父节点时调用
                  // alert(2)
                 },
                 update:function(){//当被绑定元素所在的父节点更新时调用
                   //alert(3)
                 },
                 componentUpdated:function(){//当被绑定元素所在的父节点更新后调用
                 // alert(4)
                 }
             }
          }
             
        
      }
</script>