Vue之指令

Vue指令的钩子如下

 

bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。

inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。

update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。

componentUpdated:被绑定元素所在模板完成一次更新周期时调用。

unbind:只调用一次，指令与元素解绑时调用。

 

下面代码模拟 v-model

export default {
  bind(el, binding, vnode) {
    console.log(binding);
    el.value = binding.value;
    if (/\.async/.test(binding.rawName)) {
      el.onchange = handleFn;
    } else {
      el.oninput = handleFn;
    }
    function handleFn(e) {
      console.log(binding, e);
      vnode.context[binding.expression] = e.target.value;
    }
  },
  update(el, binding) {
    console.log(binding);
    el.value = binding.value;
  },
};

import mymodel from './mymodel';

Vue.directive('mymodel', mymodel);

var App = {
  template: '<div><input v-mymodel="name"></div>',
  data: { name: ' ' }
};

const app = new Vue({
  store: store,
  router: router,
  render: (h) => h(App),
});