Vue常用指令

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;

　　}