Vue---自定义指令（二）

一：position定位元素：
HTML:

<input text="text" v-directivess="200+200" />

ecport default {
   
  directives: {
    directivess: {
      bind(el, binding) {
      },
      inserted(el, binding) {
      //el dom
        console.log(el);
        
        console.log(binding);
        el.style.position = "fixed";
        el.style.top = binding.value + "px";
      }
    }
  },
}

打印结果：

效果图
input使用定位元素 位置元素高于下面的图表

二：数据监听
HTML

<template>   
    //原始数据
    <div v-json="color">{{num}}</div>
    //监听后数据
    <div>{{nuberA}}</div>
    <p>
      <button @click="add">加一</button>
    </p>
    <p>
      <button @click="unbind">减一</button>
    </p>
</template> 

  export default {
    directives: {
        json: {
          bind(el, binding) {
            console.log("1-bind");
            el.style = "color:" + binding.value;
          },
          inserted(el, binding) {
            console.log("2-inserted");
          },
          update(el, binding) {
            //更新
            console.log(el)
            el.style.color = binding.value;
            console.log("3-update");
          },
          componentUpdated() {
            console.log("4-componentUpdated");
          },
          unbind() {
            console.log("5-unbind");
          }
        }
      },
  }
  methods: {
  //加一
    add() {
      this.num++;
      //点击一次颜色改变一次
      this.color = "#ccc";
    },
    //减一
    unbind() {
      this.num--;
      //点击一次颜色改变一次
      this.color = "blue";
    }
  },
  //数据监听
     computed: {
        nuberA() {
          return this.num;
        }
      },

  
  

点击效果前①

点击效果后②