关于Vue的学习笔记（七）

关于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(需要修改的对象，索引值，修改后的值)