Vue元件化程式設計
2.1 模組與元件、模組化與元件化
2.1.1. 模組
理解: 向外提供特定功能的 js 程式, 一般就是一個 js 檔案
為什麼: js 檔案很多很複雜
作用: 複用 js, 簡化 js 的編寫, 提高 js 執行效率
2.1.2. 元件
理解: 用來實現區域性(特定)功能效果的程式碼集合(html/css/js/image.....)
為什麼: 一個介面的功能很複雜
作用: 複用編碼, 簡化專案編碼, 提高執行效率
2.1.3. 模組化
當應用中的 js 都以模組來編寫的, 那這個應用就是一個模組化的應用。
2.1.4. 元件化
當應用中的功能都是多元件的方式來編寫的, 那這個應用就是一個元件化的應用,。
2.2 非單檔案元件
2.2.1. Vue中使用元件的三大步驟
-
定義元件(建立元件)
-
註冊元件
-
使用元件(寫元件標籤)
一、如何定義一個元件？
使用 Vue.extend(配置物件) 建立，其中 配置物件 和new Vue(配置物件)時傳入的那個幾乎一樣，但也有點區別；
區別如下：
1.el不要寫，為什麼？ ——— 最終所有的元件都要經過一個vm的管理，由vm中的el決定服務哪個容器。
2.data必須寫成函式，為什麼？ ——— 避免元件被複用時，資料存在引用關係。
備註：使用template可以配置元件結構。
二、如何註冊元件？
-
區域性註冊：靠
new Vue({components:{'元件名':元件}}) -
全域性註冊：靠
Vue.component('元件名',元件)
三、編寫元件標籤：
<school></school>
2.2.2. 幾個注意點
1.關於元件名:
一個單片語成：
第一種寫法(首字母小寫)：school
第二種寫法(首字母大寫)：School
多個單片語成：
第一種寫法(kebab-case命名)：my-school
第二種寫法(CamelCase命名)：MySchool (需要Vue腳手架支援)
備註：
(1).元件名儘可能迴避HTML中已有的元素名稱，例如：h2、H2都不行。
(2).可以使用 name 配置項指定元件在開發者工具中呈現的名字。
2.關於元件標籤:
第一種寫法：<school></school>
第二種寫法：<school/>
備註：不用使用腳手架時，<school/> 會導致後續元件不能渲染。
3.一個簡寫方式：
const school = Vue.extend(配置物件) 可簡寫為：
const school = 配置物件
2.2.3. VueComponent
關於VueComponent：
1.元件本質是一個名為VueComponent的建構函式，且不是程式設計師定義的，是Vue.extend生成的。
2.我們只需要寫<school></school>，Vue解析時會幫我們建立school元件的例項物件，
即Vue幫我們執行的：new VueComponent(options)。
3.特別注意：每次呼叫Vue.extend，返回的都是一個全新的VueComponent！！！！
4.關於this指向：
(1).元件配置中：
data函式、methods中的函式、watch中的函式、computed中的函式 它們的this均是【VueComponent例項物件】。
(2).new Vue(options)配置中：
data函式、methods中的函式、watch中的函式、computed中的函式 它們的this均是【Vue例項物件】。
5.VueComponent的例項物件，簡稱vc（也可稱之為：元件例項物件）。
Vue的例項物件，簡稱vm。
6.vc 與 vm 的區別：
vc有的vm都有，但是vc是沒有 el 的！且 vc 的data要寫成函式式
7.元件在vm中：
重要的內建關係
VueComponent.prototype.__proto__ === Vue.prototype
為什麼要有這個關係：
讓元件例項物件（vc）可以訪問到 Vue原型上的屬性、方法
2.3. 單檔案元件
一個 .vue 檔案的組成(3 個部分)
- 模板頁面
<template>
頁面模板
</template>
- JS 模組物件
<script>
export default {
data() {return {}},
methods: {},
computed: {},
components: {}
}
</script>
- 樣式
<style>
樣式定義
</style>
基本使用
-
引入元件
-
對映成標籤
-
使用元件標籤