成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Vue 2 | Part 7 組件

xcold / 789人閱讀

摘要：因?yàn)檫@里會(huì)舉一連串的例子，就直接用來作為組件名稱了。這是一個(gè)組件名稱定義的時(shí)候有一點(diǎn)需要注意的，就是要使用中劃線分詞。在組件的方法里面返回?cái)?shù)據(jù)就可以了。在的組件中間定義的內(nèi)容，就會(huì)被插入到的位置中去。敬請(qǐng)期待下一期，組件通信。

界面寫多了，大家應(yīng)該都會(huì)想到一個(gè)問題：JS的模塊寫好以后可以在多個(gè)地方重復(fù)使用，HTML有沒有辦法做到呢？Vue給了我們這個(gè)能力，使用組件，就可以輕松做到。

最簡單的組件

初始化Vue實(shí)例之前，使用Vue.component方法注冊(cè)一個(gè)簡單的template，在HTML中，就可以直接使用。因?yàn)檫@里會(huì)舉一連串的例子，就直接用one、two、three來作為組件名稱了。


    

        
    


Vue.component("one", {
    template: "
  • 這是一個(gè)item
    • "
})

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

    組件名稱定義的時(shí)候有一點(diǎn)需要注意的，就是要使用中劃線分詞。比方說，我想新建一個(gè)叫l(wèi)ist item的組件，組件的名稱就需要是list-item，在HTML中使用的時(shí)候也一樣：

    
    

    Vue.component("list-item", {
    template: "
  • 這是一個(gè)item
    • "
})
    組件的內(nèi)容可以從數(shù)據(jù)獲取嗎？

    可以。在組件的data方法里面返回?cái)?shù)據(jù)就可以了。跟Vue實(shí)例不一樣的是，組件的data對(duì)應(yīng)一個(gè)function，在組件中想要用到的數(shù)據(jù)，需要從這個(gè)方法里面返回（返回的數(shù)據(jù)類型是對(duì)象）。

    
    

    Vue.component("two", {
    template: "
  • {{ listItem.name }}
    • ",
    data: function () {
        return {
            // 在html中引入gamesDB.js
            listItem: window.games[0]
        }
    }
})

    組件的內(nèi)容可以在HTML里面定義嗎？

    可以。在組件中使用吧。在HTML的組件中間定義的內(nèi)容，就會(huì)被插入到 tag的位置中去。除了直接定義文字之外，當(dāng)然也可以寫HTML。

    
    item1
    item2
    item3

    Vue.component("three", {
    template: "
    • "
})

    在沒有定義組件內(nèi)容的時(shí)候，可以有默認(rèn)的內(nèi)容嗎？

    可以。在tag中間設(shè)置的內(nèi)容，就是默認(rèn)的內(nèi)容。

    
    
    這是自定義的內(nèi)容

    Vue.component("three", {
    template: "
  • 默認(rèn)內(nèi)容
    • "
})

    如果我想在不同的位置插入不同的內(nèi)容呢？

    使用具名吧。在template里面設(shè)置好每個(gè)slot的名稱，在HTML中通過slot屬性指定內(nèi)容要插入到哪個(gè)具名中。詳情請(qǐng)看下面的代碼片段和注釋。

    
    
        
        

        
        
    this is my awesome website
    
        

    Vue.component("five", {
    template:
        "
    " +
            "
    " +
                // 設(shè)置slot的名稱為header
                "" +
            "
    " +
            "
    " +
                // 設(shè)置slot的名稱為content
                "" +
            "
    " +
        "
    "
})

    圖片中選中的這一行，因?yàn)樵贖TML中指定slot的時(shí)候使用了div tag所以文字被它包了起來，如果希望直接插入文字，可以使用template這個(gè)tag：

    既然組件相當(dāng)于自定義了一個(gè)tag，那可以自定義tag的屬性嗎？

    可以的。使用component的props來設(shè)置吧。這里有一點(diǎn)千萬要記得，在props里面，是駝峰式分詞，但是，在HTML里面使用這個(gè)屬性的時(shí)候，需要用中劃線分詞，是中！劃！線！我最開始使用的時(shí)候，兩邊都習(xí)慣性地使用駝峰，結(jié)果死活沒有效果。最后才發(fā)現(xiàn)官方文檔有說明……

    
    

    Vue.component("six", {
    props: ["userName"],
    template: "
  • {{ userName }}
    • "
})

    從屬性傳入的數(shù)據(jù)，組件內(nèi)可以進(jìn)行處理嗎？

    可以。我們用計(jì)算屬性做例子吧。把屬性設(shè)定的文字轉(zhuǎn)換為全大寫。

    
    

    Vue.component("six", {
    props: ["userName"],
    // 最后template中使用的是計(jì)算屬性
    template: "
  • {{ uppercaseName }}
    • ",
    computed: {
        uppercaseName: function() {
            return this.userName.trim().toUpperCase()
        }
    }
})

    這些自定義的屬性也可以用v-bind指令嗎？

    YES！直接用官方的一個(gè)雙向數(shù)據(jù)綁定的例子吧：

    
    
    
    
    

    Vue.component("six", {
    props: ["userName"],
    template: "
  • {{ uppercaseName }}
    • ",
    computed: {
        uppercaseName: function() {
            return this.userName.trim().toUpperCase()
        }
    }
})

var app = new Vue({
    el: "#app",
    data: {
        inputMsg: ""
    }
})

    可以在組件里面直接使用另外一個(gè)組件嗎？

    當(dāng)然可以。我們直接上例子吧：

    
    

    Vue.component("game-list", {
    template:
        "
      " +
            // 直接使用第三個(gè)組件進(jìn)行循環(huán)
            "{{ game.name }}" +
        "
    ",
    data: function () {
        return {
            games: window.games
        }
    }
})

    這期的基本上把組件的基礎(chǔ)都過了一遍，視頻里面會(huì)附加套用boostrap的css做一個(gè)自己的組件的內(nèi)容。敬請(qǐng)期待下一期，組件通信。

    寫在最后

    源碼地址：https://github.com/levblanc/v...

    視頻攻略：小的不才，為求一贊，自制 本期視頻攻略 在此。

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

    轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/81328.html

    相關(guān)文章

    • Vue 2 | 基礎(chǔ)API系列文章合集

      摘要：在大家的鞭策和鼓勵(lì)下，這個(gè)基礎(chǔ)的系列終于完成了。關(guān)于更新的頻率，因?yàn)槭俏易约阂粋€(gè)人在做，文案視頻都準(zhǔn)備好了才發(fā)的話，最快也只能一周一更。最后這幾期可以密集地更新，完全是因?yàn)楣痉偶倭?。不過月份的更新速度真的不能保證，抱歉。 在大家的鞭策和鼓勵(lì)下，這個(gè)基礎(chǔ)API的系列終于完成了。所幸是沒有真的更到一百期才完結(jié)（笑）。最初是因?yàn)橛X得錄視頻好玩，才挖的這個(gè)坑。也想過中途放棄，關(guān)掉專欄，但由于...

      instein 評(píng)論0 收藏0

    • Vue.js應(yīng)用性能優(yōu)化：第一部分---介紹性能優(yōu)化和懶加載

      摘要：我的目標(biāo)是使本系列成為關(guān)于應(yīng)用程序性能的完整指南。代碼分割就是將應(yīng)用程序分割成這些延遲加載的塊?？偨Y(jié)延遲加載是提高應(yīng)用程序性能并減少其大小的最佳方法之一。在本系列的下一部分中，我將向您展示如何使用和路由來分割應(yīng)用程序代碼。 當(dāng)移動(dòng)優(yōu)先（mobile-first）的方式逐漸成為一種標(biāo)準(zhǔn)，而不確定的網(wǎng)絡(luò)環(huán)境因素應(yīng)該始終是我們考慮的一點(diǎn)，因此保持讓應(yīng)用程序快速加載變得越來越困難。在本系列文章...

      ZweiZhao 評(píng)論0 收藏0

    • Vue.js應(yīng)用性能優(yōu)化：第二部分---路由懶加載和 Vendor bundle 反模式

      摘要：現(xiàn)在，我們將更深入地研究，并學(xué)習(xí)用于分割應(yīng)用程序最實(shí)用的模式。本系列文章基于對(duì)性能優(yōu)化過程的學(xué)習(xí)。路徑時(shí)才被下載。為了便于理解，文件名稱并不是由生成的真實(shí)名稱。接下來，我們將學(xué)習(xí)其他部分和單獨(dú)的組件也能夠從主文件分割出來并延遲加載。 在前一篇文章中，我們學(xué)習(xí)了什么是代碼分割，它是如何與 Webpack 一起工作的，以及如何在Vue應(yīng)用程序中使用延遲加載?，F(xiàn)在，我們將更深入地研究，并學(xué)習(xí)...

      0x584a 評(píng)論0 收藏0

    • Vue.js應(yīng)用性能優(yōu)化：第三部分-延遲加載Vuex模塊

      摘要：靜態(tài)模塊不能被取消注冊(cè)也不能延遲注冊(cè)，并且在初始化后不能更改靜態(tài)模塊的結(jié)構(gòu)不是狀態(tài)。為此，我們將在路由對(duì)應(yīng)的組件中加載模塊，而不是在中導(dǎo)入并注冊(cè)它。能代碼分割模塊是一個(gè)強(qiáng)大的工具。 在前一部分，我們學(xué)習(xí)了足夠強(qiáng)大的模式，可以顯著提高應(yīng)用程序的性能 - 按每個(gè)路由分割代碼。雖然按路由分割代碼非常有用，但是在用戶訪問我們的站點(diǎn)后，仍然有很多代碼是不需要的。在本系列的這一部分中，我們將重點(diǎn)關(guān)...

      charles_paul 評(píng)論0 收藏0

    • VUE - MVVM - part12 - props

      摘要：看這篇之前，如果沒有看過之前的文章，移步拉到文章末尾查看之前的文章。而該組件實(shí)例的父實(shí)例卻并不固定，所以我們將這些在使用時(shí)才能確定的參數(shù)在組件實(shí)例化的時(shí)候傳入。系列文章地址優(yōu)化優(yōu)化總結(jié) 看這篇之前，如果沒有看過之前的文章，移步拉到文章末尾查看之前的文章。 前言 在上一步，我們實(shí)現(xiàn) extend 方法，用于擴(kuò)展 Vue 類，而我們知道子組件需要通過 extend 方法來實(shí)現(xiàn)，我們從測(cè)試?yán)?..

      bluesky 評(píng)論0 收藏0

    發(fā)表評(píng)論

    0條評(píng)論

    最新活動(dòng)
    閱讀需要支付1元查看
    <