老規矩，先回顧一下上回的重點：

1.對于input框，若為單選框，如果沒有對其設置value，那么其checked的值將在true Or false之間切換；如果設置了value，那么將會切換value值

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

3.option如果沒有設置value，那么渲染的值就為option中的內容

4.各類修飾器，詳情見上回分解

回顧完上期的重點，我們來看一下今天的內容，之前幾期我們對vue的基礎進行了詳細的學習；現在我們來看一看組件的知識：

?

組件其實就是把交互功能模塊獨立出來，方便重復使用，形象一點說就好比是HTML中的公共樣式；js中的方法。

進入正題，那么我們該如何寫一個組件呢，上代碼：

Vue.component ( ‘ my-component ’ ,{

　　template: ' <div> c總，不要翻水水a </div> '

})

　　new Vue({

　　　　el:' #nubiya ',

})

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

<div id=" nubiya ">

　　<template></template>

</div>

// ?=> ?

<div id=" nubiya ">

　　<div>c總，不要翻水水a</div>

</div>

需要注意的是：

vue組件要寫在前面，vue實例化要寫在后面，不然就會報錯；同時，組件只在vue作用域內有效，也就是在id為 nubiya 的結構下。

上面我們所認識的是 全局組件，也就是說，不管有多少個vm，全局組件都會在這些vm中生效；比如說這樣：

<div id=" nokia ">

　　<o-template></o-template>

</div>

<div id=" nokia2 ">

　　<o-template></o-template>

</div>

?

Vue.component( 'o-complate' ,{

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

} )

vm1=new Vue({

　　el:' nokia '

})

vm2=new Vue({

　　el:' nokia2 '

})

?

//那么將會輸出兩條一樣的 ?" c總，翻個香蕉船啊 "

?

現在我們來講一講局部組件：

var huawei ={

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

}

vm = new Vue({

　　el:' oppo '，

　　components:{

　　　　' o-complate ':huawei

}

})

?

//可以看到這個地方，我們把o-complate放在了vm對象里面，那么o-complate只能在vm作用域內，也就是id為oppo的結構內；

//同時需要注意的是： 這個地方huawei其實就是一個參數對象。

?

這里需要插播一個小細節：

dom在組件中放的位置其實是有規定的；就像ul和li之間不能加其他標簽一樣，如果在組件中這樣寫：

<table>

　　<xiaomi></xiaomi>

</table>

//這樣是會報錯的；

不過vue也提供了一種方法：

<table>

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

</table>

//is屬性可以保留html原有標簽和原本的屬性。

?

現在來看一下，我們早有接觸的data屬性：

Vue.component(' meizu ',{

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

　　data:{

　　　　message:' hello world '

}

})

//這種寫法，顯然是錯誤的~~~

那么正確的應該怎樣呢？ ?如下：

Vue.component( ' meizu ',{

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

　　data:function(){

　　　　return {message:' hello '}

}

} )

//這里需要注意的是組件中的data必須要用回調函數

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>

//注意：這個地方 3個button的點擊事件是共享的，但是在某些時候，我們需要3個按鈕獨立，所以我們可以這樣寫：

data:function(){

　　return:{

　　　　counter:0

}

}

?

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

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

?

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

轉載于:https://www.cnblogs.com/fangmc/p/6597621.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。