1、v-bind
单个引用
<div class="d1">颜色</div>
单个引用，'d1'表示样式名；d1表示变量，需要在data中定义
<div :class="'d1'">颜色</div>
<div :class="d1">颜色</div>
多个引用
<div class="d1 d2">颜色</div>
<div :class="['d1', 'd2']">颜色</div>
<div :class="['d1', d2]">颜色</div>
条件：三目运算
<div :class="flag ? d1 : 'blue'">颜色</div>
键值对
<div :class="{blue : flag}">颜色</div>
值是函数，引用方法中function，需要加括号
<div :class="action( )">颜色</div>
action( ){ return 'green'}
style单个引用
<div style="color: red">样式</div>
<div :style="backgreen">样式</div>
backgreen: {background: 'green'}
<div style="{background: 'red'}">样式</div>
<div style="{background: blue}">样式</div>
blue: 'blue'
2、v-for
遍历数组，v表示值，i表示索引
<div v-for="(v,i) in arr">{{v}}---{{i}}
遍历对象，v表示属性值，i表示属性
<div v-for="(v,i) in obj">{{v}}---{{i}}
遍历数值，v表示数字，i表示索引
<div v-for="(v,i) in num">{{v}}---{{i}}
3、v-show
隐藏的时候通过样式display：none；
4、v-if、v-else-if、v-else
隐藏的时候通过删除标签
5、v-on/@
<div v-on:click="fn">鼠标单击</div>
<div @dblclick="fn(18)">鼠标双击</div>
<div @mouseover="fn" @mouseout="fn1">鼠标移入/移出</div>
<div @keydown="fn">键盘按下</div>
<div @keyup="fn">键盘弹起</div>
<div @keydown.enter="fn">键盘按下回车键</div>
<div @keydown.a="fn">键盘按下a键</div>
<div @keydown.ctrl.c="fn">键盘按下ctrl+c</div>
事件修饰符stop、prevent、once
stop修饰符表示阻止事件冒泡
<div v-on:click.stop="fn">点击</div>
prevent修饰符表示阻止事件默认行为
<div @click.prevent="fn">点击</div>
once修饰符表示只执行一次
<div @click.once="fn">点击</div>
即阻止事件冒泡又阻止事件的默认行为
<div @click.stop.prevent="fn">点击</div>
6、v-model
输入框，v-model的默认值是字符串
value: ''
<input type="text" :disabled="value>=100" v-model="value" />{{value}}
单个选项的复选框，v-model的默认值是布尔值
flag: true
<input type="checkbox" v-model="flag" />{{flag}}
多个选项的复选框，v-model的默认值是数组
flag: [ 'xj' ]
<input type="checkbox" v-model="flag" value="pg" />苹果
<input type="checkbox" v-model="flag" value="xj" />香蕉
<input type="checkbox" v-model="flag" value="xg" />西瓜
input的类型如果是checkbox，是不能通过v-for循环的，可以在外层加一个标签，进行循环
<input type="checkbox" v-for="v in data" v-model="flag" :value="v.val" />{{v.title}}
单选框，v-model的默认值是字符串
flag: 'man'
<input type="radio" name="sex" v-model="flag" value="man" />男
<input type="radio" name="sex" v-model="flag" value="woman" />女
下拉框，v-model的默认值是字符串
第一种：
select: '苹果'
<select v-model="select">
<option>苹果</option>
<option>香蕉</option>
<option>西瓜</option>
</select>
第二种：
select: 'pg'
<select v-model="select">
<option value="pg">苹果</option>
<option value="xj">香蕉</option>
<option value="xg">西瓜</option>
</select>
修饰符lazy、trim、number
修饰符lazy，表示失去焦点后触发
val: ''
<input type="text" v-model.lazy="val" />{{val}}
修饰符trim，表示过滤val字符串首尾的空格
val: ''
<input type="text" v-model.trim="val" />{{val}}
修饰符number，表示只能输入数字
val: ''
<input type="number" v-model.number="val" />{{val}}
7、v-text
<div v-text="msg"></div>
8、v-html
<div v-text="msg"></div>
9、v-cloak
结局浏览器闪烁问题
<div v-cloak>{{msg}}</div>
[v-cloak]{
display: none;
}