vue 自定义指令

vue官网自定义指令 https://cn.vuejs.org/v2/guide/custom-directive.html

勉强展开 v-model，现在它只能在input上面工作

html片段

<div class="app">
    <input type="text" 
      v-our-model="msg"
      v-our-model-change="change"> {{msg}}
</div>

js片段

const format = console.log;

Vue.directive('our-model', {
  inserted(el, binding, vnode) {
    const bindv = binding.value // 指令绑定的值 ajanuw
    el.value = bindv;
  }
});

Vue.directive('our-model-change', {
  inserted(el, binding, vnode) {
    const binde = binding.expression // 获取指令绑定的函数名
    const ctx = vnode.context;

    let ov = el.value;
    el.oninput = e => {
      const nv = el.value;
      ctx[binde](nv, ov);// 返回新value 和旧的value
      ov = nv;
    }
  }
});


new Vue({
  data() {
    return {
      msg: 'ajanuw'
    }
  },
  methods: {
    change(nv, ov) {
      format(nv, ov)
    }
  }
}).$mount('.app')