Vue入门：（v-for v-model）

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其实是一个语法糖，它的背后本质上包含两个操作：

1. v-bind绑定一个value属性，实现数据向元素的单向绑定
2. 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
更新数据时，自动去除数据前后的空格