Vue的进阶属性

Directives(指令)

自定义指令

代码示例

import Vue from "vue";
import App from "./App.vue";
Vue.config.productionTip = false;
//声明一个全局指令
Vue.directive("y", {
  inserted(el) {
    el.addEventListener("click", function () {
      console.log("y");
    });
  }
});
new Vue({
  el: "#app",
  template: `
        <div v-y>Hello</div>
    `
});
//声明一个局部指令
new Vue({
	...,
	derectives:{
		"x":directiveOptions
	}
})

directiveOptions

• bind(el,info,vnode,oldVnode)-类似于created
• inserted(el,info,vnode,oldVnode)-类似于mounted
• update(el,info,vnode,oldVnode)-类似于updated
• componentUpdate(el,info,vnode,oldVnode)-用的不多
• unbind(el,info,vnode,oldVnode)-类似于destroyed
• 代码案例

import Vue from "vue";
import App from "./App.vue";
Vue.config.productionTip = false;
new Vue({
  directives: {
    on2: {
      bind(el, info) {
        el.addEventListener(info.arg, info.value);
      },
      unbind(el, info) {
        el.removeEventListener(info.arg, info.value);
      }
    }
  },
  template: `
    <button v-on2:click="hi">点我</button>
  `,
  methods: {
    hi() {
      console.log("hi");
    }
  }
}).$mount("#app");

指令的作用

1. 主要用于DOM操作
   1.1. Vue实例/组件用于数据绑定、事件监听、DOM更新
   1.2. Vue指令主要目的就是原生DOM操作
2. 减少重复
   2.1. 如果某个DOM操作经常使用，可封装为指令
   2.2. 如果某个DOM操作较为复杂，也可封装为指令

mixins(混入)【其实就是复制】

作用

• 减少data、methods、钩子的重复
• 代码示例
  mixins混入

extends(继承)

作用

• 减少data、methods、钩子的重复
• 比mixins更抽象的封装
• 实际工作中用的很少

provide(提供)和inject(注入)

作用

• 祖先提供东西，后代注入东西
• 大范围、隔N代共享信息

代码示例

引用网上的例子