您的位置：首页 > 编程学习 > > 正文

vue中的指令及用法（详解Vue进阶构造属性）

更多 时间：2022-03-30 20:42:57 类别：编程学习 浏览量：2672

vue中的指令及用法

详解Vue进阶构造属性

1、Directive 自定义指令

在 Vue 框架下的代码中，很少用到原生 DOM 操作，那是因为在 Vue 中将原生 DOM 操作都封装成了指令，例如我们前面见到的 <li v-text="xxx"></li> 指令，其实其内部操作就是：

li.innerText = xxx; //当然这里的 li 是获取得来的 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:`
    <li v-y>
      <button>点击</button>
    </li>
  `,
  directives:{
    'y':{
      inserted: function(el) {
        el.addEventListener("click", () => console.log("y"));
      }
    }
  }
}).$mount("#app");

    • 或者是非完整版的 .vue 文件的 export default{}里

    app.vue

  • <template>
    <li>
      <button v-y>点击</button>
    </li>
</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进阶构造属性的资料请关注开心学习网其它相关文章！

    标签：vue 进阶构造属性
  • 上一篇：vmwareftp怎么用（Windows Azure VM上配置FTP服务器）
  • 下一篇：css3自制像素细线（css3绘制百度的小度熊）
    • 您可能感兴趣
    首页 编程学习 Web前端 数据库 软件设计
    开心学习 ©2013-2021 保留所有权利