v-bind:单向绑定命令
可以绑定样式,v-bind:style="{k:v,k2,v2...}"
v-bind:class ="{'类1':boolean或表达式,’2‘:...}"
v-on:绑定事件监听器。
v-on:事件 = “事件处理函数”
事件对象 $event
修饰符 self 只有本身响应事件
stop 阻止冒泡
几乎等同于 @click = "two"
two(e){
e.canceBubble = true;
}
prevent 阻止默认行为
v-model:双向绑定命令 视图变化 数据变化,数据变化,视图变化
修饰符 number 输入字符串转为有效数字
trim 输入首尾空格过滤
lazy 取代 input
监听 change
事件
v-text:渲染文本到标签,会覆盖标签内原有内容trim
更新元素的textContent,如果要更新部分的textContent,需trim要使用{{}}
v-html:更新元素的innerHTML
v-if:条件渲染,初始渲染条件为false,什么都不做,为true,渲染条件块
v-show:根据表达式的真假切换元素的display css属性,与v-if不同的是不管初始条件是什么都会被渲染出来,之切换css操作
频繁切换用v-show,条件很少改变用v-if
v-else:与编程语言中的else一样
v-else-if:与编程语言中的else-if一样
v-for: 遍历数组 :key = "唯一的值"
//被迭代数组别名 in 源数组数据,当前项索引 可用of代替in
<div v-for="item in items" :key="item.id">
{{ item.name }} </div>
v-pre:跳过这个元素和他子元素的编译过程。可以用来显示原始Mustache标签。跳过大量没有指令的节点会加快编译
v-cloak:这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
v-once:只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。