详解Vue进阶构造属性
1、Directive 自定义指令
在 Vue 框架下的代码中，很少用到原生 DOM 操作，那是因为在 Vue 中将原生 DOM 操作都封装成了指令，例如我们前面见到的 <div v-text="xxx"></div> 指令，其实其内部操作就是：
div.innerText = xxx; //当然这里的 div 是获取得来的 DOM 元素
Vue 将原生 DOM 操作封装成指令，那个元素想使用该指令，直接在 HTML 模板中的元素标签中当作属性使用就行，简介方便，减少重复。
但是 Vue 毕竟不能把所有 DOM 操作情况都提前考虑进去封装成对应指令，有些 DOM 操作还得开发者在实际中用到时才知道，因此 Vue 便提供了用户自定义指令的方式，大致分为如下两种：
自定义指令和自定义组件类似，也分为全局和局部，下面以自定义一个打印字符 y 的指令 v-y为例讲解：
全局指令
全局属性就是在 Vue 提供的特定函数中注册：
Vue.directive("y", {
inserted: function(el) {
el.addEventListener("click", () => console.log("y"));
}
});
局部指令
只能用在定义该指令的 template 里
可以是完整版的 template 属性里
main.js
new Vue({
template:`
<div v-y>
<button>点击</button>
</div>
`,
directives:{
'y':{
inserted: function(el) {
el.addEventListener("click", () => console.log("y"));
}
}
}
}).$mount("#app");
或者是非完整版的 .vue 文件的 export default{}里
app.vue
<template>
<div>
<button v-y>点击</button>
</div>
</template>
<script>
export default {
directives:{
'y':{
inserted: function(el) {
el.addEventListener("click", () => console.log("y"));
}
}
}
};
</script>
directiveOptions
指令对象里有5个函数属性
{
bind: function (el,info,vnode,oldVnode) {}, //元素创建在内存中时执行
inserted: function (参数同上) {}, //元素插入页面时执行
update: function (参数同上) {},
componentUpdated: function (参数同上) {},
unbind: function (参数同上) {} //元素消失时执行
}
函数属性的参数中 el 是指调用该指令的元素，info 包含了所有信息，需要时就在 info 中找
2、Mixin 混入
混入的主要目的是为了减少构造选项的重复，可将重复的构造选项的部分抽离出来放到一个单独的 *.js 文件中，然后用 import 导入，再在构造选项中通过 mixins 属性混入。
minxin 是智能混合，会根据添加的混入和当前的选项进行智能混合，而不是单纯的复制。
3、Extends 继承
继承和 minxin 功能差不多，但 extend 更抽象些，二者都是对构造选项的重复进行简化，extend 可以在原有 Vue 的空壳基础上加上自己的定义属性作为固定属性，然后在创建 Vue 对象时使用创建继承了 Vue 的自定义类 MyVue。
MyVue.js
const MyVue = Vue.extend({
minxins: [log]
});
export default MyVue;
4、provide 和 inject
父代提供共用数据或方法
{
//...
provide(){
return {
xx: this.changexx,
yy: this.changeyy
}
},
methods:{
changexx(){
//...
},
changeyy(){
//...
}
}
}
后代注入东西对数据修改
{
inject: ["changexx", "changeyy"]
}
和 .sync 修饰符的作用有点像，但比 .sync 要广泛。
以上就是详解Vue进阶构造属性的详细内容，更多关于Vue进阶构造属性的资料请关注脚本之家其它相关文章！
相关文章
Pinia是Vue的存储库,它允许您跨组件/页面共享状态,下面这篇文章主要给大家介绍了Pinia中action使用方法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-04-04
本文主要介绍了vue结合leaflet实现鹰眼图，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-06-06
这篇文章主要介绍了vue-cli3设置代理无效的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
本文主要介绍了Vue 编程式路由导航2022-04-04
这篇文章主要为大家详细介绍了如何基于Vue3编写一个简单的播放器，文中的示例代码讲解详细，对我们学习Vue3有一定的帮助，需要的可以参考一下2023-03-03
这篇文章主要介绍了Vue3基础安装以及配置详解,需要的朋友可以参考下2023-01-01
本篇文章主要介绍了Vue.js弹出模态框组件开发的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
在项目开发的时候很多人都会用到图片上传,本文主要介绍了element-ui中up-load组件实现图片上传回显,具有一定的参考价值,感兴趣的可以了解一下2024-01-01
这篇文章主要介绍了vue项目中极验验证的使用代码示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
Vue是当今增长最快的前端框架,Vue 平易近人、用途广泛且性能卓越,它的语法非常直观,并且具有友好的学习曲线,是开发人员最想学习的顶级前端库之一,下面这篇文章主要给大家介绍了关于vue管理系统项目中的一些核心技能,需要的朋友可以参考下2022-05-05
最新评论