前言： 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 中使用模板是还需要避免使用大写字符来命名动态参数，这个因为浏览器会把元素的属性名全部强制转换为小写字符。
