v-html和v-text
这两个指令可以改变绑定的元素的标签内容,v-html相当于js中的innerHTML,v-text相当于js中的innerTEXT。
v-show和v-if
-相同点:二者都可以隐藏元素。
-不同点:v-show切换元素的display属性控制元素显示或隐藏,v-if是直接在页面销毁这个元素来达成隐藏效果,想要显示元素就要重新渲染。
v-if,v-else-if,v-else
这指令是根据条件是否成立来渲染元素,需要注意的是,绑定v-else-if指令的元素前面的兄弟元素必须绑定v-if指令,v-else同v-else-if。
v-for
遍历数据多次渲染元素,指令的值使用语法:
-值为数组时:(item,index) in xxx,item是数组中的每一项数据,index是每一项的下标。
-值为对象时:(val,key,index) in xxx,val和key是对象的属性值和属性名,index为对应的索引。
-还可以直接遍历一个整数,例如:v-for="n in 10"。
v-bind
属性绑定,传入相应的值可以对元素的属性进行修改。
v-model
双向绑定,通常绑定在表单元素上实现数据的响应式修改。
修饰符:使用trim在失去焦点时过滤输入的字符串前后的空白;使用number当用户在开头输入数字,如果之后有非数字会被过滤;使用lazy在失去焦点时修改数据的值。
v-on
事件指令,简写为@,用法:v-on:事件名="函数"
事件修饰符:
stop: 阻止事件冒泡
capture: 改变事件触发顺序
self: 只有本身触发事件时函数才会执行
once: 事件只会执行一次
prevent: 阻止默认行为
passive: 用在移动端优化性能
按键修饰符:
enter: 回车键
space: 空格键
tab: Tab键
...
键盘按键码也可以作为按键修饰符
v-pre,v-once,v-cloak
这三个指令都是有关于编译的
v-pre: 给谁加谁就会跳过编译
v-cloak: 在元素未被编译完成时隐藏此元素
v-once: 元素只会被编译一次,之后无论如何都不会再改变了。