Vue.js 模板語法

1.大括號語法插值

(1)使用 {{}} 將變量包裹起來，vue會將變量的值解析爲普通文本，而非 HTML 代碼
(2)這個行爲是響應式的，動態修改 {{}} 中數據的值，相關Dom的內容也會發生改變

<div>{{msg}}</div>
<div>{{html}}</div>

data() {
  return {
    msg:"good day",
    html:"<h2>我是h2</h2>"
  }
}

渲染結果：

2.v-html/v-text指令

v-html指令至關於對當前標籤元素中的innerHTML屬性進行賦值
v-text指令至關於對當前標籤元素中的innerText屬性進行賦值

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

data() {
  return {
    msg:"good day",
    html:"<h2>我是h2</h2>"
  }
}

渲染結果：

3.v-bind 爲標籤的屬性綁定變量

(1)通常標籤屬性的值解析爲文本，當使用v-bind指令時，則屬性的值解析爲vue中定義的變量
(2)v-bind能夠簡寫成:

<!-- msg值爲good day -->
<div v-bind:title="msg">你好</div>
<!-- 簡寫 -->
<div :title="msg">世界</div>

渲染結果：

<div title="good day">你好</div>
<div title="good day">世界</div>

4.v-model 雙向數據綁定

前面的指令v-html/v-text/v-bind實現的數據綁定是單向的，即 數據 -> 視圖（視圖會響應數據的變化）
而v-model能夠實現雙向數據綁定，除了視圖會響應數據的變化外，視圖層的變化也會致使data中數據的變化

(1)文本框和文本域將值綁定到value屬性上，同時監聽input事件，將input框的值同步至data對應的數據上
(2)單選框和複選框也是將值綁定到value屬性，同時監聽change事件，與文本框不一樣的是，它只綁定checked屬性爲true的元素。單選框綁定是一個數據，而c複選框綁定一個數組
(3)下拉菜單綁定select標籤的value屬性，並監聽change事件

<template>
<div id="app">
    <h4>文本框的值爲{{msg}}</h4>
    <h4>單選框的值爲{{gender}}</h4>
    <h4>複選框的值爲
        <span v-for="item in hobby" :key="item"> {{item}} </span>
    </h4>
    <h4>選中的城市爲{{city}}</h4>
    <h4>文本域的值爲{{content}}</h4>
    <input type="text" v-model="msg">
    <div>性別：
        <input type="radio" name="gender" v-model="gender" value="man">男
        <input type="radio" name="gender" v-model="gender" value="women">女
    </div>
    <div>
        愛好
        <input type="checkbox" name="hobby" v-model="hobby" value="電影">電影
        <input type="checkbox" name="hobby" v-model="hobby" value="音樂">音樂
        <input type="checkbox" name="hobby" v-model="hobby" value="游泳">游泳
    </div>
    <div>
        <select v-model="city">
            <option value="" disabled>請選擇一個城市</option>
            <option value="020">廣州</option>
            <option value="0755">深圳</option>
            <option value="021">上海</option>
        </select>
    </div>
    <div>
        <textarea v-model="content" cols="30" rows="10"></textarea>
    </div>
</div>
</template>

<script>
export default {
  data() {
    return {
      msg:"good day",
      gender:"man",
      hobby:[],
      city:"",
      content:""
    }
  }
}
</script>

5.JavaScript 表達式

對於全部的數據綁定，Vue.js 都提供了徹底的 JavaScript 表達式支持

<div id="app">
    <div v-html="5+10"></div>
    <p>{{10+30}}</p>
    <p>{{num>10? 'YES' : 'NO'}}</p>
    <p>{{ msg.split('').reverse().join('') }}</p>
</div>