目录
一、绑定class样式与绑定style样式
二、条件渲染
三、列表渲染
四、key作用与原理
五、列表过滤
六、列表排序
绑定样式：
1.class样式
写法：:class = "xxx" xxx可以是字符串、对象、数组
字符串写法适用于：类名不确定、要动态获取。
数组写法适用于：要绑定多个样式，个数不确定，名字也不确定
对象写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。用就将其该对象中的该类名的属性值设置为 true
2. style样式
:style = "{fontSize: xxx}",对象的写法， 其中xxx是动态值，xxx交给了Vue管理，注意样式使用小驼峰，且将其放在一个对象中
:style = "[a,b]" 其中a、b是样式对象 ，数组写法，比较少见
v-show和v-if的区别——高频面试题
1. v-if
写法：(1). v-if = "表达式"
(2). v-else-if = "表达式"
(3). v-else 后面不用跟表达式
适用于：切换频率较低的场景
特点：不展示的DOM元素直接被移除，比较耗性能
注意：v-if 可以和: v-else-if、v-else一起使用，但要求结构不能被“打断”。就是中间不能插入别的代码语句
2.v- show
写法：v-show="表达式"
适用于：切换频率较高的场景,
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉，本质为其添加了内联样式display:none
3.备注：使用v-if时，元素可能无法获取到，而使用v-show元素一定可以获取到。
template 标签模板，最大的特点是不影响结构,只能与v-if配合使用
写结构的时候，可以使用 template进行包裹，页面渲染时 template不存在
v-for指令
1.用于展示列表数据
2.语法：v-for="(item,index) in xxx " :key="yyy"，保证遍历列表数据得到的元素的key不相同即可，所以yyy 可以使用 item.id 或者 index
3.可遍历：数组、对象、字符串（用得很少）、指定次数（用得很少）
想生成多个谁，就在谁身上用 v- for指令，就可以生成对应数量的该元素
插值语法中的表达式里面的变量有三个来源：1. data中的属性, 2.计算属性中的属性，3. 标签中的形参
面试题：react、Vue中的key有什么作用？（key的内部原理）
1. 虚拟DOM中key 的作用：
key 是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】，随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：
2.对比规则：
(1).旧虚拟DOM中找到了与新虚拟DOM相同的 key:
若虚拟DOM中内容没变，直接使用之前的真实DOM!
若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
(2).旧虚拟DOM中未找到与新虚拟DOM相同的key
创建新的真实DOM，随后渲染到页面。
3. 用index作为key 可能会引发的问题：
(1). 若对数据进行： 逆序添加、逆序删除等破坏顺序操作：
会产生没有必要的真实DOM更新 ==> 界面效果没问题，但效率低。
(2).如果结构中还包含输入类的DOM（如input框）:
会产生错误DOM更新 ==> 界面有问题。
4.开发中如何选择key?
(1). 最好使用每条数据的唯一标识作为key,比如id、手机号、身份证号、学号等唯一值。
(2).如果不存在对数据的逆序添加、逆序删除等破坏性操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。
1.使用监视属性实现
2.使用计算属性实现（更方便）
当代码被注释后，在注释代码的下面写新代码，那么被注释的代码无法被折叠，在想折叠的代码上方写#region 想折叠的代码的下方写#endregion
