Vue Directive Vue自定义指令：用于操作Dom

对普通 DOM 元素进行底层操作，这时候就会用到自定义指令

<template>
  <div class="about" v-book="200">
    <div v-xiaobu:aaaaaa="123"  v-read>
      <h1>This is an about page</h1>
    </div>
  </div>
</template>

Vue.directive('read', {
        
        inserted: (el,binding)=> {
           // do something
        },
        
    })

 

 Vue.directive('book', {
        
        inserted: (el,binding)=> {
          el.setAttribute(
            "style",
            `background:red`
          );

          el.style.position = 'fixed'
          el.style.top = binding.value+ 'px'
        },
        
      })

 

Vue.directive('xiaobu', {
        // 当被绑定的元素插入到 DOM 中时……
        inserted: function (el,binding) {
          el.setAttribute(
            "id",
            new Date().getTime()
          );
        
          console.log(binding.value) //123
          console.log(binding.arg)  //aaaaaa

        },
        bind:()=>{
           
        },
        update:()=>{

        },
        componentUpdated:()=>{

        },
        unbind:()=>{

        }
      })

动态指令参数