关于Vue的一些基本参数、方法及其应用规则
v-for遍历:v-for的语法类似于javascript的for循环,格式类如item in item。v-for可用于对数组、对象的遍历。
v-for遍历数组的两种形式:
1.在遍历过程中,没有使用索引值(下标值)
格式:v-for="item in items"
依次从items中取出item并且在元素的内容中,我们可以使用Mustache语法来使用item
2.遍历过程中,获得索引值
格式:v-for=(item,index) in items
其中index就代表了去除的item在原数组中的索引值
v-for遍历对象的三种形式:
1.获取对象中属性的值
格式:v-for="item in items"
2.获取key和value
格式:v-for="(value, key) in items"
3.获取key和value和index
格式:v-for="(value, key, index) in items"
第一种方式不强制使用value表示对象的属性值是因为Vue遍历对象时,若只有一个参数将默认参数值为value
组件key属性
官方推荐我们在使用v-for时给对应的元素或组件添加一个key属性。至于为什么如此建议,则是当我们对DOM中的元素进行增删或者修改时提高效率。
以添加为例,若我们需要在某列表插入一个新元素,若我们没有对列表中的li添加不同的key属性,那么这个工作将默认将插入位原本的li修改成我们需要插入的li,再依次类推修改,类似于我们数据结构中对线性表的插入操作。
但当我们使用key对每个结点进行唯一标识时,Diff算法就可以正确地识别该节点并找到正确的位置插入新的节点,相当于进行链表的插入操作。所以一句话,key的作用主要是为了高效更新虚拟DOM。
检测数组更新
因为Vue是响应式,所以当数据发生变化时,Vue会自动检测数据变化,视图会发生相应的更新。而Vue中包含了一组观察数组编译的方法,使用他们改变数组也会触发视图的更新。
以下是关于他们的简要使用:
data:{
letters: ['a','b','c','d']
},
methods:{
btnClick() {
//1.push方法
this.letters.push('aaa','bbb','ccc');
//2.pop():删除数组中最后一个元素
this.letters.pop();
//3.shift():删除数组中第一个元素
this.letters.shift();
//4.unshift():在数组的最前面添加元素
this.letters.unshift('aaa','bbb','ccc');
//5.splice():删除/插入/修改元素,第一个元素为定点的位置,首位从0开始计数
//删除元素:第二个参数传入你要删除的几个元素(如果没有传,则删除后面所有的元素)
this.letters.splice(1,2);
//修改元素:第二个参数标识我们要修改几个元素,后面是用于替换前面的元素
// 若发现修改元素数量最终高于数组原本数量,则改为在末尾处插入对应溢出元素
this.letters.splice(1,3,'m','n','l','x');
//6.sort(): 对数组内元素转换为ascii编码进行递增排序
this.letters.sort();
//7.reverse():对数组内元素进行倒置
this.letters.reverse()
}
同时注意的是,在针对数组内部根据索引值修改元素不能直接进行修改,而是需要通过splice函数或者set函数。若仅仅根据下标值修改元素,尽管程序不会进行报错但无法运行出结果。
set函数格式:Vue.set(需要修改的对象,索引值,修改后的值)