<span v-text="msg"></span>
  <!--效果等同於-->
  <!--v-text 的權重高於 {{}}-->
  <span>{{msg}}</span>

  <div v-html="html"></div>

  <!--show 的值會直接影響 div 在文件中是否顯示-->
 

  <div v-show="show"></div>

  <!--status 的值會直接影響 div 在文件中是否存在-->
  <div v-if="status"></div>

  <div v-if="flag == 1">1</div>
  <!--必須跟 v-if 或者 v-else-if 元素後面-->
  <div v-else-if="flag == 2">2</div>

  <div
 
 v-if="flag == 1">1</div>
  <div v-else-if="flag == 2">2</div>
  <!--必須跟 v-if 或者 v-else-if 元素後面-->
  <div v-else>2</div>

  <!--
    data = 3 
    結果會生成 3 個 div，
    value 的值分類為 1, 2, 3 
    index 的值分別為 0, 1, 2
  -->
  <div
 
 v-for="(value, index) in data">
    <span v-text="value"></span>
    <span>{{index}}</span>
  </div>
  <!--也可以這樣寫-->
  <div v-for="value in data">
    <span v-text="value"></span>
  </div>

  <!--
    data = "abc" 
    結果會生成 data.length 個 div，
    value 的值分類為 a, b, c 
    index 的值分別為 0, 1, 2
  -->
  <div v-for="(value, index) in data">
    <span v-text="value"></span>
    <span>{{index}}</span>
  </div>   
  <!--也可以這樣寫-->
  <div v-for="value in data">
    <span v-text="value"></span>
  </div>

  <!--
    data = {name: 'Tom', age: 18} 
    結果會生成 data 屬性個數 個 div，
    value 的值分類為 Tom, 18 
    key 的值分別為 name, age
  -->
  <div v-for="(value, key) in data">
    <span v-text="key"></span>
    <span>{{value}}</span>
  </div>
  <!--也可以這樣寫-->
  <div v-for="value in data">
    <span v-text="value"></span>
  </div>

  <!--
    data = [{name: 'Tom', age: 18}, {name: 'Jack', age: 20}] 
    結果會生成 data.length 個 div，
    obj 的值分類為 data[0], data[1] 
    index 的值分別為0, 1
  -->
  <div v-for="(obj, index) in data">
    <span v-text="JSON.stringify(obj)"></span>
    <span>{{index}}</span>
  </div>    
  <!--也可以這樣寫-->
  <div v-for="obj in data">
    <span v-text="JSON.stringify(obj)"></span>
  </div>    

  <!--click事件直接繫結一個方法-->
  <button v-on:click="say1">say1</button>
  <!--縮寫方式-->
  <!--click事件使用內聯語句-->
  <button @click="say2('呼叫了 say2', $event)">say2</button>     

  <img v-bind:src="'imgs/red.jpg'" />
  <!--縮寫方式-->
  <img :src="'imgs/yellow.jpg'" />

  <!--僅限於表單元素，雙向繫結-->
  <input type="text" v-model="mess"/>

  <!--{{}} 不編譯，當字串輸出-->
  <span v-pre>{{mess}}</span>

  <!--
    mess = 'abc'
    span 還沒被 vue 解析的時候會顯示 {{mess}}
    解析後會顯示 123
    用於解決這兩個轉換的過程不友好的顯示
    尤其是在頁面載入過慢的情況很容易出現這種情況
  -->
  <span v-cloak>{{mess}}</span>

  <!--內容只解釋一次，當改變 mess 時不會再次對映到 span-->
  <span v-once>{{mess}}</span>