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
}
}
e v e n t : v u e 提 供 的 内 置 变 量 , 它 是 原 生 D O M 的 事 件 对 象 e 。 event :vue提供的内置变量,它是原生DOM的事件对象e。 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的值。