亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

Vue官網(wǎng)教程疑難解析

wow_worktile / 809人閱讀

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

主要摘錄的是Vue教程中的疑難點，結(jié)合demo來加深概念的理解（持續(xù)更新！）

箭頭函數(shù)在Vue中使用

不要在選項屬性或回調(diào)上使用箭頭函數(shù)(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
    }
})

箭頭函數(shù)是沒有this的，this是根據(jù)父級的上下文且是靜態(tài)生成的

// 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屬性默認(rèn)為true時，子組件的根元素會繼承父作用域下（除卻props定義）的屬性，設(shè)置為false，子組件的根元素不會繼承父作用域的屬性（除class和style外）
$attrs包含的就是父作用域的特性綁定（除了props定義的之外）

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

            
        

    `
})

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

渲染結(jié)果如下：
mixins

mixins接受一個混入對象的數(shù)組，實現(xiàn)一個類似淺拷貝的功能。利用mixins可以對組件代碼進(jìn)行抽離及封裝。(注：如果傳入的是鉤子函數(shù)，則按照數(shù)組的順序依次執(zhí)行鉤子函數(shù)，且會在組件之前執(zhí)行,跟淺拷貝的順序有出入)

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")
        }
    }
})

// 頁面執(zhí)行時，依次會打印"mixin01","mixin02","vm"
vm.name // "mixin02"
vm.foo() // "foo2"
vm.bar() // "bar"

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/100940.html

相關(guān)文章

  • 前端資源分享-只為更好前端

    摘要：一團(tuán)隊組織網(wǎng)站說明騰訊團(tuán)隊騰訊前端團(tuán)隊，代表作品，致力于前端技術(shù)的研究騰訊社交用戶體驗設(shè)計，簡稱，騰訊設(shè)計團(tuán)隊網(wǎng)站騰訊用戶研究與體驗設(shè)計部百度前端研發(fā)部出品淘寶前端團(tuán)隊用技術(shù)為體驗提供無限可能凹凸實驗室京東用戶體驗設(shè)計部出品奇舞團(tuán)奇虎旗下前 一、團(tuán)隊組織 網(wǎng)站 說明 騰訊 AlloyTeam 團(tuán)隊 騰訊Web前端團(tuán)隊，代表作品WebQQ，致力于前端技術(shù)的研究 ISUX 騰...

    zxhaaa 評論0 收藏0

  • 前端資源分享-只為更好前端

    摘要：一團(tuán)隊組織網(wǎng)站說明騰訊團(tuán)隊騰訊前端團(tuán)隊，代表作品，致力于前端技術(shù)的研究騰訊社交用戶體驗設(shè)計，簡稱，騰訊設(shè)計團(tuán)隊網(wǎng)站騰訊用戶研究與體驗設(shè)計部百度前端研發(fā)部出品淘寶前端團(tuán)隊用技術(shù)為體驗提供無限可能凹凸實驗室京東用戶體驗設(shè)計部出品奇舞團(tuán)奇虎旗下前 一、團(tuán)隊組織 網(wǎng)站 說明 騰訊 AlloyTeam 團(tuán)隊 騰訊Web前端團(tuán)隊，代表作品WebQQ，致力于前端技術(shù)的研究 ISUX 騰...

    JouyPub 評論0 收藏0

  • 前端資源分享-只為更好前端

    摘要：一團(tuán)隊組織網(wǎng)站說明騰訊團(tuán)隊騰訊前端團(tuán)隊，代表作品，致力于前端技術(shù)的研究騰訊社交用戶體驗設(shè)計，簡稱，騰訊設(shè)計團(tuán)隊網(wǎng)站騰訊用戶研究與體驗設(shè)計部百度前端研發(fā)部出品淘寶前端團(tuán)隊用技術(shù)為體驗提供無限可能凹凸實驗室京東用戶體驗設(shè)計部出品奇舞團(tuán)奇虎旗下前 一、團(tuán)隊組織 網(wǎng)站 說明 騰訊 AlloyTeam 團(tuán)隊 騰訊Web前端團(tuán)隊，代表作品WebQQ，致力于前端技術(shù)的研究 ISUX 騰...

    vslam 評論0 收藏0

  • 個人分享--web前端學(xué)習(xí)資源分享

    摘要：前言月份開始出沒社區(qū)，現(xiàn)在差不多月了，按照工作的說法，就是差不多過了三個月的試用期，準(zhǔn)備轉(zhuǎn)正了一般來說，差不多到了轉(zhuǎn)正的時候，會進(jìn)行總結(jié)或者分享會議那么今天我就把看過的一些學(xué)習(xí)資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒社區(qū)，現(xiàn)在差不多9月了，按照工作的說法，就是差不多過了三個月的試用期，準(zhǔn)備轉(zhuǎn)正了！一般來說，差不多到了轉(zhuǎn)正的時候，會進(jìn)行總結(jié)或者分享會議！那么今天我就...

    sherlock221 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<