vue43-63

三池丶

已于 2023-02-09 12:53:56 修改

阅读量184

点赞数

文章标签： ue4 前端 javascript

于 2023-02-08 21:29:04 首次发布

本文链接：https://blog.csdn.net/qq_72343101/article/details/128934495

版权

文章目录

1.中间人通信
2.中央事件总线（bus）
3.ref组件通信
4.组件注意
5.属性修改
6.动态组件（component）
7.slot（插槽）
- 旧版slot
- 新版slot
8.过渡效果
9.生命周期
10.swiper（轮播）
- 62-63集

1.中间人通信

在这里插入图片描述

在这里插入图片描述
通过自定义组件和子传父等来实现组件利用后端数据，上面组件内的class是行外样式，有css文件，
上述内容还只是前面的知识
而中间人模式就是利用子传父然后再父传子达到子与子互传的方式

这里自定义属性:filmData其实不能用，应该改成:film-data

在这里插入图片描述

2.中央事件总线（bus）

在这里插入图片描述

在这里插入图片描述
这里的通信方式就是子传父，子传父，再父传子，一眼就看出，这种方式很麻烦，所以，官方给出了两种解决方案
请添加图片描述

在这里插入图片描述
bus原理，订阅发布模式

在这里插入图片描述
这里的bus=new Vue() 不用添加任何参数，然后当发布者发布事件后，订阅者就会立即监听事件，然后触发相应的函数。

在这里插入图片描述

3.ref组件通信

在这里插入图片描述

绑定dom节点
绑定方式，也可以说成是引用方式，即ref:属性名

使用方式

上面的代码拿到的是原生dom节点

这样可以直接拿到标签

即拿到dom节点
绑定组件

拿到组件对象
还可以通过ref改变子组件属性的值

读取组件属性的值
改变子组件的值，尽量不用，会导致数据流向的混乱

4.组件注意

5.属性修改

在这里插入图片描述
状态是可以随便修改的

在组件中直接用方法改变组件属性的值可以，但是会报错，原因是会导致数据流紊乱

v-once

更新过后，模板就不会更新了

6.动态组件（component）

通过tab选项卡切换组件
在这里插入图片描述
三个新创建的组件

利用v-show和点击事件来实现选项的显示和删除

<component>是vue提供的一个动态组件，有一个固定属性is
在这里插入图片描述
通过is值可以任意变换组件

不用使用v-show了
动态组件的缺点：
切换组件时，会把之前的动态创建的组件删除，再创建一个新的组件
<keeo-alive>也是vue提供的一个组件，可以使动态组件再切换时不被删除
在这里插入图片描述
没加keep-alive就像v-if，加上后就像v-show

7.slot（插槽）

vue组件在运行代码时会先检测是不是组件，如果是组件，就会用template里的内容直接代替组件标签
在这里插入图片描述

上图中kerwin-navber会被section代替，从而使kerwin-navber里的div111111显示不出来
而slot可以解决这个问题，提高组件的复用性

旧版slot

在vue组件中先留出一个<slot>插槽，然后组件内的元素就会插入插槽
请添加图片描述
这种就是单个插槽写法
在这里插入图片描述

但是，这个slot不太聪明，你不加属性，有几份插槽，他就会复制几遍组件的内容。
在这里插入图片描述

在这里插入图片描述

功能对比

插槽的作用，提高组件的复用性

可以更方便的使用和改写代码，实现代码的功能

新版slot

vue3
slot改成了v-slot，且写法也不同
在这里插入图片描述

需要插入的元素（节点）外部套上一层<template></template>,也可以用#slot名来代替slot=“”的格式

8.过渡效果

在这里插入图片描述

原理：通过类名（class）的切换来实现动画效果（先写好动画样式）
语法：

需要在外面先套上<transittion>的标签，标签内的enter-active-class的属性就是进场动画，enter-leave-class的属性就是出场动画，属性后面的值是class的名字，class的名字也有要求，格式是xxx-enter/leave-active
当然前面的名字过于繁琐，可以直接简写
每个<transittion>内部只能有一个元素
在这里插入图片描述

在这里插入图片描述
这样可以直接实现进场和出场动画，只要引发dom结构的改变，就可以实现动画效果

初始动画使用appear属性
在这里插入图片描述

使用appear属性就可以实现浏览器刚加载时就出现动画

多个元素过渡时需要设置唯一的key值

mode是加在transition标签上的属性
这里的mode属性有两个值：in-out和out-in

多个组件切换过渡

在这里插入图片描述

还是上面组件切换的代码，与多个元素过渡没有太大区别，就是在动态组件的标签component外加上transition标签，外加css动画属性

多个列表的过渡

<transition-group></transition-group>可以包裹多个节点（标签），但是，被包裹的标签一定要有key值，
在这里插入图片描述
<transition-group></transition-group>在使用后会实体化成一个span标签

可复用的过渡

其实就是把一个动画封装在一个组件内部，这就是可复用的过渡
在这里插入图片描述

在这里插入图片描述

把transition封装在组件中，使用时只需要在mode自定义属性中添加上自定义值就可以了

9.生命周期

在这里插入图片描述

生命周期的创建阶段

一个新的vue实例在初始化的时候就会有创建阶段，可以用两个函数来在创建阶段做出一些需求
即beforeCreate和created函数
在这里插入图片描述
这里的this.myname显示为undefind，这里的beforeCreate就相当于在数据初始化之前暂停

在这里插入图片描述
这里created就能访问到this.myname
可以在created中初始化状态或者挂载到当前实例的一些属性

在这里插入图片描述

在created中可以用this.变量创建全局变量，在页面中改变这个全局变量则不会有影响，因为他已经被拦截了，不会再次被拦截
在这里插入图片描述
没有el属性时，就用$mount()

在这里插入图片描述
即根组件若有template属性（组件属性），就会使用组件的内容，而不会使用html里的vue内容
使用beforeMount函数可以获取未加修饰的html内容，即beforeMount函数在vue的{{}}初始化之前就运行了
即在beforeMount函数之后，才会用vue的内容去替换html的内容
在这里插入图片描述
而在mounted函数这里就可以拿到真正的dom节点

有部分插件

mounted函数的功能，可以在浏览器刚创建dom后发送ajax请求

生命周期的更新阶段

beforeCreate和created函数
beforeMount函数
mounted函数都只会执行一次，而beforeUpdate函数和updatad函数只要有dom节点的更新就会执行
在这里插入图片描述

beforeUpdate函数，dom更新之前执行
updatad函数，dom更新之后执行

即查看不到dom节点

生命周期的销毁

销毁函数一般不用在根组件中，而一般用在子组件中
像倒计时的使用
在这里插入图片描述

在这里插入图片描述

10.swiper（轮播）

swiper的语法格式
https://www.swiper.com.cn/在这里可以找到很多开源的轮播组件代码

<!DOCTYPE html>
<html>
<head>
    ...
    <link rel="stylesheet" href="dist/css/swiper-bundle.min.css">
</head>
<body>
    ...
    <script src="dist/js/swiper-bundle.min.js"></script>
    ...
</body>
</html>

在这里插入图片描述

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>
导航等组件可以放在Swiper容器之外

在这里插入图片描述

<script>        
  var mySwiper = new Swiper ('.swiper', {
    direction: 'vertical', // 垂直切换选项(垂直轮播)
    loop: true, // 循环模式选项（轮播的循环）
    
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })        
  </script>