【Vue.js 學習筆記】02. 基礎 Vue 概述

前言

先來了解 Vue 基礎吧！

本節內容包含下述子章節：

應用程式建立
雙向綁定的資料與 MVVM 的概念
v-bind 動態屬性指令
v-for 動態產生多筆資料於畫面上
使用 v-on 來操作頁面行為
預先定義資料狀態的重要性
透過修飾符，讓 v-on 操作更簡單
:class 動態切換 className
computed 運算功能
Vue 表單與資料的綁定
元件基礎概念
章節測驗

應用程式建立

Vue 的引入跟 jQuery 一樣，版本一樣有壓縮版本跟開發人員版本，這裡就不多贅述。當引入好 Vue 之後，我們就可以先來建

立第一個應用程式。

首先我們先在 script 的部分宣告一個新的應用程式

<script>
  var app = new Vue({ });
</script>

裡面會是一個物件，接著我們就要綁定網頁上的 DOM 元素，綁定時不一定要用 id 綁定，可綁定 class ，但建議使用 id ，

這時候頁面上的程式碼會變成如下:

<div id="app">
</div>

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

el 是應用程式與 Vue 綁定的方法，el 的值即是要綁定的元素，亦即 element (元素) 的縮寫。

接著我們想要在頁面上顯示 Hello World! ，於是我們再寫入一個 data 的方法，裡面也是物件

<div id='app'>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    text:  'Hello World!'
  }
})
</script>

接著我們在我們綁定的 DOM 元素上，寫入要顯示出來的文字，這裡是用兩個大括號包著在 data 內的 text ，這時候頁

面上就會顯示 Hello World! 。

<div id='app'>
  {{ text }}
</div>

接著我們來探討兩種情況：

我們想在網頁上新增第二個應用程式，是可行的嗎？
另外應用程式內還可以再包一個應用程式嗎(亦即巢狀撰寫)？

如果這時候，我們分別有兩個元素：

<div id="app">
    {{ text }}
</div>

<div id="app2">
    {{ text }}
</div>

<script>

    var app = new Vue({
        el: '#app',
        data: {
            text: 'Hello World!'
        }
    });

    var app2 = new Vue({
        el: '#app2',
        data: {
            text: 'Hello World!2'
        }
    })

</script>

會發現，頁面上分別會顯示 Hello World! 和 Hello World!2 ，所以兩個應用程式頁面上是可行的。

如果今天改成巢狀撰寫呢？

<div id="app">
    {{ text }}

    <div id="app2">
    {{ text2 }}
    </div>
</div>

<script>

    var app = new Vue({
        el: '#app',
        data: {
            text: 'Hello World!'
        }
    });

    var app2 = new Vue({
        el: '#app2',
        data: {
            text2: 'Hello World!2'
        }
    })

</script>

這時候就會發現，console 會跳錯誤出來，原因是因為 Vue 的應用程式是不可以使用巢狀的方式去建立的。

另外需要特別注意的是，我們在建立 Vue 的應用程式通常只會建立一個，但是你要建立兩個在同一個頁面上是可行的，

只要注意不能建立巢狀的應用程式。

雙向綁定的資料與 MVVM 的概念

上面我們建立應用程式的時候把資料呈現在頁面上的方法是使用兩個大括號包覆的方式，如下：

<div id="app">
    {{ text }}
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            text: 'Hello World!'
        }
    })
</script>

以下還有幾種方法我們可以把資料呈現在頁面上，並實現所謂的 MVVM 的概念。

Vue 實際上並非採用 MVVM 的概念，它僅受到 MVVM 啟發的架構。但操作上仍然是以資料 Model 為中心，

畫面 view 跟資料 Model 是雙向綁定的。在資料變動的同時 VM 就會去控制視圖，反之，若從 UI 更改相關資料，

VM 則會通知 Model 改寫資料。

如果要將 data 中的字串綁定至 DOM 上可使用下列方法：

v-model

在 HTML 上新增一個 input 元素，並綁上一個 Vue 的指令 v-model ，這時候頁面上的 input 欄位也會有文字，

這是在 input 欄位顯示資料的方法之一。

<div id="app">
    {{ text }}
    <input type="text" v-model="text">
</div>

v-text

另外一種方法，我們可以在頁面上直接新增一個 HTML 標籤，並下一個 v-text 的指令，我們就能把資料帶進標籤內。

<div id="app">
    {{ text }}
    <input type="text" v-model="text">
    <div v-text="text"></div>
</div>

v-html

除了把文字資料包覆進去，我們也可以包覆 HTML　標籤進去，這時候就要改成 v-html 的指令，

我們新增 span 標籤進去 data 內的 text 的值，就會發現標籤也一起被帶進去了。

<div id="app">
    {{ text }}
    <input type="text" v-model="text">
    <div v-html="text"></div>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            text: '<span>Hello World!</span>'
        }
    })
</script>

v-bind 動態屬性指令

接下來要來介紹一個新的指令 v-bind，它是用來綁定 HTML 標籤的屬性。

照慣例， Vue 的架構如下：

<div id="app">
    <img src="" alt="">
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            imgSrc: 'https://images.unsplash.com/photo-1479568933336-ea01829af8de?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d9926ef56492b20aea8508ed32ec6030&auto=format&fit=crop&w=2250&q=80'
        }
    })
</script>

我們在 data 內新增了一個 imgSrc 的變數，並放置圖片的正確路徑，但是要如何把這個資料綁上去？

這時候在頁面上我們就要針對 img 標籤的 src 屬性下 v-bind 指令，並把 imgSrc 變數代入 src 屬性的值。

<div id="app">
    <img v-bind:src="imgSrc" alt="">
</div>

這時候就會發現，圖片會正常顯示了，假設我們還想新增 class ，則可以繼續在 data 內新增：

<script>
    var app = new Vue({
        el: '#app',
        data: {
            imgSrc: 'https://images.unsplash.com/photo-1479568933336-ea01829af8de?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d9926ef56492b20aea8508ed32ec6030&auto=format&fit=crop&w=2250&q=80',
            className: 'img-fluid'
        }
    })
</script>

則 img 標籤上繼續綁定 class 這個屬性，並把在 data 內新增的 className 變數代入進去

<div id="app">
    <img v-bind:src="imgSrc" v-bind:class="className" alt="">
</div>

其中，img-fluid 是 Bootstrap4 的語法，可以將圖片寬度限制在 100 % 的寬度內。

另外在後面章節有提到，v-bind:src="imgSrc" 可縮寫成 :src="imgSrc" 。

v-for 動態產生多筆資料於畫面上

接著要來介紹 v-for 和 v-if 這兩個指令，相當於 JavaScript 的 for 迴圈跟 if 判斷式，

一樣先把 Vue 的基本架構寫出來：

<div id="app">
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {

        }
    })
</script>

接著我們在 data 內新增 list 變數放置一個陣列

<script>
    var app = new Vue({
        el: '#app',
        data: {
            list: [
                {
                    name: '小明',
                    age: 16
                },
                {
                    name: '小華',
                    age: 38
                },
                {
                    name: '花花',
                    age: 24
                }
            ]
        }
    })
</script>

接著我們使用 v-for 這個指令逐一把每筆資料呈現在頁面上

<div id="app">
    <ul>
        <li v-for="item in list">
            {{ item.name }} 年齡是 {{ item.age }} 歲
        </li>
    </ul>
</div>

上述的 item 為自定義的變數，接著採用跟讀取物件屬性的方式搭配雙大括號放置在 <li> 內，這時候頁面上就會把所

有資料都渲染上去。

假設我們想要針對資料來做一些篩選，這時候就可以搭配 v-if 指令來做使用，假設我們想要篩選出年齡小於 25 歲的人，

這時候加上 v-if 判斷，把判斷式寫在 v-if 內，資料即可做篩選。

<div id="app">
    <ul>
        <li v-for="item in list" v-if="item.age < 25">
            {{ item.name }} 年齡是 {{ item.age }} 歲
        </li>
    </ul>
</div>

額外小補充，如果我們想在每筆資料上加上索引，則可以這樣寫：

<div id="app">
    <ul>
        <li v-for="(item, index) in list">
            {{ index }} {{ item.name }} 年齡是 {{ item.age }} 歲
        </li>
    </ul>
</div>

在自定義的變數加上 index 並渲染到標籤內即可。

若程式中 v-for 與 v-if 一起使用時，需要特別注意：

v-for 的優先權會高於 v-if 。
根據 style guide ，不建議 v-for 與 v-if 一起使用時，如有這種狀況建議使用 computed 屬性，讓其回傳過濾後的列表。

使用 v-on 來操作頁面行為

v-on 用於實做互動功能，主要用來綁定事件監聽器，以 click 事件來舉例：

<div id="app">
  <input type="text" class="form-control" v-model="text">
  <button class="btn btn-primary mt-1">反轉字串</button>
  <div class="mt-3">
    {{ newText }}
  </div>
</div>

<script>

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

</script>

先在 input 欄位內綁定 data 的 text 變數，newText 變數先定義起來放置在頁面上。

而現在要做的是點擊 button 元素時，會把輸入在 input 欄位內的文字做反轉，這時候會產生 click 事件，我們就可以

利用 v-on 指令綁定在 button 元素上，而 click 事件會觸發的 function 則寫在另外的 methods 內，如下：

<div id="app">
  <input type="text" class="form-control" v-model="text">
  <button class="btn btn-primary mt-1" v-on:click="reverseText">反轉字串</button>
  <div class="mt-3">
    {{ newText }}
  </div>
</div>

<script>

var app = new Vue({
  el: '#app',
  data: {
    text: '',
    newText: ''
  },
  methods: {
      reverseText: function () {
          consle.log('HELLO');
      }
  }
});

</script>

與以往不同的是， Vue 的結構不再只有 el 和 data 還多了 methods，而事件觸發的 function 就定義在 methods 裡面，而

button 元素綁定 v-on 指令，且為 click 事件，值則為觸發的 function 的名字，這時候我們可以用 console 來檢查一下，

是否為正確執行。

正確執行之後我們可以針對反轉字串的相關方法寫進去 function 內：

<script>
var app = new Vue({
  el: '#app',
  data: {
    text: '',
    newText: ''
  },
  methods: {
      reverseText: function(){
          this.newText = this.text.split('').reverse().join('');
      }
  }
});
</script>

比較值得注意的是，如果我們要讀取 data 內的資料時，需使用 this 這個關鍵字，再讀取他們的屬性，

至於 .split('').reverse().join(''); 就是反轉字串的方法。

另外在後面章節有提到， v-on:click="reverseText" 可縮寫成 @click="reverseText" 。

預先定義資料狀態的重要性

在 Vue 中若要操作它的資料，必須要先定義好它的資料結構。若未事先定義，將無法綁定資料內容，會得到該變數

is not define 的錯誤。且事前定義資料有利於程式的程式的維護，且有助於提升可讀性。

在寫程式時，若忘了在 data 定義該變數，但卻發現 UI 參考的到，資料也可以進行操作。是因為是在 created 時有進行過

一次初始化的動作。

請教老師這是為什麼，助教給了下列的回覆：

其實你可以把 data:{ } 看成是一個物件，而你在 created( ) 內執行的動作，就是幫這個物件新增了一個屬性叫 newText 並賦值 newText 。

透過修飾符，讓 v-on 操作更簡單

先前有講到 v-on 和 v-bind 指令， v-on 用在事件上，v-bind 用在綁定標籤的屬性上，而這些指令其實是有修飾符

可以用的，意指縮寫。

拿前面章節的程式碼來做說明：

<div id="app">
  <input type="text" class="form-control" v-model="text">
  <button class="btn btn-primary mt-1" v-on:click="reverseText">反轉字串</button>
  <div class="mt-3">
    {{ newText }}
  </div>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    text: '',
    newText: ''
  },
  methods: {
      reverseText: function(){
          consle.log('HELLO');
      }
  }
});
</script>

上述是最原始的方式，假設我們要在 button 元素的 v-on 上用上修飾符：

<div id="app">
  <input type="text" class="form-control" v-model="text">
  <button class="btn btn-primary mt-1" @click="reverseText">反轉字串</button>
  <div class="mt-3">
    {{ newText }}
  </div>
</div>

可以發現被 @ 代替了 v-on:

再來如果我們想要 input 元素的 class 也用上 v-bind 添加並用上修飾符的話，則會變成如下：

<div id="app">
  <input type="text" :class="className" v-model="text">
  <button class="btn btn-primary mt-1" @click="reverseText">反轉字串</button>
  <div class="mt-3">
    {{ newText }}
  </div>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    text: '',
    newText: '',
    className: 'form-control'
  },
  methods: {
      reverseText: function(){
          consle.log('HELLO');
      }
  }
});
</script>

可以發現本來應該是 v-bind:class="className" 變成 :class="className" ，
v-bind 被 : 取代了。

再額外補充一點，按鈕元素有時候我們會用 a 標籤來撰寫

<a href="#" class="btn btn-primary" @click="reverseText">反轉字串</a>

但會發現 a 有預設 href 這個屬性的行為，當我們想要取消這個預設行為時，我們可以直接在 @click 後面加上 .prevent

意即 @click.prevent="reverseText" 這時候就會取消預設行為了。

關於 v-on 所提供的事件修飾符詳見官網文件，除了事件修飾符外還有鍵盤修飾符與滑鼠按鈕修飾符 … 等。

:class 動態切換 className

這裡來介紹在 Vue 動態加上 class ，一樣先把 Vue 的架構先撰寫出來，而目標是想點擊按鈕時會在 .box 自動加上 rotate

這個 class，再點擊一次時，會自動移除。

<div id="app">
    <div class="box"></div>
    <button class="btn btn-outline-primary">選轉物件</button>
</div>

<script>

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

</script>

不同於先前，我們這次在 data 內定義了一個 isTransform 的變數，並先給予 false 的值。

<div id="app">
    <div class="box" :class="{ 'rotate' : true }"></div>
    <button class="btn btn-outline-primary">選轉物件</button>
</div>

動態加上 class 的方式，如上

用 v-bind 綁上 class 屬性，接著裡面用物件的形式 { '要加入的 class 名字' : 判斷式 }

我們先在裡面放置 true 就會發現 .box 已經加上 .rotate 了

<div id="app">
    <div class="box" :class="{ 'rotate' : isTransform }"></div>
    <button class="btn btn-outline-primary">選轉物件</button>
</div>

如果改成我們的變數 isTransform 就會是 false 的結果，重點在於我們在點擊按鈕的時候要自動切換 true 和 false ，

這時候在按鈕內就可以增加 click 事件：

<div id="app">
    <div class="box" :class="{ 'rotate' : isTransform }"></div>
    <button class="btn btn-outline-primary" @click=" isTransform = !isTransform">選轉物件</button>
</div>

上面 isTransform = !isTransform 的意思是指，當為 true 時即改為 false ，反之。

computed 運算功能

computed 內的 function 內容，所相依的資料有產生變動時會被觸發，重新運算結果呈現於畫面上。

這邊 reverseText 一旦偵測到相依 this.text 資料有變動，也就是使用者於輸入框輸入文字時，v-model 就會改變

text 的內容，而 text 一旦改變就會觸發 reverseText 重新計算後並顯示於畫面上，因此可以及時到到反轉的結果。

<div id="app">
  <input type="text" class="form-control" v-model="text">
  <button class="btn btn-primary mt-1">反轉字串</button>
  {{ reverseText }}
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    text: '',
  },
  computed: {
    reverseText: function () {
      return this.text.split('').reverse().join('');
    }
  },
});
</script>

而在使用 v-on 來操作頁面行為一章中，我們使用 v-on:click="reverseText" ，這邊綁定 reverseText 則是一個 methods，

methods 是互動函式，需要觸發才會運作。

就我理解，若希望 UI 顯示隨資料立即更新，就用 computed ，若是由其他東西觸發再來更新 UI 的，則是使用 methods。

Methods 與 Computed 的使用情境

computed 是在監控資料更動後，重新運算結果呈現於畫面上，一般來說不會修改資料，只會回傳用於畫面呈現的資料
methods 就是互動的函式，需要觸發才會運作，會用來修改資料內容

效能

如果資料量大，computed 自然會比較慢，只要資料變動就會觸發，無形之中執行次數也會增加。

因此在大量資料時，會建議透過 methods 減少不必要的運算！

Vue 表單與資料的綁定

這篇要來介紹，基本常用的一些表單元素，與 Vue 的資料綁定時要如何做。

我們一樣先把 Vue 的架構寫出來，只是這次在 data 內新增多個變數來存放不同的表單元素資料：

<script>
var app = new Vue({
    el: '#app',
    data: {
        text: '',
        textarea: '',
        checkboxArray: [],
        checkbox1: false,
        selected: '',
        singleRadio: ''
    }
})
</script>

上述把 Vue 的資料變數都定義好了之後，我們就可以來跟表單元素做綁定。

首先是字串 string 的部分，一樣用 v-model 來綁定 text 這個變數

<div id="app">
  <h4>字串</h4>
  {{ text }}
  <input type="text" class="form-control" v-model="text">
</div>

再來是 textarea 元素，這裡也是使用 v-model 來綁定 textarea 這個變數

<div id="app">

  <h4>字串</h4>
  {{ text }}
  <input type="text" class="form-control" v-model="text">

  <hr>

  <pre>{{ textarea }}</pre>
  <textarea cols="30" rows="3" class="form-control" v-model="textarea"></textarea>

</div>

接下來就是 checkbox & radio 元素：

<div id="app">

  <h4>字串</h4>
  {{ text }}
  <input type="text" class="form-control" v-model="text">

  <hr>

  <pre>{{ textarea }}</pre>
  <textarea cols="30" rows="3" class="form-control" v-model="textarea"></textarea>

  <hr>

  <h4>Checkbox 與 Radio</h4>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="check1" v-model="checkbox1">
    <label class="form-check-label" for="check1">你要不要看電影</label>
  </div>

</div>

會發現這個 checkbox 也是用 v-model 來綁定資料，而綁定的是 checkbox1 這個變數。

不同於先前，checkbox 跟 radio 只有 true 和 false 這兩個值，

所以勾選了就是 true 取消勾選就會是 false，可以用 Vue 開發者工具查看。

接著是 checkbox 的多選：

<div id="app">
  <h4>字串</h4>
  {{ text }}
  <input type="text" class="form-control" v-model="text">

  <hr>

  <pre>{{ textarea }}</pre>
  <textarea cols="30" rows="3" class="form-control" v-model="textarea"></textarea>

  <hr>

  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="check2" v-model="checkboxArray" value="雞">
    <label class="form-check-label" for="check2">雞</label>
  </div>

  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="check3" v-model="checkboxArray" value="豬">
    <label class="form-check-label" for="check3">豬</label>
  </div>

  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="check4" v-model="checkboxArray" value="牛">
    <label class="form-check-label" for="check4">牛</label>
  </div>

  <p>晚餐火鍋裡有 <span v-for="item in checkboxArray">{{ item }}</span></p>

</div>

多選的 checkbox 我們是使用 checkboxArray 這個陣列資料變數來做綁定，我們要把我們勾選的多個值，

存進去一個陣列內，顯示在頁面上時，我們在用 v-for 迴圈去繞出來

接著是 radio 的單選：

<div id="app">
  <h4>字串</h4>
  {{ text }}
  <input type="text" class="form-control" v-model="text">

  <hr>

  <pre>{{ textarea }}</pre>
  <textarea cols="30" rows="3" class="form-control" v-model="textarea"></textarea>

  <hr>

  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="check2" v-model="checkboxArray" value="雞">
    <label class="form-check-label" for="check2">雞</label>
  </div>

  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="check3" v-model="checkboxArray" value="豬">
    <label class="form-check-label" for="check3">豬</label>
  </div>

  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="check4" v-model="checkboxArray" value="牛">
    <label class="form-check-label" for="check4">牛</label>
  </div>

  <p>晚餐火鍋裡有 <span v-for="item in checkboxArray">{{ item }}</span></p>

  <hr>

  <div class="form-check">
    <input type="radio" class="form-check-input" id="radio2" v-model="singleRadio" value="雞">
    <label class="form-check-label" for="radio2">雞</label>
  </div>

  <div class="form-check">
    <input type="radio" class="form-check-input" id="radio3" v-model="singleRadio" value="豬">
    <label class="form-check-label" for="radio3">豬</label>
  </div>

  <div class="form-check">
    <input type="radio" class="form-check-input" id="radio4" v-model="singleRadio" value="牛">
    <label class="form-check-label" for="radio4">牛</label>
  </div>

  <p>晚餐火鍋裡有 {{ singleRadio }}</p>
</div>

單選的 radio 元素，我們採用 singleRadio 這個資料變數，當我們勾選到那個選項時，會把值帶進這個變數內

顯示在頁面上時，跟字串的方式一樣。

最後是 select 元素：

<div id="app">
  <h4>字串</h4>
  {{ text }}
  <input type="text" class="form-control" v-model="text">

  <hr>

  <pre>{{ textarea }}</pre>
  <textarea cols="30" rows="3" class="form-control" v-model="textarea"></textarea>

  <hr>

  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="check2" v-model="checkboxArray" value="雞">
    <label class="form-check-label" for="check2">雞</label>
  </div>

  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="check3" v-model="checkboxArray" value="豬">
    <label class="form-check-label" for="check3">豬</label>
  </div>

  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="check4" v-model="checkboxArray" value="牛">
    <label class="form-check-label" for="check4">牛</label>
  </div>

  <p>晚餐火鍋裡有 <span v-for="item in checkboxArray">{{ item }}</span></p>

  <hr>

  <div class="form-check">
    <input type="radio" class="form-check-input" id="radio2" v-model="singleRadio" value="雞">
    <label class="form-check-label" for="radio2">雞</label>
  </div>

  <div class="form-check">
    <input type="radio" class="form-check-input" id="radio3" v-model="singleRadio" value="豬">
    <label class="form-check-label" for="radio3">豬</label>
  </div>

  <div class="form-check">
    <input type="radio" class="form-check-input" id="radio4" v-model="singleRadio" value="牛">
    <label class="form-check-label" for="radio4">牛</label>
  </div>

  <p>晚餐火鍋裡有 {{ singleRadio }}</p>

  <hr>

  <h4>Select</h4>
  <select name="" id="" class="form-control" v-model="selected">
    <option value="" disabled>--請選擇--</option>
    <option value="小明">小明</option>
    <option value="小美">小美</option>
  </select>
</div>

一樣用 v-model 綁定 selected 這個變數，當選擇到那個選項時，就會把那個選項的 value 帶進變數內，

一樣可用 Vue 的開發者工具查看。

若要避免使用者選取了下拉後的選項後，又選取到預設 default 的「–請選擇–」值，

可以在 option 的屬性中加上 disabled 。

以上就是常用的表單元素，跟 Vue 的資料做綁定。

元件基礎概念

每一個 Vue 元件都可以獨立儲存自己的狀態。為避免因使用同一個變數而在造成狀態混淆的狀況，會將它細分成各個元件，

在元件獨立控制自己的狀態。

定義 component 的方法如下：

Vue.component('元件名稱', {
  data: function () {  
    return {  
      count: 0  
    }  
  },
  template: `html 語法`

完整程式碼如下：

<div id="app">
  <div>
    你已經點擊 <button class="btn btn-outline-secondary btn-sm" v-on:click="counter += 1">{{ counter }}</button> 下。
    你已經點擊 <button class="btn btn-outline-secondary btn-sm" @click="counter += 1">{{ counter }}</button> 下。
    <counter-component></counter-component>
    <counter-component></counter-component>
    <counter-component></counter-component>
  </div>
</div>

<script>

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
  },
});

</script>

component 的元件名稱，這個元件名稱會是我們在 HTML 中所使用的元素標籤，按官方 style guide 建議元件名稱盡量

採用組合字，不使用一個單字，避免原生元素標籤衝突。

而 component 內部的寫法，其實與一般 Vue 元件寫法是一致的，唯一需要特別住要的是 data 在 component 內部是以

function 來回傳物件內容。

章節測驗

問題 1： v-bind 是用來綁定動態資料，那麼 v-on 指令是用來綁定什麼？

事件
資料
陣列

點我看答案


答案: 1

問題 2： v-bind 是不是用來綁定 “動態資料” 的屬性？

是
不是

點我看答案


答案: 1

問題 3： Vue 的應用程式資料

盡量不用預先定義
盡量可能的預先定義

點我看答案


答案: 2

問題 4：假設有一筆資料變數： path 如果要動態綁定資料在 HTML a 標籤上，以下何者正確？

1. <a href="{{ path }}">連結  
2. <a href="path">{{ path }} 連結  
3. <a :href="path">連結  
4. <a v-on:href="path">連結

點我看答案


答案: 3

問題 5：以下對應何者正確？

v-bind:class 等同於 :class
v-on:click 等同於 :click
以上皆正確

點我看答案


答案: 1

參考資料

Vue.js: 計算屬性 Computed｜Summer。桑莫。夏天