1.建立元件構造器
2.註冊元件
3.使用元件
>
>
cpn>
div>
>
// 1.建立元件構造器物件
const cpnc = vue.
extend()
;// 2.註冊元件(標籤名,元件構造器)
vue.
component
("cpn"
,cpnc)
newvue()
script
>
各步驟的含義:
1.vue.extend():
2.vue.component():
全域性元件和區域性元件
1.全域性元件:通過vue.component註冊元件
2.區域性元件:在建立的vue例項中註冊元件
components:
})父元件與子元件
>
>
cpn2
>
div>
>
// 建立第乙個元件構造器(子元件)
const cpnc1 = vue.
extend()
// 建立第二個元件構造器(父元件)
const cpnc2 = vue.
extend(}
)new
vue(})
script
>
元件註冊語法糖:全域性元件
>
>
cpn1
>
div>
>
vue.
component
('cpn1',)
newvue()
script
>
元件註冊語法糖:區域性元件
new vue(
}})
由於將html標籤與js**寫在一起會顯得**比較亂,所以可以使用以下寫法:
"cpn"
>
>
>
我是標題h2
>
>
哈哈哈p
>
div>
template
>
>
// 註冊全域性元件
vue.
component
('cpn',)
newvue()
script
>
Vue元件化開發
1 模組化 模組化開發是從 邏輯角度來劃分的。2 元件化 是從ui介面角度來劃分的。使用標籤形式引入元件 mycom div 建立元件第一種方式 vue.component mycom 建立乙個vue例項 var vm newvue methods script body 使用標籤形式引入元件 my...
Vue元件化開發
前言 1 全域性元件註冊語法 vue.comonent 元件名稱,2 元件的用法 3 元件註冊注意事項 4 元件的命名方式 vue.component my component vue.component mycomponent 5 區域性元件註冊 var componenta var compon...
VUE元件化開發
vue.component 元件名稱,1 建立元件構造器 const cpnc vue.extend 2 註冊元件 全域性元件 vue.component my cpn cpnc 3 使用元件 區域性元件 components 註冊的語法糖 1.註冊全域性元件 vue.component cpn1 ...