指令
- 每个指令都是为了取代相应的DOM操作；
- 指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM；
- 扩展了html标签的功能、大部分的指令的值是js的表达式。
v-text和v-html
- v-text:更新标签中的内容
- v-text和插值表达式的区别
- v-text 更新整个标签中的内容
- 插值表达式: 更新标签中局部的内容
- v-html:更新标签中的内容/标签
- 可以渲染内容中的HTML标签
- 注意:尽量避免使用，容易造成危险 (XSS跨站脚本攻击)
v-if和v-show
v-if有更高的切换开销，而v-show(无论为何值都被渲染在DOM中)有更高的初始渲染开销。- 因此，如果需要非常频繁地切换，则使用
v-show较好； - 如果在运行时条件很少改变，则使用
v-if较好。
v-on
- 使用
v-on指令绑定 DOM 事件，并在事件被触发时执行一些 JavaScript 代码。 - 语法: @事件名.修饰符 = “methods中的方法名” (如果不传入实参 方法名"func"与“func()”效果一样)
- 注意: $event 可以传形参
<body>
<div id='app'>
<button @click="fn1($event)">test</button>
</div>
<script>
new Vue({
el: "#app",
data:{
msg:'text'
},
methods:{
fn1($event){
console.log($event)
}
}
})
</script>
</body>
- 修饰符
.once- 只触发一次回调。.prevent- 调用event.preventDefault()。
v-for列表渲染
- 根据一组数组或对象的选项列表进行渲染；
v-for指令需要使用item in items形式的特殊语法；items是源数据数组 /对象；- 当要渲染相似的标签结构时用v-for，加在需要重复的标签中。
v-for=“元素 in 容器(数组和对象)”
v-for=“数组中的元素 in data中的数组名”
v-for=“对象中的属性值 in data中的对象名” - 其完整写法为
-
v-for = "(value,index) in data中的数组名" -
v-for = "(value,key,index) in data中的对象名”（其中index为对象中每对 key-value的索引 从0开始）
-
注意: 在使用v-for时,要把一个唯一值赋值给:key属性(通常是数组的index或者数据的id)
v-bind
作用: 可以绑定标签上的任何属性。
