Vue高级构造属性
1Directive自定义指令在Vue框架下的代码中，很少用到原生DOM操作，因为原生DOM操作在Vue中被封装成指令，比如我们前面看到的
指令，其实它的内部操作是：div.innerText=xxx;//当然这里的div是获取到的DOM元素Vue将原生的DOM操作封装成指令，哪个元素要使用这条指令，在HTML模板中作为元素标签中的属性即可，方便引入并减少重复。但是毕竟Vue不可能把所有的DOM操作都提前考虑好，封装成相应的指令。有些DOM操作在实际使用时开发人员必须知道。因此，Vue提供了用户自定义指令的方式，大致分为以下两种：自定义指令类似于自定义组件，也分为全局和局部。下面是一个自定义命令v-y打印字符y的例子：全局命令的全局属性注册在Vue提供的特定函数中：Vue.directive("y",{inserted:function(el){el.addEventListener("click",()=>console.log("y"));}});局部指令只能在指令的定义中使用模板可以是完整版的模板属性main.jsnewVue({template:`
`,指令：{'y':{inserted:function(el){el.addEventListener("click",()=>console.log("y"));}}}}).$mount("#app");或app.vue
click
指令选项指令对象中有5个函数属性{bind:function(el,info,vnode,oldVnode){},//当元素在内存中创建时执行inserted:function(参数同上){},//当执行时元素插入页面update:function(参数同上){},componentUpdated:function(参数同上){},unbind:function(参数同上){}//当元素消失时执行}参数当中function属性中，el指的是调用command的元素，info包含了所有的信息，需要的时候可以在info中找到codebox-1codebox-2codebox-32。mixinmixin的主要目的是减少构造选项的重复，可以将重复的构造选项提取出来放到一个单独的*.js文件中，然后使用import导入，然后通过建设选项。是智能混音，会根据添加的混音和当前选项进行智能混音，而不是简单的复制。codebox-minin3Extends继承类似于minxin的功能，但是extend更加抽象。它们都简化了构造选项的重复。extend可以在原有Vueshell的基础上添加自己的定义属性作为固定属性，然后在创建Vue对象的时候，创建一个继承Vue的自定义类MyVue。MyVue.jsconstMyVue=Vue.extend({minxins:[log]});exportdefaultMyVue;4provideandinjectparentprovideshareddataormethods{//...provide(){return{xx:this.changexx,yy:this.changeyy}},methods:{changexx(){//...},changeyy(){//...}}}后代注入东西来修改数据{inject:["changexx","changeyy"]}有点像.sync修饰符，但比.sync更广泛。
