Vue进阶构造属性的示例分析

小编给大家分享一下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是一套用于构建用户界面的渐进式javascript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。

以上是“Vue进阶构造属性的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网精选频道！