Vue教程02：v-model、v-text、v-html

閱讀更多系列文章請訪問個人GitHub博客，示例代碼請訪問這裏。

v-model指令

示例代碼：/lesson2/01. v-model指令.html

v-model指令的做用是雙向綁定數據，它只能用於輸入組件，如input、textarea、select、radio等。 須要注意的是，經過v-model綁定的數據都爲字符串。

實現一個簡單的雙向綁定。

JavaScript：

let vm = new Vue({
  el: '#app', // 根元素或掛載點。
  data: {
    name: 'lee',
  }
})
複製代碼

HTML：

<div id="app">
  <input type="text" v-model="name">
  <p>{{name}}</p>
</div>
複製代碼

此時經過input修改數據，p標籤中的數據也會跟着改變，若是經過vm.name直接修改數據，input和p標籤中的數據也會改變，如此就實現了雙向綁定。

v-model改變了通訊方式

v-model讓View層與Model層之間的通訊再也不須要經過Controller進行，這裏的Controller指的是用戶的代碼，而不是Vue的底層代碼。

v-text、v-html指令

示例代碼：lesson02/02. v-text、v-html指令.html

v-text與{{}}效果相同，若是傳入的是標籤會直接轉換爲字符串輸出。 v-html至關於innerHtml，會將傳入的字符串轉換成HTML輸出。

JavaScript：

let vm = new Vue({
  el: '#app', // 根元素或掛載點。
  data: {
    name: '<strong>lee</strong>',
  }
})
複製代碼

HTML：

<div id="app">
  <div v-text="name"></div>
  <div v-html="name"></div>
</div>
複製代碼