持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第4天，点击查看活动详情

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