Vue指令

Vue指令

1、内容渲染指令
v-text:会覆盖元素内部原有内容
{{}}：（插值表达式）不会覆盖内部原有内容
v-html:可以把带标签的字符串渲染成HTML内容

2、属性绑定指令（ v-band）

v-band（简写 ：）：为元素的属性动态绑定值，在使用v-band属性绑定期间，如果绑定的内容需要动态拼接，则字符串的外面应该包裹单引号。例如

<div :title:"'sss' + index">这是一个DIV</div>
//其中index是绑定的属性值

3、事件绑定指令（v-on）
v-on(简写@)：绑定事件处理函数时，可以用（）传递参数

<button @click='add'></button>
method:{
add(){
//可以通过this访问到data中的数据
this.count+=1
}
}

$event:vue提供的内置变量，它是原生DOM的事件对象e。$event在事件需要传参时才会被使用。

<button @click='add(3,$event)'></button>
method:{
add(n,e){
//可以通过this访问到data中的数据
this.count+=1
}
}

事件修饰符：.prevent->阻止默认行为; stop->阻止事件冒泡

<a @click.prevent='add'></a>
<button @click.stop='add'></button>

按键修饰符：
@keyup.enter
@keyup.ese

<input @keyup.enter="submit"></input>
<input @keyup.ese="clearInput"></input>

4、双向绑定事件（v-model）
修饰符
.number自动将用户的输入值转为数值类型
.trim自动过滤用户输入的首尾空白字符
.lazy在“change”时而非“input”时更新

<input v-model.number="age"></input>
<input v-model.trim="msg"></input>
<input v-model.lazy="msg"></input>

5、条件渲染指令（v-if、v-show）
v-show的原理：动态为元素添加或移除display：none样式，来实现元素的显示与隐藏，用于需要经常切换的场景
v-if:每次动态的创建或移除元素，实现元素的显示与隐藏，如果刚进入界面默认不需要被展示，且后面也很可能不需要显示时，性能最好

6、列表渲染指令（v-for)
用到v-for指令，要绑定一个：key属性，而且尽量把id作为key的值。