在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
1、Directive 自定义指令在 Vue 框架下的代码中,很少用到原生 DOM 操作,那是因为在 Vue 中将原生 DOM 操作都封装成了指令,例如我们前面见到的 <div v-text="xxx"></div> 指令,其实其内部操作就是: div.innerText = xxx; //当然这里的 div 是获取得来的 DOM 元素 Vue 将原生 DOM 操作封装成指令,那个元素想使用该指令,直接在 HTML 模板中的元素标签中当作属性使用就行,简介方便,减少重复。 但是 Vue 毕竟不能把所有 DOM 操作情况都提前考虑进去封装成对应指令,有些 DOM 操作还得开发者在实际中用到时才知道,因此 Vue 便提供了用户自定义指令的方式,大致分为如下两种: 自定义指令和自定义组件类似,也分为全局和局部,下面以自定义一个打印字符 全局指令 全局属性就是在 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进阶构造属性的资料请关注极客世界其它相关文章! |
请发表评论