Vue官網教程疑難解析

wow_worktile 發布于2019-08-23 14:39 / 752人閱讀

摘要：利用可以對組件代碼進行抽離及封裝。注如果傳入的是鉤子函數，則按照數組的順序依次執行鉤子函數，且會在組件之前執行跟淺拷貝的順序有出入頁面執行時，依次會打印

主要摘錄的是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"

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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