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

[chencl1986]

阅读更多系列文章请访问我的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>