Vue官网教程疑难解析

wow_worktile 发布于2019-08-23 14:39 / 746人阅读

摘要：利用可以对组件代码进行抽离及封装。注如果传入的是钩子函数，则按照数组的顺序依次执行钩子函数，且会在组件之前执行跟浅拷贝的顺序有出入页面执行时，依次会打印

主要摘录的是Vue教程中的疑难点，结合demo来加深概念的理解（持续更新！）

箭头函数在Vue中使用

不要在选项属性或回调上使用箭头函数(demo01)

var vm1 = new Vue({
    data: {
        a: 1
    },
    created: function() {
        // `this` 指向 vm 实例
        console.log("a is: " + this.a) // a is: 1
    }
})

var a = "123";
var vm2 = new Vue({
    data: {
        a: 1
    },
    created: () => {
        // `this` 指向 window
        console.log("a is: " + this.a) // a is: 123
    }
})

箭头函数是没有this的，this是根据父级的上下文且是静态生成的

// ES6
function foo() {
  setTimeout(() => {
    console.log("id:", this.id);
  }, 100);
}
// ES5
function foo() {
  var _this = this;

  setTimeout(function () {
    console.log("id:", _this.id);
  }, 100);
}

inheritAttrs $attrs

这两个API都是vue2.4.0新增的，教程解释的不是很清楚(demo02)
inheritAttrs属性默认为true时，子组件的根元素会继承父作用域下（除却props定义）的属性，设置为false，子组件的根元素不会继承父作用域的属性（除class和style外）
$attrs包含的就是父作用域的特性绑定（除了props定义的之外）

Vue.component("component-demo", {
    inheritAttrs: true, // 设置true或false
    props: ["label", "value"],
    template: `
        
            
        
    `
})

var vueDemo = new Vue({ el: "#app-demo" })

渲染结果如下：

mixins

mixins接受一个混入对象的数组，实现一个类似浅拷贝的功能。利用mixins可以对组件代码进行抽离及封装。(注：如果传入的是钩子函数，则按照数组的顺序依次执行钩子函数，且会在组件之前执行,跟浅拷贝的顺序有出入)

var mixin01 = {
  created() {
    console.log("mixin01")
  },
  data() {
    return {
      name: "mixin01"
    }
  },
    methods: {
        foo: function() {
            console.log("foo1")
        },
        conflicting: function() {
            console.log("from mixin1")
        }
    }
}

var mixin02 = {
  created() {
    console.log("mixin02")
  },
  data() {
    return {
      name: "mixin02" 
    }
  },
    methods: {
        foo: function() {
            console.log("foo2")
        },
        conflicting: function() {
            console.log("from mixin2")
        }
    }
}

var vm = new Vue({
    mixins: [mixin01, mixin02],
    created() {
      console.log("vm")
    },
    methods: {
        bar: function() {
            console.log("bar")
        },
        conflicting: function() {
            console.log("from self")
        }
    }
})

// 页面执行时，依次会打印"mixin01","mixin02","vm"
vm.name // "mixin02"
vm.foo() // "foo2"
vm.bar() // "bar"

GPU云服务器云服务器 java 疑难解析 vue官网 vue教程 vue基础教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100940.html

前端资源分享-只为更好前端

摘要：一团队组织网站说明腾讯团队腾讯前端团队，代表作品，致力于前端技术的研究腾讯社交用户体验设计，简称，腾讯设计团队网站腾讯用户研究与体验设计部百度前端研发部出品淘宝前端团队用技术为体验提供无限可能凹凸实验室京东用户体验设计部出品奇舞团奇虎旗下前一、团队组织网站说明腾讯 AlloyTeam 团队腾讯Web前端团队，代表作品WebQQ，致力于前端技术的研究 ISUX 腾...

zxhaaa 2019-08-22 16:11 评论0 收藏0
前端资源分享-只为更好前端

摘要：一团队组织网站说明腾讯团队腾讯前端团队，代表作品，致力于前端技术的研究腾讯社交用户体验设计，简称，腾讯设计团队网站腾讯用户研究与体验设计部百度前端研发部出品淘宝前端团队用技术为体验提供无限可能凹凸实验室京东用户体验设计部出品奇舞团奇虎旗下前一、团队组织网站说明腾讯 AlloyTeam 团队腾讯Web前端团队，代表作品WebQQ，致力于前端技术的研究 ISUX 腾...

JouyPub 2019-08-02 10:10 评论0 收藏0
前端资源分享-只为更好前端

摘要：一团队组织网站说明腾讯团队腾讯前端团队，代表作品，致力于前端技术的研究腾讯社交用户体验设计，简称，腾讯设计团队网站腾讯用户研究与体验设计部百度前端研发部出品淘宝前端团队用技术为体验提供无限可能凹凸实验室京东用户体验设计部出品奇舞团奇虎旗下前一、团队组织网站说明腾讯 AlloyTeam 团队腾讯Web前端团队，代表作品WebQQ，致力于前端技术的研究 ISUX 腾...

vslam 2019-08-30 15:53 评论0 收藏0
个人分享--web前端学习资源分享

摘要：前言月份开始出没社区，现在差不多月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了一般来说，差不多到了转正的时候，会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客，博文推荐分享给大家。 1.前言 6月份开始出没社区，现在差不多9月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了！一般来说，差不多到了转正的时候，会进行总结或者分享会议！那么今天我就...

sherlock221 2019-08-20 18:59 评论0 收藏0