VUE中的自定义指令钩子函数讲解

<template>
  <div class="container">
      <div class="row">
          <div class="col-xs-12">
           <!-局部这侧的组件->
              <app-test v-if="btn" :text="text"></app-test>
            <button @click="create">加载</button>
            <button @click="update">更新</button>
            <button @click="destory">关闭</button>
          </div>
      </div>
  </div>
</template>

<script>
    export default {
        data() {
            return {
                btn:true,
                text:'hello',
            }
        },
        components: {
            appTest: {
            // v-test 就是自定义指令  具体在main.js中看
                template: '<h1 v-test>{{text}}</h1>',
                props: {
                    text: String
                }
            }
        },
        methods: {
            //创建的方法
            create(){
                this.btn=true
            },
            //更新组件内容
            update(){
                this.text='hi'
            },
            //利用内部指令摧毁组件
            destory(){
                this.btn=false
            }
        },
    }
</script>

import Vue from 'vue'
import App from './App.vue'
//全局注册自定义指令  在每个钩子函数输出相应内容
//其中为了区分bind ,inserted 还相应输出元素的父节点
//为了区本update,componentUpdated 还想赢输出元素内容
Vue.directive('test', {
  bind: function (el) {
    console.log('bind');
    console.log(el.parentNode)
  },
  inserted: function (el) {
    console.log('inserted');
    console.log(el.parentNode)
  },
  update: function (el) {
    console.log('update')；
    console.log(el.innerHTML)
  },
  componentUpdated: function (el) {
    console.log('componentUpdated')
    console.log(el.innerHTML)
  },
  unbind: function (el) {
    console.log('unbind')
  }
})
new Vue({
  el: '#app',
  render: h => h(App)
})

bind
 null
 inserted
 <div class=​"col-xs-12">​…​</div>​

updata
hello
componentUpdated
hi

unbind

bind
 null
 inserted
 <div class=​"col-xs-12">​…​</div>​

Vue.directive('color-swatch', function (el, binding) {
    el.style.backgroundColor = binding.value
})