理解vue中的組件（二）

Nino 發(fā)布于2019-08-23 12:11 / 3039人閱讀

摘要：往往定義組件的構(gòu)造器后，不需要手動(dòng)的進(jìn)行初始化，而是在其他組件的模板中當(dāng)成標(biāo)簽來(lái)使用，這時(shí)候需要調(diào)用注冊(cè)成組件。這樣設(shè)計(jì)的目的是防止從子組件意外改變父級(jí)組件的狀態(tài)，從而導(dǎo)致應(yīng)用的數(shù)據(jù)流向難以理解。

上節(jié)說(shuō)到組件https://segmentfault.com/a/1190000009236700，這一節(jié)繼續(xù)來(lái)學(xué)習(xí)組件：

原文博客地址，歡迎學(xué)習(xí)交流:點(diǎn)擊預(yù)覽
從github上獲取本文代碼：示例代碼

封裝的組件要具備復(fù)用性和通用性。

先來(lái)說(shuō)復(fù)用，復(fù)用主要是復(fù)用 HTML 結(jié)構(gòu)，外加這塊結(jié)構(gòu)中的交互 js，和針對(duì)這一塊設(shè)置的 css。這三者是構(gòu)成一個(gè)組件最基本的要素，這三者相互隔離有相互作用，將三者聚合起來(lái)，在需要使用的地方，類(lèi)似一個(gè)變量（標(biāo)簽對(duì)）一樣，會(huì)引用這一塊的所有功能，可以多次使用。

在 vue 中提供了單文件組件，一個(gè)文件就是一個(gè)組件，這樣把組件模塊化的方式，讓開(kāi)發(fā)者更方便的利用組件堆積頁(yè)面。將三者聚合在一個(gè)文件中，孤立的存在，減少了改動(dòng)組件而影響外界的風(fēng)險(xiǎn)，極大的提高了代碼可維護(hù)性。

再說(shuō)通用性，在討論通用性這點(diǎn)上，要向兩個(gè)方面思考：

外界使用組件，對(duì)組件所需要的數(shù)據(jù)進(jìn)行定制，由外界傳遞進(jìn)來(lái)（內(nèi)部可以設(shè)置默認(rèn)值）

組件內(nèi)部的交互要通知給外界，并在外界的控制下產(chǎn)生影響，做不同事情。

組件達(dá)到復(fù)用后，可以在多個(gè)地方使用，而使用的位置不同，需要展示的數(shù)據(jù)也不同，此時(shí)封裝的組件要具有通用性，組件內(nèi)部則由外界使用組件時(shí)來(lái)決定將要顯示的數(shù)據(jù)，需要將數(shù)據(jù)傳遞給組件。

組件的內(nèi)部除了需要數(shù)據(jù)外，不可避免的還有交互，當(dāng)完成一個(gè)交互后，需要對(duì)外界產(chǎn)生影響，這不能在組件內(nèi)部做具體的事情，因?yàn)槭褂玫奈恢貌煌a(chǎn)生的效果也不一樣，而完成這一系列事情則交給外界來(lái)決定，需要組件內(nèi)部通信給外界，告訴外界，內(nèi)部完成了一次交互。

注冊(cè)使用組件

從封裝一個(gè)自定義的下拉框 custom-select 組件開(kāi)始。

要達(dá)到封裝性好，并且可以寫(xiě)多種功能的代碼塊，那么組件本身就是一個(gè)函數(shù)或者類(lèi)，需要使用 Vue.extend( options ) 來(lái)創(chuàng)建構(gòu)造器，這個(gè)構(gòu)造器可以由開(kāi)發(fā)者自己手動(dòng)初始化掛載，也可以注冊(cè)成組件在其他組件的模板中使用。

在 body 中放置掛載點(diǎn)：

定義組件的構(gòu)造器，并手動(dòng)初始化，手動(dòng)掛載：

let customeSelect = Vue.extend({
    template: `
        
            這是一個(gè)定義的下拉框
            請(qǐng)選擇：北京
            
                北京
                上海
                杭州
            
        
    `
})
// 手動(dòng)初始化，掛載到頁(yè)面的掛載點(diǎn)上
new customeSelect().$mount("#app");

選擇手動(dòng)初始化的方式，調(diào)用內(nèi)置方法 $mount 方法進(jìn)行掛載，隨后組件的模板進(jìn)行編譯，替換掉掛載點(diǎn)，渲染在頁(yè)面中。

往往定義組件的構(gòu)造器后，不需要手動(dòng)的進(jìn)行初始化，而是在其他組件的模板中當(dāng)成標(biāo)簽來(lái)使用，這時(shí)候需要調(diào)用 Vue.component( id, [definition] ) 注冊(cè)成組件。

// 注冊(cè)組件，傳入一個(gè)擴(kuò)展過(guò)的構(gòu)造器
Vue.component("my-component", Vue.extend({ /* ... */ }))

// 注冊(cè)組件，傳入一個(gè)選項(xiàng)對(duì)象 (自動(dòng)調(diào)用 Vue.extend)
Vue.component("my-component", { /* ... */ })

// 獲取注冊(cè)的組件 (始終返回構(gòu)造器)
var MyComponent = Vue.component("my-component")

根據(jù)注冊(cè)組件的語(yǔ)法，其實(shí)是可以省略調(diào)用 Vue.extend 這一步，只需要傳入選項(xiàng)對(duì)象即可，內(nèi)部會(huì)自定調(diào)用 Vue.extend ，所以定義組件變成了這樣的簡(jiǎn)寫(xiě)方式：

Vue.component("custome-select",{
    template: `
        
            這是一個(gè)定義的下拉框
            請(qǐng)選擇：北京
            
                北京
                上海
                杭州
            
        
    `
})

將來(lái) custome-select 就當(dāng)成了標(biāo)簽使用在其他組件的模板中 < custome-select>< /custome-select>，Vue在編譯模板時(shí)，就回去找這種自定義標(biāo)簽是否是一個(gè)組件，如果已經(jīng)注冊(cè)的話，就會(huì)把注冊(cè)的構(gòu)造器進(jìn)行初始化，編譯組件模板，最終將編譯后的模板替換掉自定義標(biāo)簽的位置。如果沒(méi)有注冊(cè)直接使用，則會(huì)拋出錯(cuò)誤。

關(guān)于組件名稱(chēng)的命名:

采用烤串（kebab-case）命名，custome-select

采用駝峰命名（ PascalCase）， customeSelect

名稱(chēng)不能是HTML規(guī)定的標(biāo)簽名，比如div、span、header、footer等等。。。

注意：注冊(cè)時(shí)隨便使用兩種命名方式的任何一種，在模板中一律采用烤串命名才有效。

定義掛載點(diǎn)，并使用組件：

啟動(dòng)應(yīng)用：

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

最終渲染后的結(jié)構(gòu)為：


    
    
        這是一個(gè)定義的下拉框
        請(qǐng)選擇：北京
        
            北京
            上海
            杭州

給組件定制數(shù)據(jù)傳遞props

目前 HTML 達(dá)到了復(fù)用的目的，但使用多次依然顯示的是寫(xiě)死的數(shù)據(jù)。作為顯示數(shù)據(jù)的 HTML 結(jié)構(gòu)，在不同地方使用，所要展示的數(shù)據(jù)由外界來(lái)決定，這就需要給組件傳遞數(shù)據(jù)。

而傳遞參數(shù)實(shí)際上就是給組件的構(gòu)造器傳遞參數(shù)，本質(zhì)上就是給函數(shù)傳參。函數(shù)的參數(shù)分為實(shí)參和形參兩個(gè)部分：

實(shí)參是實(shí)際傳遞給函數(shù)的參數(shù)

形參是用來(lái)接收數(shù)據(jù)所聲明的變量

現(xiàn)在組件寫(xiě)在模板中以標(biāo)簽對(duì)的形式呈現(xiàn)，需要傳遞實(shí)際的參數(shù)，唯一的地方就是寫(xiě)在行間作為自定義屬性，而傳遞的參數(shù)會(huì)有很多個(gè)，最好表明具體的含義，需要和組件約定好屬性名，傳遞參數(shù)：

在組件中需要顯示的用 props 接收傳遞的數(shù)據(jù)，這樣的好處就是一旦看到組件，就會(huì)很清晰快速的了解到組件所需要的數(shù)據(jù)。

注意： 在行間寫(xiě)上自定義屬性，要解析為數(shù)組，在屬性名前加上 v-bind，解析為 javascript 表達(dá)式，否則只能當(dāng)成是字符串。

具體如下：

Vue.component("custome-select",{
    // 關(guān)于props具體參考：
    // https://cn.vuejs.org/v2/guide/components-props.html#Prop-%E7%B1%BB%E5%9E%8B
    // https://cn.vuejs.org/v2/guide/components-props.html#Prop-%E9%AA%8C%E8%AF%81
    props:{
        title: {
            type: String,
            default: "這是一個(gè)定義的下拉框"
        },
        list:{
            type: Array,
            default(){return []}
        },
        selectIndex:{
            type: Number,
            default:0
        }
    },
    template: `
        
            {{title}}
            請(qǐng)選擇：{{list[selectIndex]}}
            
                
                    {{item}}
                
            
        
    `
})

在組件中約定了三個(gè)需要接收的參數(shù)，分別寫(xiě)出了接受的類(lèi)型和默認(rèn)值，props參數(shù)文檔如下：

屬性	說(shuō)明	類(lèi)型	默認(rèn)值
title	定制組件的標(biāo)題	String	"這是一個(gè)定義的下拉框""
list	定制組件的下拉列表	Array	[]
selectIndex	選擇要展示的一項(xiàng)	String	0

有了文檔，很清晰的知道每一個(gè)屬性代表的意思，傳入響應(yīng)的參數(shù)后，就會(huì)達(dá)到預(yù)期的效果。

組件自身狀態(tài)data

以上渲染后直接把下拉框顯示了出來(lái)，下拉框應(yīng)該是在點(diǎn)擊 p 標(biāo)簽時(shí)候才能顯示，再次點(diǎn)擊就隱藏掉，要實(shí)現(xiàn)這樣的一個(gè)顯示隱藏切換功能。

在 Vue 中不提倡直接操作 DOM，需要設(shè)置一個(gè)狀態(tài)來(lái)確定 DOM 的狀態(tài)，當(dāng)需要改變 DOM 時(shí)，只需要改變?cè)O(shè)置好的狀態(tài)即可，把我們的關(guān)注點(diǎn)放在狀態(tài)的維護(hù)上，而無(wú)需手動(dòng)操作 DOM 改變。

這個(gè)狀態(tài)不受外界的影響，屬于是組件自身的狀態(tài)變化，定義在組件內(nèi)部，并且改變時(shí)只能由組件自身更改。

具體如下：

Vue.component("custome-select",{
    ... 省略了props設(shè)置
    data(){
        return {
            show: false  // 一開(kāi)始狀態(tài)為false，也就是不顯示下拉列表
        }
    },
    template: `
        
            {{title}}
            請(qǐng)選擇：{{list[selectIndex]}}
            
                
                    {{item}}
                
            
        
    `,
    methods:{
        toggleShow(){
            this.show = !this.show;
        }
    }
})

以上做了三件事情：

在 data 中設(shè)置一個(gè)狀態(tài)為 show，初始值為 false，來(lái)表示下拉列表為隱藏狀態(tài)

在模板上使用指令 v-show="show" 控制 DOM 的顯示隱藏

給 p 綁定事件，切換 show 的值，一旦改變，自動(dòng)更新 DOM 到對(duì)應(yīng)狀態(tài)上，也就是 true 顯示，false 隱藏

Vuejs 這個(gè)框架要做的就是狀態(tài)和UI保持同步。

單向數(shù)據(jù)流

單向數(shù)據(jù)流顧名思義就是單方向的數(shù)據(jù)流向，也就是數(shù)據(jù)只能從一邊流向另一邊，反過(guò)來(lái)則不行，如黃河之水從天上來(lái)，卻不能再流回到天上去。具體到組件中，就是：父子 prop 之間形成了一個(gè)單向下行綁定：父級(jí) prop 的更新會(huì)向下流動(dòng)到子組件中，子組件改變不能改變父組件。這樣設(shè)計(jì)的目的是防止從子組件意外改變父級(jí)組件的狀態(tài)，從而導(dǎo)致應(yīng)用的數(shù)據(jù)流向難以理解。

與之對(duì)應(yīng)的就是雙向數(shù)據(jù)流，父組件子組件都可以任意修改，互相產(chǎn)生影響，這樣的話使用這套數(shù)據(jù)的其他組件也會(huì)跟著變化，變得非常的詭異。

在復(fù)雜的應(yīng)用中，控制數(shù)據(jù)有規(guī)則的改變和傳遞非常重要，如果不是單向數(shù)據(jù)流的限制，任何組件都能修改數(shù)據(jù)，就跟定義全局的數(shù)據(jù)在任何程序都能修改一樣，最終經(jīng)過(guò)多個(gè)函數(shù)的調(diào)用修改后，出現(xiàn)了問(wèn)題，不能準(zhǔn)確的定位到具體的函數(shù)中，排查問(wèn)題會(huì)變的非常的困難。

每次父級(jí)組件發(fā)生更新時(shí)，子組件中所有的 prop 都將會(huì)刷新為最新的值。由父組件傳遞給子組件的數(shù)據(jù)，子組件內(nèi)部不能改變 prop。如果你這樣做了，Vue 會(huì)在瀏覽器的控制臺(tái)中發(fā)出警告。

來(lái)個(gè)例子說(shuō)明一下。上面的例子中，需要在下拉框中選擇具體的的一項(xiàng)，顯示在 p標(biāo)簽中，要顯示的數(shù)據(jù)是通過(guò)外界傳遞的 selectIndex 來(lái)決定從 list 中選取哪一項(xiàng)。那我們可以這樣來(lái)做，在點(diǎn)擊下拉框的某一項(xiàng)時(shí)，改變 selectIndex 為點(diǎn)擊的一項(xiàng)的下標(biāo)即可，具體如下：

HTML 代碼：

JavaScript代碼：

Vue.component("custome-select",{
    props:{
        // 省略了title和list....
        selectIndex:{
            type: Number,
            default:0
        }
    },
    data(){
        return {
            show: false  // 一開(kāi)始狀態(tài)為false，也就是不顯示下拉列表
        }
    },
    template: `
        
            {{title}}
            請(qǐng)選擇：{{list[selectIndex]}}
            
                
                    {{item}}
                
            
        
    `,
    methods:{
        toggleShow(){
            this.show = !this.show;
        },
        changeIndex(index){
            // 改變?yōu)檫x中的下標(biāo)，此時(shí)會(huì)報(bào)錯(cuò)
            this.selectIndex = index;
        }
    }
})

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

以上代碼做的事情：

接收外界傳入的 selecteIndex，在模板中選擇對(duì)應(yīng)的值{{list[selectIndex]}}

給下拉框的每一項(xiàng)綁定事件，并傳遞各自的下標(biāo)

傳遞下標(biāo)給到 changeIndex 函數(shù)，改變selectIndex的值

控制臺(tái)報(bào)錯(cuò)：[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop"s value. Prop being mutated: "selectIndex"大致的意思是：不能直接修改組件的props值，當(dāng)父組件重新渲染時(shí)候會(huì)重寫(xiě)這個(gè)。在組件中使用data或者computed屬性來(lái)代替修改prop的值。

以上的報(bào)錯(cuò)已經(jīng)警告了，不能直接修改props的值，但是組件內(nèi)部是可以修改組件內(nèi)部數(shù)據(jù) data ，所以修改如下：

// 其他代碼省略
Vue.component("custome-select",{
    data(){
        return {
            currentIndex: this.selectIndex // 把selectIndex作為currentIndex的初始值
        }
    },
    template: `
        
            {{title}}
            請(qǐng)選擇：{{list[currentIndex]}}
            
                
                    {{item}}
                
            
        
    `,
    methods:{
        changeIndex(index){
            // 改變自己內(nèi)部狀態(tài)currentIndex
            this.currentIndex = index;
        }
    }
})

以上代碼分析：

在 data 中定義組件內(nèi)部狀態(tài)currentIndex，將props中的selectIndex的值，作為currentIndex的初始值

修改模板中取值的selectIndex為currentIndex

點(diǎn)擊改變currentIndex，此時(shí)修改的是組件內(nèi)部狀態(tài)，不是props的值，修改成功

從以上的例子中可以看出來(lái)，data 中定義的就是組件內(nèi)部狀態(tài)，只在組件內(nèi)部更改，而傳遞的 props 不能在組件內(nèi)修改，可以通過(guò)賦值給data，修改data的值來(lái)更新組件自身的狀態(tài)。

父組件監(jiān)聽(tīng)，子組件發(fā)布

上面說(shuō)的是父組件向子組件定制數(shù)據(jù)傳遞 props，在子組件內(nèi)部會(huì)產(chǎn)生一些交互。

子組件內(nèi)部交互一旦發(fā)生后，父組件是需要根據(jù)子組件的交互會(huì)產(chǎn)生一些影響，比如改變顏色，顯示文字等。父組件這些變換又不能寫(xiě)在子組件的交互中，因?yàn)樽咏M件是通用的組件。一旦寫(xiě)了某個(gè)父組件的業(yè)務(wù)代碼，只能和這個(gè)父組件綁定在一起，不能使用在別的地方了了，此時(shí)組件不能達(dá)到通用的目的。

舉個(gè)例子：
以下使用了兩次 custome-select 組件，當(dāng)點(diǎn)擊第一個(gè)組件的下拉框某一項(xiàng)時(shí)候，就需要改變 class 為 test1 的div 樣式為 red 色。當(dāng)點(diǎn)擊第二個(gè)組件的下拉框某一項(xiàng)時(shí)候，就需要改變 class 為 test2 的div 樣式為 blue 色。


    
    第一個(gè)需求
    
    
    
    第二個(gè)需求

使用了兩次組件，組件內(nèi)部點(diǎn)擊下拉框時(shí)不能寫(xiě)具體的處理第一個(gè)需求還是第二個(gè)需求。而是交到外部的父組件來(lái)決定，這時(shí)候父組件就需要知道子組件內(nèi)部是否點(diǎn)擊了下拉框。而點(diǎn)擊下拉框這個(gè)動(dòng)作是由用戶觸發(fā)的，不知何時(shí)會(huì)觸發(fā)一次，那怎么辦呢？
跟原生的元素處理思路一樣，假定以后用戶點(diǎn)擊了這個(gè)元素后，需要改變頁(yè)面中樣式，那么就需要監(jiān)控這個(gè)元素的點(diǎn)擊事件，只要用戶點(diǎn)擊了，觸發(fā)事件處理函數(shù)，在函數(shù)中寫(xiě)具體改變樣式這個(gè)動(dòng)作。
HTML代碼：

JavaScript代碼：

以上代碼是 DOM0 級(jí)時(shí)代的寫(xiě)法，直接在行間寫(xiě)監(jiān)聽(tīng)事件，這樣寫(xiě)更直觀。目的就是當(dāng)有用戶點(diǎn)擊了按鈕一下，瀏覽器內(nèi)部就會(huì)發(fā)布一個(gè) click 事件，而正好我們?cè)谠厣媳O(jiān)聽(tīng)了 click 事件，就會(huì)把對(duì)應(yīng)的事件處理函數(shù)觸發(fā)，從而達(dá)到開(kāi)發(fā)者的目的，對(duì)頁(yè)面做出一些變化。

組件標(biāo)簽使用在模板中，此時(shí)外界需要知道組件內(nèi)部發(fā)生了的交互，那么思路一致，也需要在行間監(jiān)聽(tīng)事件，不過(guò)此事件名字不限于是 w3c 規(guī)定的事件名，可以自定義事件名，結(jié)合 Vue 中綁定事件的方式，代碼如下：


    
    第一個(gè)需求
    
    
    
    第二個(gè)需求

把事件處理函數(shù)寫(xiě)在選項(xiàng)對(duì)象中：

new Vue({
    el: "#app",
    data: {
        color1: "",
        color2: ""
    },
    methods: {
        // 第一個(gè)需求
        changeTest1Handle(){
            this.color1 = "red";
        },
        // 第二個(gè)需求
        changeTest2Handle(){
            this.color2 = "blue";
        }
    }
})

以上代碼準(zhǔn)備完畢，去點(diǎn)擊下拉選項(xiàng)，并沒(méi)有觸發(fā)父組件的函數(shù)，并沒(méi)有完成需求，為什么呢？
在原生元素上在行間監(jiān)控事件，用戶點(diǎn)擊元素后，瀏覽器會(huì)發(fā)布 click 事件。而現(xiàn)在換做是使用自定義事件來(lái)監(jiān)控子組件內(nèi)部產(chǎn)生的交互，這就需要在子組件內(nèi)部自己發(fā)布這個(gè)自定義的事件，否則監(jiān)控的自定義事件是無(wú)效的。

那什么時(shí)候發(fā)布事件呢？就是在用戶點(diǎn)擊了下拉框的選項(xiàng)時(shí)候發(fā)布這個(gè)自定義事件即可。

你可以這樣來(lái)理解，監(jiān)聽(tīng)原生事件 click ，只需要監(jiān)聽(tīng)，開(kāi)發(fā)者無(wú)需手動(dòng)的在瀏覽器內(nèi)部寫(xiě)發(fā)布事件，click 事件名是瀏覽器給開(kāi)發(fā)者約定的名字。而現(xiàn)在我們需要自己設(shè)計(jì)子組件發(fā)布事件，父組件監(jiān)聽(tīng)這樣的機(jī)制。所以需要開(kāi)發(fā)者自己約定事件的名字和手動(dòng)的在組件中發(fā)布事件。在 Vue 中這樣的訂閱/發(fā)布模式已經(jīng)寫(xiě)好，開(kāi)發(fā)者只需要調(diào)用即可。

在子組件中發(fā)布事件：

// 其他代碼省略
methods:{
    changeIndex(index){
        this.currentIndex = index;
        // 在點(diǎn)擊選項(xiàng)時(shí)候產(chǎn)生交互，手動(dòng)發(fā)布事件，通知父組件
        this.$emit("click-option")；
    }
}

當(dāng)點(diǎn)擊選項(xiàng)時(shí)候，父組件中會(huì)完成不同的需求，改變不同元素的顏色。

以上代碼父子組件之間完全的解耦，父組件中不使用這個(gè)組件，依然可以工作，子組件不使用在這個(gè)組件中，可以使用在任意其他的組件中。如果父組件關(guān)系子組件內(nèi)部選中下拉框一項(xiàng)這個(gè)交互，只需要監(jiān)聽(tīng) click-option這個(gè)自定義事件，不關(guān)心則不監(jiān)聽(tīng)。

總結(jié)

以上可以看出一個(gè)組件數(shù)據(jù)的來(lái)源有兩個(gè)：

組件自身的數(shù)據(jù)，寫(xiě)在 data 中

父組件傳遞的數(shù)據(jù)，寫(xiě)在props中

父子組件之間通信：

父 ---> 子，使用 props

子 ---> 父，訂閱發(fā)布模式

以上屬于個(gè)人理解，如有偏差歡迎指正學(xué)習(xí)，謝謝。

GPU云服務(wù)器云服務(wù)器 vue組件 vue組件開(kāi)發(fā) vue父子組件通訊 vue輪播組件

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/98081.html

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

登陸后可評(píng)論

0條評(píng)論

Nino

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

10g.biz九月促銷(xiāo)：美國(guó)站群首月半價(jià),香港獨(dú)服1.5折;香港+美國(guó)CN2 GIA線路云服務(wù)器$2

閱讀 2146·2021-09-07 10:14
CSS3幀動(dòng)畫(huà)

閱讀 1554·2019-08-30 15:53
css--布局

閱讀 2326·2019-08-30 12:43
思否網(wǎng)站隨屏幕大小自動(dòng)發(fā)生變化

閱讀 2922·2019-08-29 16:37
移動(dòng)端網(wǎng)頁(yè)布局適配rem方案小結(jié)

閱讀 808·2019-08-26 13:29
學(xué)習(xí)JavaScript的原型筆記

閱讀 2064·2019-08-26 13:28
javascript 異步編程

閱讀 502·2019-08-23 18:33
解決<el-checkbox-group> 數(shù)據(jù)與UI更新不同步的坑

閱讀 3639·2019-08-23 16:09

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

理解vue中的組件（二）

這是一個(gè)定義的下拉框

這是一個(gè)定義的下拉框

這是一個(gè)定義的下拉框

{{title}}

{{title}}

{{title}}

{{title}}

相關(guān)文章

Vue.js學(xué)習(xí)系列二 —— vuex學(xué)習(xí)實(shí)踐筆記（附DEMO）

Vue學(xué)習(xí)日記（二）——Vue核心思想

Vue學(xué)習(xí)日記（二）——Vue核心思想

**前端面試匯總VUE(二)**

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

0條評(píng)論

Nino

男|高級(jí)講師

TA的文章

10g.biz九月促銷(xiāo)：美國(guó)站群首月半價(jià),香港獨(dú)服1.5折;香港+美國(guó)CN2 GIA線路云服務(wù)器$2

CSS3幀動(dòng)畫(huà)

css--布局

思否網(wǎng)站隨屏幕大小自動(dòng)發(fā)生變化

移動(dòng)端網(wǎng)頁(yè)布局適配rem方案小結(jié)

學(xué)習(xí)JavaScript的原型筆記

javascript 異步編程

解決<el-checkbox-group> 數(shù)據(jù)與UI更新不同步的坑

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

理解vue中的組件（二）

這是一個(gè)定義的下拉框

這是一個(gè)定義的下拉框

這是一個(gè)定義的下拉框

{{title}}

{{title}}

{{title}}

{{title}}

相關(guān)文章

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

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！