3.Vue学习记录（样式绑定、条件渲染、列表渲染、）

2022-11-09
样式绑定:class：
        1.绑定class样式，字符串写法，适用于：样式的类名不确定，需要动态指定，
        2.绑定class样式，数组式写法，适用于：要绑定的样式个数不确定，名字也不确定，
        3.绑定class样式，对象写法，适用于：要绑定的样式个数确定、名字也确定，但不确定是不是要使用
样式绑定：style：
        1.对象绑定：把属性封装成对象使用，：style=”对象名“，
        2.数组绑定：把封装成对象的属性再封装成数组，:style="数组名"

2022-11-15
条件渲染：
        1.v-show=”true或者false或者布尔类型的表达式“，
        2.v-if=”true或者false或者布尔类型的表达式“，且可以有v-else-if，v-else，而且v-if会删除此节点，而v-show的底层
使用的式display：none，只是把节点不在页面上渲染，代码片段中仍然存在该节点，
        3.v-if可以与<template>标签配合使用，可以不破坏代码结构。

2022-11-16
列表渲染：
        1.写法：v-for=”形参 in 实参“ ：key=”键“
        2.实参可以是数组、对象、字符串、次数
key值：
        1.key值是虚拟dom的唯一标识，当页面更新后虚拟dom会做一次diff算法，
如果两个虚拟dom元素一致则使用原先渲染的真实dom，若不一致则新生成dom
        2.key的值最好使用数据的唯一标识，如果使用索引值的话再dom前插入数据容易出现错误。
注：向数组的前面添加元素使用unshift（）方法。
列表过滤：
        1.使用watch方法来进行过滤，不能使用简写，需要使用到immediate:true,属性
        2.使用计算属性：计算属性只需要把计算好的值，返回给对应数组即可，
注：使用到的方法：filter进行过滤，indexof（）判断是否存在该字符。
列表排序：
        1.使用升序sort（a,b）{return a-b},降序sort（a，b）{b-a}

2022-11-17
列表渲染存在的问题：
        1.当修改data里面的数组数据时，且数组里存在的是对象类型，直接整条对象修改时会出现错误修改不成功，
        2.对象的用法，例：new person{name:123,age:12},person.name：是拿到对象的值，是一个字符串不能进行赋值，
person[name]：可以对对象的属性进行赋值。
        3.向data属性添加属性使用vm.$set(target，key，value)
修改、添加、删除数组的值：
        1.可以使用vue封装的push（往后添加）、unshift（往前面添加）、splice（修改）
        2.vm.$set()和vue.set（）不能对vm的根数据（data、_data)进行数据添加可以使用封装的push、unshift等。