import Vue from ?'vue' ? ? ? ? 表示引入了vue這個庫并賦值給了Vue; ?類似require
new Vue({
? ? ? ? ?el:"#app",
? ? ? ? ? template:"<p>Hello Word! {{ word }}</p>"，
? ? ? ? ? data:{
? ? ? ? ? ? ? ? ? ?word: 'hello word'
? ? ? ? ? ?}
})
組件樹：
實現組件注冊和引入
全局注冊組件：
Vue.component('my-header',{
? ? ? ? template:"<p>this is my header</p>"
})
調用組件:
<my-header></my-header>
局部注冊：
注冊：
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:{ ? ? //局部注冊組件
? ? ? ? ? ? 'my-header':? ? myHeader
? ? ? ? }
})
