014 vue的元件化開發

[a] 元件化開發

1. 元件化開發時vue.js中乙個重要思想

2. 元件的使用分三個步驟：

1. 建立元件構造器

2. 註冊元件

3. 使用元件

[b] 元件化的基本使用

1. 建立元件構造器

vue.extend()建立的是乙個元件構造器，通常在建立元件構造器時，傳入template代表我們自定義的元件的模板

該模板的內容就是要顯示的html**。這種寫法已經被淘汰了，使用更多的是後面的語法糖

const cpn = vue.extend()

//元件2

const cpn2 =vue.extend(

})//2. 註冊元件

//root元件

vue(,

components:

});view code

[e] 註冊元件的語法糖寫法

1. 註冊組建的語法糖

按照之前的元件使用方法，使用乙個元件需要三個步驟：建立元件構造器物件，註冊元件和使用元件

vue中為了簡化元件使用的過程，提供了語法糖的寫法，主要是省去了元件註冊vue.extend()的步驟，直接通過乙個物件來代替

2. 使用元件的常規寫法：

//

1. 建立元件構造器
const cpn =vue.extend()
//2. 註冊元件
vue.component("cpnc", cpn)
//3.使用元件
vue(,
});

3. 使用元件的語法糖寫法：

註冊全域性元件

//1，2. 註冊並註冊元件
vue.component("cpnc",)
//3.使用元件
vue(,
});註冊區域性元件：
vue(,
components:
}});

[f] 元件模板的抽離

1. 將模板內容寫在乙個單獨的標籤內部，script標籤新增行內屬性type="text/x-template"，通過id號繫結對應vue例項

示例**：

//

1. 建立元件模板
元件1的內容
//2. 註冊元件
vue.component("cpnc", )
//3.使用元件
vue(,
});        

2. 將模板內容寫在乙個單獨的標籤內，通過id號繫結對應的vue示例

示例**：

//

1. 建立元件模板
元件1的內容
//2. 註冊元件
vue.component("cpnc", )
//3.使用元件
vue(,
});

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元件化開發

1.建立元件構造器 2.註冊元件 3.使用元件 cpn div 1.建立元件構造器物件 const cpnc vue.extend 2.註冊元件 標籤名，元件構造器 vue.component cpn cpnc newvue script 各步驟的含義 1.vue.extend 2.vue.comp...