学习最好的方法就是把你知道的告诉别人！

在Vue中最基本的数据绑定方式就是用两个花括号包裹你的变量：

一、插值

1、{{name}}:

<span id='msg' >Message: {{ msg }}</span>

2、v-html:

在项目中我们有时候会有这样的需求,如在元素内插入一段html代码，那么我们需要用到这个命令：

//html
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
//vue
var vue = new Vue({
    el:'#rawhtml',
    data:{
        rawhtml:'<span style="color:red">hi<span>'
    }

3、v-bind:

它提供了绑定元素特性的功能，请看实例：

//html
<div v-bind:id="dynamicId"></div>
<button v-bind:disabled="isButtonDisabled">Button</button>
//vue
var vue1 = new Vue({
    el:'#dynamicId',
    data:{
        dynamicId:'lijian'
    }
})
var vue2 = new Vue({
    el:'button',
    data:{
        isButtonDisabled:'false' //动态更改bool值实现按钮的disabled
    }
})

通过v-bind绑定使该元素的id的值变成了变量，这样的话就可以动态更改元素的id值。

4、JavaScript 表达式

vue不仅可以绑定简单的属性，还支持表达式：基本的运算，js方法的调用

{{ number + 1 }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

二、指令

1、v-if

该指令通过seen变量的真/假来控制元素是否插入/移除

<p v-if="seen">现在你看到我了</p>

2、参数

给元素的属性，动态设置参数，v-bind设置属性href与值url绑定起来。

<a v-bind:href="url"></a>

v-on:下面这个例子给a元素绑定click元素，函数名为doSomething。

<a v-on:click="doSomething">...</a>

3、动态参数

给元素动态设置特性名

<a v-bind:[attributeName]="url"> ... </a>
<a v-on:[eventName]="doSomething"> ... </a>

4、修饰符

.prevent 相当于在onSubmit方法里面开头加了一行
event.preventDefault()来阻止submit事件向上冒泡

<form v-on:submit.prevent="onSubmit">...</form>

三、缩写

虽然这些语法命名已足够简单，但是频繁书写对于我们开发者来说，也是繁重的工作量，所以有的语法可以进行如下简化书写。

1、v-bind可以缩写为（冒号：）

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

2、v-on 绑定事件（@click）

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

vue模板语法就到这了，如您发现有任何错误，请在底部留言，我会第一时间进行修改。