Vue指令之v-on的縮寫和事件修飾符事件修飾符：
.stop 阻止冒泡
.prevent 阻止預設事件
.capture 新增事件偵聽器時使用事件捕獲模式
.self 只當事件在該元素本身（比如不是子元素）觸發時觸發回撥
.once 事件只觸發一次

Vue指令之v-model和雙向資料繫結簡易計算器案例HTML 程式碼結構

<div id="app">

    <input type="text" v-model="n1">

    <select v-model="opt">

      <option value="0">+</option>

      <option value="1">-</option>

      <option value="2">*</option>

      <option value="3">÷</option>

    </select>

    <input type="text" v-model="n2">

    <input type="button" value="=" v-on:click="getResult">

    <input type="text" v-model="result">

  </div>
 

Vue例項程式碼：

// 建立 Vue 例項，得到 ViewModel

    var vm = new Vue({

      el: '#app',

      data: {

        n1: 0,

        n2: 0,

        result: 0,

        opt: '0'

      },

      methods: {

        getResult() {

          switch (this.opt) {

            case '0':

              this.result = parseInt(this.n1) + parseInt(this.n2);

              break;

            case '1':

              this.result = parseInt(this.n1) - parseInt(this.n2);

              break;

            case '2':

              this.result = parseInt(this.n1) * parseInt(this.n2);

              break;

            case '3':

              this.result = parseInt(this.n1) / parseInt(this.n2);

              break;

          }

        }

      }

    });
 

在Vue中使用樣式使用class樣式陣列

<h1 :class="{red:true, italic:true, active:true, thin:true}">這是一個邪惡的H1</h1>

1. 陣列中使用三元表示式

    <h1 :class="['red', 'thin', isactive?'active':'']">這是一個邪惡的H1</h1>

1. 陣列中巢狀物件

    <h1 :class="['red', 'thin', {'active': isactive}]">這是一個邪惡的H1</h1>

1. 直接使用物件

    <h1 :class="{red:true, italic:true, active:true, thin:true}">這是一個邪惡的H1</h1>
 

使用內聯樣式

1. 直接在元素上通過 :style 的形式，書寫樣式物件

    <h1 :style="{color: 'red', 'font-size': '40px'}">這是一個善良的H1</h1>

1. 將樣式物件，定義到 data 中，並直接引用到 :style 中

- 在data上定義樣式：

    data: {
            h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
    }

- 在元素中，通過屬性繫結的形式，將樣式物件應用到元素中：

    <h1 :style="h1StyleObj">這是一個善良的H1</h1>

1. 在 :style 中通過陣列，引用多個 data 上的樣式物件

- 在data上定義樣式：

    data: {
            h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
            h1StyleObj2: { fontStyle: 'italic' }
    }

- 在元素中，通過屬性繫結的形式，將樣式物件應用到元素中：

    <h1 :style="[h1StyleObj, h1StyleObj2]">這是一個善良的H1</h1>