VUE常用指令

1、v-on/@

　　绑定事件

　　<button  v-on:click="add">点击</button>

　　<button  @click="add">点击</button>

　　阻止事件冒泡

　　<button  @click.stop="add($event)">点击</button>

　　阻止事件默认行为

　　<button  @click.prevent="add">点击</button>

　　事件只执行一次

　　<button  @click.once="add">点击</button>

　　只有event.target表示自身元素时，才会触发函数

　　<div v-on:click.self="doThat">点击</div>

　　表示添加事件捕获模式

　　<div v-on:click.capture="doThis">点击</div>

2、v-bind

　　动态数据

　　<div  v-bind:title="msg">动态数据</div>

　　<div  :title="msg">动态数据</div>

3、v-for

　　遍历数据

　　（1）遍历数组，v表示元素，i表示对应的索引

　　　　<p  v-for="(v, i)  in  arr">{{v}}    {{i}}</p>

　　（2）遍历对象，v表示属性值，i表示对应的属性名称

　　　　<p  v-for="(v, i)  in  arr">{{v}}    {{i}}</p>

　　（3）遍历数值，v表示数字，i表示对应的索引

　　　　<p  v-for="(v, i)  in  num">{{v}}    {{i}}</p>

4、v-text

　　<p  v-text="'填充内容'"></p>

5、v-html

　　<p  v-html="'<span>填充标签或内容</span>'"></p>

6、v-cloak

　　解决页面闪烁问题：v-text、v-html、v-cloak

　　[v-cloak]{

　　　　display:none

　　}

　　<p  v-cloak>{{msg}}</p>

7、v-if和v-show

　　<p  v-if="flag==0">flag为0时，显示该内容</p>

　　<p  v-else-if="flag==1">flag为1时，显示该内容</p>

　　<p  v-else>否则显示该内容</p>

　　<p  v-show="flag">flag为true时，显示该内容</p>

　　二者区别：

　　　　v-if是通过创建标签和删除标签来控制内容的显示和隐藏

　　　　v-show是通过控制display属性来控制标签的显示和隐藏

　　

8、v-model

　　获取表单控件中的值，修饰符lazy、trim、number

　　lazy：表示失去焦点时触发

　　trim：表示去除字符串两端的空白字符

　　number：表示只能输入数字

　　输入框 v-model的值是字符串　　val : ''

　　<input  type="text"  v-model="val" />

　　单个复选框 v-model的值是布尔值　flag : true

　　<input  type="checkbox"  v-model="flag"  />{{flag}}

　　也可以修改显示的值,选中toggle是yes，没有选中是false，toggle: 'yes'

　　<input type="checkbox" v-model="toggle" true-value="yes" false-value="no" />{{toggle}}

　　多个复选框 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="jz"  />橘子

　　<input  type="checkbox"  v-model="flag"  value="xg"  />西瓜

　　单个单选框 v-model的值是字符串  radioVal： 'man'

　　<input  type="radio"  v-model="radioVal"  value="man">男

　　多个单选框 v-model的值是value的值或为空字符串  radioVal：''

　　<input  type="radio"  name="sex"  v-model="radioVal"  value="man">男

　　<input  type="radio"  name="sex"  v-model="radioVal"  value="woman">女

　　下拉框v-model的值表示选中option的value值或内容值  val：'上海'

　　<select  v-model="val">

　　　　<option>北京</option>

　　　　<option>上海</option>

　　　　<option>广州</option>

　　</select>

　　val : 'sh'

　　select  v-model="val">

　　　　<option  value="bj">北京</option>

　　　　<option  value="sh">上海</option>

　　　　<option  value="gz">广州</option>

　　</select>

9、v-once

　　{{msg}}

　　<p  v-once>{{msg}}</p>　　// 只在初始化时，渲染一次，后面数据变化，上面的数据会更新，p标签内的不会更新