vue 自定义指令

 1、input中的v-focus自定义指令主要作用进入页面中获取input焦点；

2、div中v-demo为自定义指定，cur主要是看指令更新的，为动态更新时的值；

3、button中add事件为检测cur中的值变化，从而触发v-demo指令中的update方法中的变化；

4、button中unbind解除指令绑定，点击后绑定自定义指令的div中值不在有关联，在点击add页面中cur的值不会再变化；

<template>
  <div class="home">
    <input v-focus value="pink">
    <div id="hook-arguments-example" v-demo="message">{{cur}}</div>
    <button @click="add">Add</button>
    <button @click="unbind">解绑</button>
  </div>
</template>

5、如果想获得data中的数据或动态更改请详细查看bind、inserted、update、unbind几个方法中的vnode；

6、获取其他内容也好好参考bind、inserted、update、unbind中传回的参数，掌握好返回的参数就可以很自由的去做操作了。

<script>
export default {
  // el: '#hook-arguments-example',
  data() {
    return {
      message: "hello!",
      cur: 0,
      color:'red'
    };
  },
  methods: {
    add() {
      this.cur++;
      console.log(this.cur);
    },
    unbind() {
      this.$destroy();
    }
  },
  destroyed() {
    //离开组件执行
  },
  directives: {
    focus: {
      // 指令的定义.加载获取焦点
      inserted: function(el,binding, vnode) {
        // console.log(el);
        // console.log(binding);
        // console.log(vnode);
        vnode.context.color = vnode.data.attrs.value
        el.focus();
      }
    },
    demo: {
      bind: function(el, binding, vnode) {
        // console.log(vnode.context.color)
        el.style.color = vnode.context.color;
        // console.log(el);
        // console.log(binding);
        // console.log(vnode);
      },
      inserted: function(el, binding, vnode) {
        console.log(el);
        el.style.color = vnode.context.color;
      },
      update: function(el, binding, vnode) {
        console.log("update" + el);
         console.log(binding);
        console.log(vnode);
        // el.style.color = vnode.context.color;
      },
      unbind: function(e) {
        console.log(e);
      }
    }
  }
};
</script>