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>
复制代码