详解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进阶构造属性的资料请关注我们其它相关文章!

时间: 2021-05-14

解决Vue 给mapState中定义的属性赋值报错的问题

1. 实践环境 Vue 2.9.6 2. 问题描述 <script> import { mapState } from 'vuex'; export default { name: "displayCount", computed: { ...mapState({ ...略 count: state => state.a.count }) }, methods: { increaseCount () { this.count = this.count + 1 } }

vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题

Cannot set reactive property on undefined, null, or primitive value: //无法对未定义的值.空值或基元值设置反应属性: 比如我们在写一个表单,提交成功后要清空表单 我把数据绑在上面了方便看,确定提交成功我们一般要清空input,而我在js里开始这样写 我写的时候提交成功直接把这个对象变成空了,再次打开弹窗就会报这类型错 上面绑的数据已经成空了,所有找不到这个对象包括key ,value 清空的话,单个清空,或者直接对象为空 或者

Vue 构造选项 - 进阶使用说明

Directive指令:减少DOM操作的重复 Vue实例/组件用于数据绑定.事件监听.DOM更新 Vue指令主要目的就是原生DOM操作 减少重复 自定义指令 两种声明方式 方法一:声明一个全局指令 Vue.directive('x', directiveOptions) 方法二:声明一个局部指令 在options里写,只能被那个Vue实例/组件使用 new Vue({ ..., directives:{ "x":directiveOptions } }) 关于directiveOpti

简单了解Vue computed属性及watch区别

自己的理解: 1. computed用来监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理: 2. computed比较适合对多个变量或者对象进行处理后返回一个结果值,也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化,举例:购物车里面的商品 列表和总金额之间的关系,只要商品列表里面的商品数量发生变化,或减少或增多或删除商品,总金额都应该发生变化.这里的这个总金额使用computed属性

vue中的计算属性和侦听属性

计算属性 计算属性用于处理复杂的业务逻辑 计算属性具有依赖性,计算属性依赖 data中的初始值,只有当初始值改变的时候,计算属性才会再次计算 计算属性一般书写为一个函数,返回了一个值,这个值具有依赖性,只有依赖的那个值发生改变,他才会重新计算 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewpo

在vue中动态修改css其中一个属性值操作

我就废话不多说了,大家还是直接看代码吧~ <template> <!--此div的高度取屏幕可视区域的高度--> <div class="hello" :style="{'height':getClientHeight}"> <h5>{{ msg }}</h5> </div> </template> <script> export default { data() { r

vue 实现根据data中的属性值来设置不同的样式

style动态赋值 margin-top的值 根据choosePaperFlag的值来设置 利用三元表达式 补充知识:vue 条件判断绑定内联样式 当需要判断条件来绑定内联样式时 可以三元运算符判断,然后绑定一个对象 :style="!areaCode || !phoneNumber || !receivedCode || !verification ? '{backgruond:#ccc}' : $store.state.store.config.background" 以上这篇vu

vue中的循环对象属性和属性值用法

v-for除了可以循环数组,还可以循环对象. 例子: <template> <div> <div v-for="(item,i) in obj">{{i}}--{{item}}</div> </div> </template> <script> export default { name: "HelloWorld", data () { return { obj:{ age:1, n

vue 计算属性和侦听器的使用小结

1. 计算属性和侦听器 1.1 计算属性 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> </head> <body> <div id="app"

Vue学习笔记之计算属性与侦听器用法

本文实例讲述了Vue计算属性与侦听器用法.分享给大家供大家参考,具体如下: vue之所以加载速度非常块,是因为在数据改变时,它并不是将所有组件都刷新,而是在重用代码的基础上对发生改变的地方进行渲染.同时,还得益于计算属性的使用: 1.计算属性 像绑定普通属性一样在模板中绑定计算属性.例如reverseName属性依赖于firstName和lastName,当firstName或lastName发生改变时,依赖于它的 reverseName 也会更新. 利用函数方法也可以实现类似的效果,不同的是计

深入浅析Vue.js计算属性和侦听器

一. 概述 计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example"> {{ message.split('').reverse().join('') }} </div> 在这个地方,模板不再是简单的声明式逻辑.你必须看一段时间才能意识到,这里是想要显示变量 message 的翻转字符串.当你想要在模板中多次引用此处的翻转字符串时,就会更加难以处理. 所以,对于

Vue.js中关于侦听器(watch)的高级用法示例

Vue侦听器watch 虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器.这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化.当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的.例如: <div id="watch-example"> <p> Ask a yes/no question: <input v-model="question"> </p> &l

详解vue 计算属性与方法跟侦听器区别(面试考点)

计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example"> {{ message.split('').reverse().join('') }} </div> 在这个地方,模板不再是简单的声明式逻辑.你必须看一段时间才能意识到,这里是想要显示变量 message 的翻转字符串.当你想要在模板中多次引用此处的翻转字符串时,就会更加难以处理. 所以,对于任何复杂逻辑

vue计算属性和监听器实例解析

基本实例 <div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p> </div> var vm = new Vue({ el: '#example', data: { message: 'Hello'

Vue 2.0 侦听器 watch属性代码详解

用法 -------------------------------------------------------------------------------- 先来看看官网的介绍: 官网介绍的很好理解了,也就是监听一个数据的变化,当该数据变化时执行我们的watch方法,watch选项是一个对象,键为需要观察的表达式(函数),还可以是一个对象,可以包含如下几个属性: handler        ;对应的函数                          ;可以带两个参数,分别是新的值

Vue计算属性的使用

我们都知道在Vue构造函数的参数对象中有一个[data]属性,该属性值是一个对象,该对象是对数据的代理,是一个键值对并且时刻与页面表现是一致的,但是这里面只能是简单的键值对,不能拥有业务逻辑,并且由于[data]中的属性属于同一个生命周期,所以如果我们需要某一个属性是依赖于另外一个属性时,在[data]中是做不到的,于是Vue为我们提供了[计算属性] 一.计算属性 1.1 概述 计算属性归根结底也是属性,它也是跟表现层是时刻同步的,虽然我们可以在插值中对数据进行各种处理,但是插值中的表达式处理毕

Vue计算属性的学习笔记

本文为大家分享了Vue计算属性的学习笔记,供大家参考,具体内容如下 ①模板内的表达式实际上只用于简单的运算,对于复杂逻辑,使用计算机属性. ②基础例子: <div id = "example"> <p>Original message:"{{message}}"</p> <p>Computed reversed message:"{{reversedMessage}}"</p> <

js跨浏览器的事件侦听器和事件对象的使用方法

本文特意为跨浏览器实现添加事件侦听器和跨浏览器事件对象的使用方法做了下总结,并把这些方法打包,欢迎大家学习. 打包的一个EventUtil对象 var EventUtil = { // 添加侦听事件 addEventListener:function (element, type, handler) { // IE9+.Firefox.Safari.chrome和Opera if(element.addEventListener) { element.addEventListener(type,

JavaScript事件处理程序(事件侦听器)

我们知道,javascript与HTML之间的交互是通过事件来实现的,事件就是用户或浏览器自身执行的某种动作,比如click.mounseover.load--,而响应事件的函数就叫做事件处理函数(或事件侦听器). event util test var eventUtil = { addListener: function(element, type, hander) { if (element.addEventListener) { element.addEventListener(type