Vue元件化開發

2021-10-03 07:10:54 字數 1395 閱讀 1156

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 ...