v-for
概述
当需要将一个数组遍历或枚举一个对象循环显示时候,我常用的就是列表渲染指令v-for. 它需要结合着in 或者of来使用。
例如
<li v-for="(item,index) in list" >
这里list是数组名,item为遍历的对象,index对应其下标
key属性
官方推荐我们在使用v-for时,给相应的元素或组件添加上一个:key属性。
为什么需要这个key属性呢?
这其实和Vue的虚拟DOM的Diff算法有关系。
当存在一个列表节点时,如果希望插入一个新的节点。
如:
如上,想要在BC节点之间插入节点E。
没有加key属性
如上。没有加key属性时,它会对照将第三个发生改变的C的值变为E,然后再将第四个D的值改为C,然后再新创建个元素用来存D,可见这样影响的元素太多会消耗性能。
加key属性
加了key属性后,它会将原来key属性指向的值先匹配,然后再创建E
所以一句话:key的作用就是为了高效的更新虚拟DOM
v-model
概述
用于在表单类元素上双向绑定数据,例如在输入框上使用时,输入的内容会实时映射到绑定的数据上。
<input type="text" placeholder="请输入任务" v-model="notecontent" />
例如上面html的notecontent和data里的notecontent实现了绑定,同步变换。
var app =new Vue({
el:"#app",
data:{
list:[],
notecontent:"",
}
})
原理
v-model其实是一个语法糖,它的背后本质上包含两个操作:
- v-bind绑定一个value属性,实现数据向元素的单向绑定
- v-on绑定一个input事件,对表单数据进行监听,改变则调用事件向改变数据
也就是说
<input type="text " v-model="message">
等同于
<input type="text" :value='message' @input='message=$event.target.value'>
修饰符
在vue中,有许多的修饰符,其中有些可以用来配合v-model来使用。
如 lazy、number、trim
lazy
只有当我们回车 或者 离开表单焦点时,才会更新数据
<input type="text" v-model.lazy='lazy_message'>
number
更新数据时,将表单内的数据转为number类型
<input type="text" v-model.number='number_message'>
trim
更新数据时,自动去除数据前后的空格