前言： vue.js 使用了基于 HTML 的模板语法，允许开发者声明的将 DOM 绑定至底层 vue 实例的数据。本文将介绍 vue.js 的数据绑定的语法和人指令的使用

vue 实例

在 vue 框架的每个页面都要创建一个 vue 实例，语法为 new Vue（），在创建 Vue 实例时，需要传入一个选项对象，该对象可以包含数据，方法，组件生命周期钩子等。

我们用的是 vue-cli 使用以下代码将组件作为模块的默认导出

export default {  name: 'App',  data() {    return {      message: 'HelloWorld',    };  },}

插值

数据绑定最常见的形式就是使用 Mustache 语法（双花括号）的文本插值

Mustache 标签会被替换成 vue 实例中的数据对象上 message 的属性值，只要绑定的对象是 message 属性发生了改变，插值处的内容就会被更新。除了绑定简单的属性值外，对于所有的数据绑定，vue 还提供了完全的 JavaScript 表达式支持。

在插值语法中使用 JavaScript 表达式

   <div>{{message}}</div>    <p>{{a+b}}</p>    <p>{{1 == 2 ? true:false}}</p>    <p>{{message.split('').reverse().join('')}}</p>

输出结果

指令

指令都是带有 v-前缀的特殊属性，其值限定为单个表达式。指令的作用是，当表达式的值发生改变时，将这个变化反映到 DOM 上例如下面代码周玲的 v-if 指令将根据表达式 show 的值的真假来决定插入 还是删除<p>元素

<p v-if="show">你能看到我吗</p>

一些指令还可以带有参数，在指令名称之后以“：”号表示，如 v-bind 和 v-on 指令。代码如下：

   <a v-bind:href="url">百度</a>    <button v-on:click="sayGreet">Greet </button>

v-bind 指令用于响应式得更新 HTML 属性，v-on 指令用于监听 DOM 事件。

在 DOm 中使用模板是还需要避免使用大写字符来命名动态参数，这个因为浏览器会把元素的属性名全部强制转换为小写字符。