Vue第四章 过滤器、组件、插槽、props组件属性、生命周期、监听器(内含详细代码解释)

目录

一、过滤器

二、组件

三、插槽

四、props组件属性

五、生命周期

六、监听器

每日一句

---

一、过滤器

1. 新的配置项 filters： 用于存放过滤器， 配合 {{ value | 过滤器 }} 语法
2. 过滤器可以顺序使用 

3. <div>{{ -2 | abs | double | pow(5) }}</div>

4. <template>
     <div>
       <!-- 过滤器: 把{{}}中的值进行处理, 返回新的值 -->
   
       <!-- abs: 绝对值 -->
       <div>{{ 9 | abs }}</div>
       <div>{{ -9 | abs }}</div>
       <div>{{ 9 | sqrt }}</div>
       <!-- 双倍 -->
       <div>{{ 9 | double }}</div>
       <!-- 求次幂 -->
       <div>{{ 2 | pow(2) }}</div>
       <div>{{ 2 | pow(10) }}</div>
   
       <!-- 过滤器可以顺序使用 -->
       <div>{{ -2 | abs | double | pow(5) }}</div>
     </div>
   </template>
   
   <script>
   export default {
     // filters： 用于存放过滤器， 配合 {{ value | 过滤器 }} 语法
     filters: {
       // {{ x | pow(y) }}
       pow(x, y) {
         return Math.pow(x, y)
       },
       double(value) {
         return value * 2
       },
       // {{ value | abs}}
       abs(value) {
         return value > 0 ? value : -value
       },
       sqrt(value) {
         return Math.sqrt(value)
       },
     },
   }
   </script>
   
   <style lang="scss" scoped></style>

二、组件

1. 新的配置项 组件: component
   1. 自定义组件: 利用系统组件组合出自己的组件, 可以复用
      1. components: 此目录专门用于存放自定义组件
      2. 自定义组件的名称: 至少两个单词; 依赖大驼峰命名法区分单词
      3. (非强制): 根组件的class 和标签名相同, 但是class应该全小写 用 - 破折号分割
2. 使用自定义组件: 先引入 再使用
3. 作者满足所有人的习惯, 提供多种用法

   1. <my-nav></my-nav>
       <my-nav />
        <MyNav></MyNav>
      <MyNav />
      
      	别名写法:  {别名: 组件名}
      	<mynav />
      	<mynav></mynav>
      
      默认大驼峰 会自动兼容 破折号语法  my-nav 和 MyNav

三、插槽

1. 插槽: slot 预留位
2. 插槽: 提前把布局写完, 使用时再存入具体展示的内容
3. 会在组件使用时, 替换成其双标签中的内容
4. 插槽: 一个占位符; 使用时才会替换成实际的值
5. 分为 默认插槽和命名插槽
6. 命名插槽: 通过name属性 为 slot 组件添加名字

7. <slot name="zdj" />
   放到名字是 zdj 的插槽里
   	<ul slot="zdj">
           <li>张张</li>
           <li>俊俊</li>
           <li>元浩</li>
         </ul>

8. vue2.6版本中, 更新了新的语法
   1. 必须用虚拟的template 标签作为父元素, 此标签不是实际存在的DOM元素, 仅仅代表一个包围

   2. <template v-slot:right>
              <li>浩浩</li>
              <li>艳艳</li>
              <li>俊俊</li>
            </template> -->
      
      新语法有语法糖: #插槽名
      	<template #right>
              <li>美美</li>
              <li>张张</li>
              <li>元元</li>
            </template>

四、props组件属性

1. 标签拥有两类重要的设置
   1. 双标签的值
      属性: 各种各样的其他设定
2. <my-btn type="primary">主要按钮</my-btn>
3.  props: 属性选项, 用于为自定义组件 声明 属性
4. 如果属性没有传参,可以设置默认值

5. 简单语法:
   	props: ['type'],
   
   如果属性没有传参,可以设置默认值,需要精确配置
   
   精确配置语法:
   	props: {
       // 属性名: {配置项}
       type: {
         // ctrl+i: 查看配置项
         default: 'default', //配置默认值
       },
     }

五、生命周期

1. 组件生命周期: 标签从创建到显示 等过程中, 经历的周期
2. 生命周期的作用:
   1. 自动发送网络请求?
   2. 在组件显示时, mounted中触发请求操作
   3. 面试问题: 是否可以在创建阶段发送请求?
   4.  creatd阶段: 能提前几毫秒, 但是一旦小概率挂载到页面上失败, 则请求属于浪费流量
   5. mounted: 晚几毫秒(用户不可感知), 请求的数据一定用的上,更稳妥
3. 生命周期的钩子函数
   1. 生命周期: 组件从 创建 出生 更新 销毁的过程--组件的一生
   2. 钩子函数: 一类特殊的函数 -- 在固定的时机自动触发
4. 创建阶段: 完成 选项中数据部分的 操作
   1.  beforeCreate() { }
   2. created() 
5. 组件出生, 显示到页面上
   1.  beforeMount() { }
   2. mounted() { }
6. 更新时
   1.  beforeUpdate() { }
   2. updated() { }
7. 删除组件中的所有数据
   1. beforeDestroy() { }
   2. destroyed() { }

六、监听器

1. 监听器: 实时监听属性的变化
2. 新的配置项 watch

3. watch: { 
   	要监听的属性名: 变化时触发的函数
   	num(to, from) {
         console.log('to:', to) //新值
         console.log('from:', from) //旧值
       },
   }

每日一句

捐躯赴国难，视死忽如归。

        "在国家有危难的时候要敢于挺身而出，把死当作回家一样。"