- 首先用js的new關(guān)鍵字實(shí)例化一個(gè)vue
- el: vue組件或?qū)ο笱b載在頁(yè)面的位置，可通過(guò)id或class或標(biāo)簽名
- template: 裝載的內(nèi)容厚骗。HTML代碼/包含指令或者其他組件的HTML片段，template將是我們使用的模板
- data: 數(shù)據(jù)通過(guò)data引入到組件中
在組件中的data要以函數(shù)的形式返回?cái)?shù)據(jù)，當(dāng)不同的界面用了同一個(gè)組件時(shí)，
才不會(huì)因?yàn)闉橐粋€(gè)組件的值發(fā)生改變而改變其他頁(yè)面的內(nèi)容歧蕉。
data () {
return {
......
}
}
- computed 計(jì)算屬性，用于簡(jiǎn)單的運(yùn)算酗昼，會(huì)保留緩存廊谓，當(dāng)相關(guān)依賴沒(méi)有發(fā)生改變時(shí)多次訪問(wèn)computed中的函數(shù)時(shí)，立即返回之前的計(jì)算結(jié)果麻削，不會(huì)再次調(diào)用函數(shù)獲得數(shù)據(jù)
- methods 方法/函數(shù) 沒(méi)有緩存，每訪問(wèn)一次調(diào)用一次函數(shù)
-
watch 監(jiān)聽(tīng)vue的變量春弥，每當(dāng)變量被改動(dòng)的時(shí)候都去執(zhí)行特定的操作呛哟。
<input type="text" v-model="myVal">
export default {
components: {
componentA: componentA
},
data () {
return {
myVal: ''
}
}
watch: {
myVal: function (val, oldVal) {
console.log(val, oldVal)
}
}
}
在文本框中隨意輸入123abd的過(guò)程中，控制臺(tái)輸出了文本框中的當(dāng)前值和修改前的值匿沛。
- props 傳遞數(shù)據(jù)扫责，讓子組件使用父組件的數(shù)據(jù)。
接受兩種類型的值逃呼。
①數(shù)組props: ['first' , 'sceond',...]
②對(duì)象
props: {
'number-to-do' : Number, //在html中傳過(guò)來(lái)的都是字符串鳖孤，所以這里可能會(huì)報(bào)錯(cuò)
'second': [Number, String, Object] //接受的類型者娱，可為多個(gè)。
}
