[前端笔记032]绑定样式、条件渲染、列表渲染、监视数据原理、收集表单数据、过滤器

前言

• 本笔记参考视频，尚硅谷:BV1Zy4y1K7SH p26 - p39

绑定样式

• 绑定class样式： 写法：class=“xxx”，xxx可以是字符串、对象、数组
  1. 字符串写法适用于：类名不确定，要动态获取
  2. 数组写法适用于：要绑定多个样式，个数不确定，名字也不确定
  3. 对象写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用
• style样式：
  1. :style="{fontSize: xxx}"其中xxx是动态值
  2. :style="[a,b]"其中a、b是样式对象

条件渲染

• v-if：写法：
  1. v-if=“表达式”
  2. v-else-if=“表达式”
  3. v-else
  4. 适用于：切换频率较低的场景
  5. 特点：不展示的DOM元素直接被移除
  6. 注意：v-if可以和v-else-if、v-else一起使用，但要求结构不能被打断
• v-show：写法：v-show=“表达式”
  1. 适用于：切换频率较高的场景
  2. 特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

列表渲染

• v-for指令：
  1. 用于展示列表数据
  2. 语法：<li v-for="(item, index) in xxx" :key="yyy">，其中key可以是index，也可以是遍历对象的唯一标识，in可以改为of
  3. 可遍历：数组、对象、字符串（用的少）、指定次数（用的少）
• 虚拟DOM中key的作用：key是虚拟DOM中对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】，随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：
  1. 旧虚拟DOM中找到了与新虚拟DOM相同的key： 若虚拟DOM中内容没变, 直接使用之前的真实DOM；若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
  2. 旧虚拟DOM中未找到与新虚拟DOM相同的key：创建新的真实DOM，随后渲染到到页面
• 用index作为key可能会引发的问题：
  1. 若对数据进行逆序添加、逆序删除等破坏顺序操作：会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低
  2. 若结构中还包含输入类的DOM：会产生错误DOM更新 ==> 界面有问题
• 列表过滤，使用数组的filter，watch和computed里写都行

监视数据原理

• Vue监视数据的原理：
  1. vue会监视data中所有层次的数据
  2. 通过setter实现监视，且要在new Vue时就传入要监测的数据
  3. 对象中后追加的属性，Vue默认不做响应式处理
  4. 如需给后添加的属性做响应式，请使用如下API：Vue.set(target,propertyName/index,value)；
     vm.$set(target,propertyName/index,value)；
• 通过包裹数组更新元素的方法，监测数组中的数据，本质就是做了两件事：
  1. 调用原生对应的方法对数组进行更新
  2. 重新解析模板，进而更新页面
• 在Vue修改数组中的某个元素一定要用如下方法：
  1. 使用这些API：push()、pop()、shift()、unshift()、splice()、sort()、reverse()
  2. Vue.set() 或 vm.$set()，此处是把数组元素添加了响应式，set还是只能用来添加
• 特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象（data等） 添加属性

收集表单数据

• 收集表单数据：
  1. 若：<input type="text"/>，则v-model收集的是value值，用户输入的内容就是value值
  2. 若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value属性
  3. 若：<input type="checkbox"/>
     • 没有配置value属性，那么收集的是checked属性（勾选 or 未勾选，是布尔值）；
     • 配置了value属性：
       1. v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
       2. v-model的初始值是数组，那么收集的就是value组成的数组
• v-model的三个修饰符：
  1. lazy：失去焦点后再收集数据
  2. number：输入字符串转为有效的数字
  3. trim：输入首尾空格过滤

过滤器

• bootcdn.cn上有各种第三方库，moment.js处理时间的，dayjs也是，较轻量
• 定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
• 语法：
  1. 注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
  2. 使用过滤器：{{ xxx | 过滤器名}}，{{ xxx | 过滤器名(‘额外参数’)}} 或 v-bind:属性 = “xxx | 过滤器名”
• 备注：
  1. 过滤器固定接收管道符前的内容，可以接收额外参数，多个过滤器也可以串联
  2. 并没有改变原本的数据，而是产生新的对应的数据