Vue进阶,vue构造函数
本文主要介绍了Vue的高级构造属性，并从四个方面进行了说明：Directive、Mixin、Extensions继承、provide和inject。感兴趣的延伸一下，请看一下。
目录
1、指令自定义指令2、Mixin混合3、扩展继承4、提供和注入
1、Directive 自定义指令
在Vue框架下的代码中，很少使用原生DOM操作。那是因为所有的原生DOM操作都封装在Vue的指令中，比如我们前面看到的div v-text=xxx/div指令。事实上，它的内部运作是：
div.innerText=xxx//当然这里的div是获取的DOM元素。
Vue将原生DOM操作封装到一条指令中。如果那个元素要使用指令，可以直接在HTML模板中的element标签中作为属性使用，方便引入，减少重复。
但是，Vue毕竟不能提前把所有的DOM操作都考虑进去，封装成相应的指令。有些DOM操作在实际使用的时候还得让开发者知道。因此，Vue提供了自定义指令，大致可以分为以下两种：
自定义命令类似于自定义组件，也可以分为全局命令和局部命令。以下是定义打印字符Y的命令v-y的示例：
全球指令
全局属性注册在Vue提供的特定函数中：
Vue.directive(y ，{
插入：函数(el) {
el.addEventListener(click ，()=console . log( y ))；
}
});
本地指令
它只能在定义该指令的模板中使用。
它可以在模板属性的完整版本中。
主页. js
新Vue({
模板：` 1
分区v-y
点击/按钮
/div
`,
指令：{
y:{
插入：函数(el) {
el.addEventListener(click ，()=console . log( y ))；
}
}
}
}).$ mount( # app )；
或在不完整版本的导出默认值{}中。vue文件。
app.vue
模板
差异
按钮v-y点击/按钮
/div
/模板
脚本
导出默认值{
指令：{
y:{
插入：函数(el) {
el.addEventListener(click ，()=console . log( y ))；
}
}
}
};
/脚本
方向选项
指令中有五个功能属性。
{
Bind: function (El，info，vnode，old vnode) {}，//元素在内存中创建时执行。
Inserted: function(参数同上){}，//元素插入页面时执行。
更新：函数(参数同上){}，
更新：函数(参数同上){}，
Unbind: function(参数同上){ }//元素消失时执行。
}
函数的参数中El指的是调用指令的元素，info包含了所有的信息，需要的时候在info中寻找。
2、Mixin 混入
混合的主要目的是减少构造选项的重复。您可以提取重复的构造选项，并将它们放在单独的*中。js文件，然后用import导入它们，然后通过mixins属性在构造选项中混合它们。
民信是智能混合，会根据添加的混合和当前的选项进行智能混合，而不是简单的复制。
3、Extends 继承
继承minxin函数类似，但是extend更抽象。两者都简化了构造选项的重复。extend可以在Vue原有外壳的基础上添加自己定义的属性作为固定属性，然后在创建Vue对象时用它创建一个继承Vue的自定义类MyVue。
MyVue.js
const MyVue=Vue.extend({
民信：[日志]
});
导出默认MyVue
4、provide 和 inject
父级提供共享数据或方法。
{
//.
提供(){
返回{
xx: this.changexx，
yy: this.changeyy
}
},
方法：{
changexx(){
//.
},
changeyy(){
//.
}
}
}
后代注入一些东西来修改数据。
{
注入：[changexx ， changeyy]
}
的功能。同步修饰符类似于。sync修饰符，但它比。同步修改器。
以上是对Vue高级构造属性的详细解释。更多关于Vue高级建造属性的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。