今天主要是想和大家分享一下Vue的数据绑定，这是vue的基础，是我们进行开发最基本需要掌握的知识，所以有需要的小伙伴赶紧学起来吧。
一.数据渲染
{{message}} // 数据绑定
<div v-html="htmlMess"></div> // html绑定
<div v-text="message"></div> // 数据绑定二.属性绑定
// 属性绑定： v-bind:属性名 ----> 可简写至 :属性名
<div v-bind:title="message">aaa</div>
// 即等同于<div :title="message">aaa</div>
<a v-bind:href="url">链接名</a>
// 即等同于<a :href="url">链接名 </a>三.类名绑定
// 类绑定，当isActive为true时类名生效
<div :class="active:isActive"></div>
// 多类名绑定，用逗号隔开
<div :class="active:isActive,red:isRed"></div>
// 对象类名绑定
<div :class="classObj"></div>
// 三元运算符类名绑定
<div :class="isActive?active:red"></div>四.样式绑定
// 内联样式绑定
<div :style="width:width,height:height"></div>
// 内联样式对象绑定
<div :style="styleObj"></div>五.条件绑定
// 当条件为真时，展示为此元素
<div v-if="seen">hahaha</div>
// 当条件为真时，css属性为display:block
<div v-show="seen">hahaha</div>六.循环绑定
// 列表对象的值绑定
<p v-for="(item,index) in lists">{{item.text}}</p>
// 键值对的绑定
<div v-for="(key value) in lists">{{key}}:{{value}}</div>七.事件绑定
// 点击执行fun1方法
<a v-on:click="fun1">点击</a>
// v-on:click 等同于 @click
<a @click="fun1"></a>
// .stop阻止事件冒泡
<a @click.stop="doThis"></a>
// .prevent阻止浏览器默认事件
<form @submit.prevent="doSubmit"></form>
// 修饰符可以串联
<a @click.stop.prevent="doThat"></a>
// 只当事件在该元素的本身触发时触发回调
<a @click.self=""></a>
// 点击事件只执行一次
<a @click.once=""></a>八.按键绑定
.enter .tab .delete（捕获‘删除’和‘退格’键）.esc .space .up .down .left .right .ctrl .alt .shift .meta
// 键盘按下
<input v-on:keyup.enter="">
<input @keyup.enter="">九.双向绑定
绑定修饰符：
v-model.lazy （将input同步改为change同步）
v-model.number （绑定的字符串转化为数字）
v-model.trim （过滤空格）
// 绑定vue中的message
<p>{{message}}</p>
// input 输入的值将传入message
<input type="text" v-model="message">
// 将选中的值传入message
<select v-model="message">
<option>aa</option>
<option>bb</option>
</select>十.运算绑定
<p>{{reverseMess}}</p>