学习最好的方法就是把你知道的告诉别人！
在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模板语法就到这了，如您发现有任何错误，请在底部留言，我会第一时间进行修改。
