vue的元件化程式設計（2022-04-23學習筆記）

子產品的含義

元件的含義

子產品化

元件化

非單檔案元件和單檔案元件

一個.vue都是一個單檔案元件，我們都使用單檔案元件。

非單檔案元件是，我們在一個html結構中有很多個元件。

建立元件

元件在建立的時候從來不說為誰服務。

在元件中，​

​data​

​隻能寫成函數的形式。

假如我們使用的是對象，指向很多不同的地方，每個地方修改所有地方都會修改。

我們寫成函數的形式，每一次應用元件，都是給我們傳回一個全新的對象，修改對象與别的元件互不影響。

使用元件：建立元件—》注冊元件—》使用元件。

元件的屬性名和屬性值我們最好寫成一樣的。

有資料有結構的元件：

總結

元件命名

1. 純小寫的字母
2. 首字母大寫，其餘字母小寫
3. 多個單詞之間加‘ - ’，注意加引号
4. 多個單詞每個單詞的首字母都大寫，其餘字母小寫，這隻能在腳手架的環境中寫，html中直接引入vue.js不支援

命名總結

有些時候，我們需要定義元件的時候就命名。大型項目中我們會命名。

如果隻是建立一個對象，底層自己會調用​

​extend​

​。

元件的嵌套

兩個元件形成父子關系。

注冊給誰就在誰的結構裡寫。

vm隻管理一個元件app。

容器裡面幹幹淨淨，我們在注冊元件​

​app​

​​的時候也寫在​

​vm​

​的代碼裡面。

VueComponent

元件的本質就是一個構造函數。

​

​vm​

​​和​

​vc​

​是不一樣的。

重要的内置關系

兩者全部指向一個原型對象。

d：Demo的執行個體對象。有隐式原型屬性。

Demo：構造函數是顯示原型屬性。

vue和VueComponent的關系

vue做了一件事，修改了原型對象的原型對象。

單檔案元件

.vue檔案。

我們要浏覽器識别我們的.vue檔案。

1. 使用webpack搭建一個工作流
2. 使用vue的腳手架（vue使用webpack搭建的環境）

.vue檔案的命名方式

推薦使用兩種。

.vue檔案

使用插件高亮我們的代碼。

元件需要引入，是以我們要将元件暴露出去。

分别暴露——

統一暴露——

預設暴露——

我們一般喜歡預設暴露，引入比較簡單。

預設暴露的簡寫形式——

我們盡量給元件取一個名字——

快捷鍵直接調出來——

在App.vue中，ES6中的子產品化的引入——

注冊元件——

main.js

入口檔案.

index.html

App的兩種寫法：