Vue 初心者筆記 #7 什麼是元件

介紹 Vue.js 元件的基礎概念

元件的基礎概念

什麼是元件?
元件跟畫面上的元素有什麼差別?

我們先來看看普通的元素是什麼好了

首先,下面是一個計數器的應用程式
點擊一次 button,counter 的次數就會 +1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="app">
<div>
你已經點擊了 <button class="btn btn-outline-secondary btn-sm" @click="counter += 1">{{ counter }}</button> 下。
</div>
</div>

<script>
var app = new Vue({
el: '#app',
data: {
counter: 0
},
});
</script>

這時候我們如果要再新增一個計數器
HTML 的 Code 勢必會變成以下這樣

1
2
3
4
5
6
7
8
<div id="app">
<div>
<!-- 計數器 1 號 -->
你已經點擊了 <button class="btn btn-outline-secondary btn-sm" @click="counter += 1">{{ counter }}</button> 下。
<!-- 計數器 2 號 -->
<button class="btn btn-outline-secondary btn-sm" @click="counter += 1">{{ counter }}</button>
</div>
</div>

但是直接多新增一個 button 的話會有個問題
就是點計數器 1 號的時候,計數器 2 號也會跟著 +1

因此如果要讓兩個 counter 分開計算的話
我們就要再新增一個 counter 的變數

可是這樣 vue 的程式碼會變很亂
(試想如果我們要做 5 個或 10 個計數器,就要新增 10 個變數)

這時候就會用到 vue 的元件化啦!

元件化

這邊就要介紹該怎麼 將元素轉為元件 了!

STEP 1:建立 Vue 元件

首先,我們要先建立元件
元件是建立在 Vue 裡面

以下是新增 Vue component 的範例程式碼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 建立元件
Vue.component('counter-component', {
data: function () {
return {
counter: 0,
};
},
template: `
<div>
<button class="btn btn-outline-secondary btn-sm" @click="counter += 1">{{ counter }}</button>
</div>
`,
});

var app = new Vue({
el: '#app',
data: {
counter: 0,
},
});

重點整理:

  • Vue.components 必須寫在 new Vue 前面

    因為 JavaScript 是依序執行的
    需要先定義元件,後面的程式碼才能讀取到

  • 建立的元件可自定義名稱
    Vue.component('counter-component', {});

  • 不同的地方:data 改使用 function
    data: function(){},

  • 規定:建立元件後,改成要用 function 來 return 資料
    (新增應用程式的話不需要使用 function)
    return{ counter: 0, }

  • 回傳一定要是物件
    counter: 0,

  • 反引號(ES 6 語法 - 定義字串內容)

STEP 2:呈現元件

剛才新增的 Vue 元件名稱是 counter-component(我們自定義的)

這個 counter-component 也是呈現在畫面上的標籤,也要寫在 HTML 中
(沒寫在 HTML 上的話,元件沒辦法呈現出來)

所以我們就在 HTML 上新增 Vue 元件

1
2
3
4
5
6
7
8
9
10
11
12
<div id="app">
<div>
<!-- 計數器 1 號 -->
你已經點擊了 <button class="btn btn-outline-secondary btn-sm" @click="counter += 1">{{ counter }}</button> 下。
<!-- 計數器 2 號 -->
<button class="btn btn-outline-secondary btn-sm" @click="counter += 1">{{ counter }}</button>
<!-- 新增 Vue 元件 -->
<counter-component></counter-component>
<counter-component></counter-component>
<counter-component></counter-component>
</div>
</div>

畫面上成功出現元件後
可以試著點擊看看原本的 button 與 Vue 元件

可以發現原本的兩個計數器還是一樣會連動
但是 Vue 的三個元件卻都是獨立的
也可以打開 Devtools 看看其中的差異!

總結

透過這個例子
我們可以知道 Vue 元件的概念與使用方式

Vue 元件可以減少我們撰寫上的重複性
也可以讓程式碼的可用性更高
認識之後真的覺得是一個相當實用的技巧 :P

以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫。