- 起名字：js使用駝峰命名法則html中使用需要用鏈接符-
- dom片段沒(méi)有代碼提示，沒(méi)有高亮顯示--vue單文件組件解決
- css只能寫(xiě)成行內(nèi)的--vue單文件組件解決
- template 包含一個(gè)根節(jié)點(diǎn)
- 組件是孤島请梢，無(wú)法直接訪問(wèn)外面的組件的狀態(tài)或者方法 --間接的組件通信來(lái)交流
- 所有自定義的組件data必須是一個(gè)函數(shù)纲辽，互不影響
- 所有的組件都在一起暑刃，太亂了 ---vue單文件組件解決
<body>
<div id="box">
<navbar></navbar>
<tabber></tabber>
<child></child>
</div>
<script>
// 1. 起名字：js使用駝峰命名法則html中使用需要用鏈接符-
// 2. dom片段沒(méi)有代碼提示慎颗，沒(méi)有高亮顯示--vue單文件組件解決
// 3. css只能寫(xiě)成行內(nèi)的--vue單文件組件解決
// 4. template 包含一個(gè)根節(jié)點(diǎn)
// 5. 組件是孤島悲酷，無(wú)法直接訪問(wèn)外面的組件的狀態(tài)或者方法 --間接的組件通信來(lái)交流
// 6. 所有自定義的組件data必須是一個(gè)函數(shù)粟关，互不影響
// 7. 所有的組件都在一起疮胖，太亂了 ---vue單文件組件解決
//全局組件
Vue.component("navbar", {
template: `
<div style="background: yellow;">
<button @click="handleBack()">返回</button>
<span>導(dǎo)航欄---{{myname}}</span>
<button @click="handleHome()">首頁(yè)</button>
<child></child>
</div>
`,
methods: {
handleBack(){
console.log("返回按鈕")
},
handleHome(){
console.log("首頁(yè)")
}
},
computed:{
},
watch:{
},
data(){
return{
myname:'xiaoming'
}
}
})
Vue.component('tabber',{
template:`
<div style="color:red;">
tabber
<child></child>
<tabberchild></tabberchild>
</div>
`,
components:{
//局部定義
"tabberchild":{
template:`<div>tabberchilder</div>`
}
}
})
//定義一個(gè)孩子組件
Vue.component("child",{
template:`
<div>child</div>
`
})
//根組件
new Vue({
el:'#box',
data:{
}
})
</script>
</body>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
