vue学习2-优快云博客

本文介绍了Vue.js中的中央事件总线机制用于组件间通信，ref属性用于访问DOM节点或组件实例，动态组件的切换及keep-alive的使用。还探讨了过渡效果的实现，包括列表过渡和Swiper滑动组件的配置。此外，提到了Vue的生命周期钩子函数及其在不同阶段的应用。

（一）、中央事件总线

bus，订阅发布者模式
在这里插入图片描述
bus.$on 接收

bus.$emit 触发

（二）、ref组件通信

ref-绑定dom节点，拿到的就是dom对象
ref-绑定组件，拿到的就是组件对象

ref直接绑定到标签身上：this.$refs.ref的名字拿到dom节点
绑定在组件身上：可以直接修改组件内的内容
在这里插入图片描述

（三）、组件注意

在这里插入图片描述
v-once在组件的应用：缓存后就不再更新了

（四）、动态组件

在这里插入图片描述
改变which的值，显示不同的组件
keep-alive 保留组件不会被销毁，保持文本框之前输入的内容还在

（五）、slot

旧版slot：
在这里插入图片描述
slot写在组件中，可以在组件中添加内容
具名插槽 <slot name="a"></slot>

对应插槽，会将内容添加到对应的插槽里
意义：扩展组件能力，提高复用性

新版的slot：
在这里插入图片描述

 <template v-slot:a>
    <div>1111</div>
 </template>

（六）、过渡效果

使用transition包裹需要产生动画的标签，将开始和结束动画类名添加到固定属性上
在这里插入图片描述

简写：动画名字后面的enter-active和leave-active是固定的
在这里插入图片描述
appear 一出现就有动画
mode=in-out 先来再走
out-in 先走再来

多个元素过渡：只能有两个，且只能显示一个，一种交替效果。同一标签需要加不同key值

（七）、diff算法

按照层级对比，父元素和父元素，子元素和子元素
相同key值对比
同组件对比

（八）、列表过渡

选项卡切换动画：
在这里插入图片描述
对列表加上过渡效果，加上key值。transition-group会示例化一个标签，通过tag设定，必须设置key值

可复用过渡：可以重复利用

（九）、生命周期

beforecreat（）
creat（可以用来初始化状态或者挂载到当前实例的一些属性）
.#mount(#box)可以代替el

beforemount（）dom加载前的
mounted（）可以拿到真实的dom节点。依赖于dom创建之后，才进行初始化的插件。请求数据可以放在里面
beforeUpdate（）更新前。可以记录老的dom状态
updated（）更新后。获取更新后的dom节点，才进行swiper工作的插件
beforeDestroy 销毁前用来清除定时器，事件解绑
destroy 销毁后

（十）、swiper

加载插件，下文件

<!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>

添加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>