import Vue from ?'vue' ? ? ? ? 表示引入了vue這個(gè)庫(kù)并賦值給了Vue; ?類似require
new Vue({
? ? ? ? ?el:"#app",
? ? ? ? ? template:"<p>Hello Word! {{ word }}</p>"艇抠，
? ? ? ? ? data:{
? ? ? ? ? ? ? ? ? ?word: 'hello word'
? ? ? ? ? ?}
})
組件樹(shù)：
實(shí)現(xiàn)組件注冊(cè)和引入
全局注冊(cè)組件：
Vue.component('my-header',{
? ? ? ? template:"<p>this is my header</p>"
})
調(diào)用組件:
<my-header></my-header>
局部注冊(cè)：
注冊(cè)：
var myHeaderChild = {?
? ? ? ? template:'<p>i am a headerChild</p>'
}
var myHeader = {
? ? ? ?template:"this is my header"次洼，
? ? ? ?components:{
? ? ? ? ? ?'my-header-child' : myHeaderChild ?
? ? ? ?}
}
data: ?//組件賦值,這樣做避免了引用賦值
? ? ? ? function(){
? ? ? ? ? ?return:{f:1,d:2}
? ? ? ?}
new Vue({
? ? ? ? el:"#app",
? ? ? ? data:{
? ? ? ? ? ? ? word:"hello word"
? ? ? ? }
? ? ? ?components:{ ? ? //局部注冊(cè)組件
? ? ? ? ? ? 'my-header':? ? myHeader
? ? ? ? }
})
