老規(guī)矩，先回顧一下上回的重點(diǎn)：

1.對(duì)于input框，若為單選框，如果沒(méi)有對(duì)其設(shè)置value，那么其checked的值將在true Or false之間切換；如果設(shè)置了value，那么將會(huì)切換value值

2.而多選框和單選框有相同的原理，只是多選框是以數(shù)組的方式返回值

3.option如果沒(méi)有設(shè)置value，那么渲染的值就為option中的內(nèi)容

4.各類修飾器，詳情見(jiàn)上回分解

回顧完上期的重點(diǎn)，我們來(lái)看一下今天的內(nèi)容，之前幾期我們對(duì)vue的基礎(chǔ)進(jìn)行了詳細(xì)的學(xué)習(xí)；現(xiàn)在我們來(lái)看一看組件的知識(shí)：

?

組件其實(shí)就是把交互功能模塊獨(dú)立出來(lái)，方便重復(fù)使用，形象一點(diǎn)說(shuō)就好比是HTML中的公共樣式；js中的方法。

進(jìn)入正題，那么我們?cè)撊绾螌?xiě)一個(gè)組件呢，上代碼：

Vue.component ( ‘ my-component ’ ,{

　　template: ' <div> c總，不要翻水水a(chǎn) </div> '

})

　　new Vue({

　　　　el:' #nubiya ',

})

// 這就是一個(gè)最基本的組件；my-component是組件名；template后面跟的是組件需要渲染的內(nèi)容

<div id=" nubiya ">

　　<template></template>

</div>

// ?=> ?

<div id=" nubiya ">

　　<div>c總，不要翻水水a(chǎn)</div>

</div>

需要注意的是：

vue組件要寫(xiě)在前面，vue實(shí)例化要寫(xiě)在后面，不然就會(huì)報(bào)錯(cuò)；同時(shí)，組件只在vue作用域內(nèi)有效，也就是在id為 nubiya 的結(jié)構(gòu)下。

上面我們所認(rèn)識(shí)的是 全局組件，也就是說(shuō)，不管有多少個(gè)vm，全局組件都會(huì)在這些vm中生效；比如說(shuō)這樣：

<div id=" nokia ">

　　<o-template></o-template>

</div>

<div id=" nokia2 ">

　　<o-template></o-template>

</div>

?

Vue.component( 'o-complate' ,{

　　template:' <div>c總，翻個(gè)香蕉船啊</div> '

} )

vm1=new Vue({

　　el:' nokia '

})

vm2=new Vue({

　　el:' nokia2 '

})

?

//那么將會(huì)輸出兩條一樣的 ?" c總，翻個(gè)香蕉船啊 "

?

現(xiàn)在我們來(lái)講一講局部組件：

var huawei ={

　　template: ' <div>c總正在翻水水</div> '

}

vm = new Vue({

　　el:' oppo '，

　　components:{

　　　　' o-complate ':huawei

}

})

?

//可以看到這個(gè)地方，我們把o-complate放在了vm對(duì)象里面，那么o-complate只能在vm作用域內(nèi)，也就是id為oppo的結(jié)構(gòu)內(nèi)；

//同時(shí)需要注意的是： 這個(gè)地方huawei其實(shí)就是一個(gè)參數(shù)對(duì)象。

?

這里需要插播一個(gè)小細(xì)節(jié)：

dom在組件中放的位置其實(shí)是有規(guī)定的；就像ul和li之間不能加其他標(biāo)簽一樣，如果在組件中這樣寫(xiě)：

<table>

　　<xiaomi></xiaomi>

</table>

//這樣是會(huì)報(bào)錯(cuò)的；

不過(guò)vue也提供了一種方法：

<table>

　　<tr is=' xiaomi '></tr>

</table>

//is屬性可以保留html原有標(biāo)簽和原本的屬性。

?

現(xiàn)在來(lái)看一下，我們?cè)缬薪佑|的data屬性：

Vue.component(' meizu ',{

　　template: ' <div> abc </div> '

　　data:{

　　　　message:' hello world '

}

})

//這種寫(xiě)法，顯然是錯(cuò)誤的~~~

那么正確的應(yīng)該怎樣呢？ ?如下：

Vue.component( ' meizu ',{

　　template:' <div>abc</div> '

　　data:function(){

　　　　return {message:' hello '}

}

} )

//這里需要注意的是組件中的data必須要用回調(diào)函數(shù)

var data = { counter: 0 }

Vue.component('simple-counter', {
template: '<button v-on:click="counter += 1">{{ counter }}</button>',
data: function () {
return data
}
})
new Vue({
el: '#example-2'
})
<div id="example-2">
<simple-counter></simple-counter>
<simple-counter></simple-counter>
<simple-counter></simple-counter>
</div>

//注意：這個(gè)地方 3個(gè)button的點(diǎn)擊事件是共享的，但是在某些時(shí)候，我們需要3個(gè)按鈕獨(dú)立，所以我們可以這樣寫(xiě)：

data:function(){

　　return:{

　　　　counter:0

}

}

?

組件里的el屬性也要用閉包+return的寫(xiě)法。它定義組件的有效作用域。

Vue.component('simple-counter', {
el:function(){
return '#example'
},
template: '<button v-on:click="counter += 1">{{ counter }}</button>',
data: function () {
return data
}
})

?

OKOK~~~ ? JINTIANJIUDAOZHELILE~~~ ? ?goodnight~~~~~~~~

轉(zhuǎn)載于:https://www.cnblogs.com/fangmc/p/6597621.html

總結(jié)

以上是生活随笔為你收集整理的Vue学习之路---No.7（分享心得，欢迎批评指正）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。