Vue听课笔记（Vue2~Vue3）-2
一、slot
1.1、旧版slot（内容分发）
-
如果在一个组件的标签中再加上一个标签，那么这个标签无法再页面中正常表达出来
-
这时就需要在组件中添加
slot- 未给
slot定义名称时，有几个slot就会重复的将组件中的标签表达几次
<child> <div>1111</div> <div>2222</div> </child>Vue.component("child",{ template:` <div> <slot></slot> <slot></slot> <slot></slot> </div> ` })- 如果定义了名称则会按照名称的顺序来表达出来
<child> <div slot="a">1111</div> <div slot="b">2222</div> <div slot="c">2222</div> </child>Vue.component("child",{ template:` <div> <slot name="a"></slot> <slot name="b"></slot> <slot name="c"></slot> </div> ` }) - 未给
-
有了
slot，那么组件的复用性则会提升，可以在组件中多放置一些插槽，在不同的文档中使用该组件时，插入不同的东西 -
在父组件中的标签用插槽引入子组件中也可以在父组件中进行编译
1.2、新版slot
- 就是将原来的写法规范发
- 将
slot=”“换成<template v-slot: >
<child> <template v-slot:a > <div>1111</div> </template> <template v-slot:b > <div>1111</div> </template> <template v-slot:c > <div>1111</div> </template> </child>- 将
slot=”“换成<template # >
<child> <template #a > <div>1111</div> </template> <template #b > <div>1111</div> </template> <template #c > <div>1111</div> </template> </child> - 将
1.3、插槽版抽屉
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
<div id="box">
<navbar>
<button @click="isShow=!isShow">click</button>
</navbar>
<sidebar v-show="isShow"></sidebar>
</div>
<script>
Vue.component("navbar", {
template: `
<div>
nabbar- <slot></slot>
</div>`
})
Vue.component("sidebar", {
template:`
<ul style="background-color: yellow;width: 200px;height:500px;">
<li>首页</li>
<li>钱包</li>
<li>设置</li>
</ul>
`})
new Vue({
el:"#box",
data:{
isShow:false
}
})
</script>
</body>
</html>
二、过渡
2.1、过渡效果
- 控制元素的class名称来给标签添加动画
- 使用
<transition>标签来给标签添加动画- 使用
<transition enter-active-class="关键帧动画名称" leave-active-class="关键帧动画名称"></transition> - 使用
<transition name="关键帧动画名称"></transition>
- 使用
- 给
<transition>标签加上appear属性可以使页面打开时就有动画效果 - 这个标签只能过渡一个标签
2.2、过渡中的diff算法
- Vue的diff算法会使改变前与改变后进行父对父，子对子对比
- 在改变过渡效果时如果使相同标签对比，则可能会用diff算法，直接将不同的东西改变，导致效果无法看到
- 而如果标签不相同，那么diff算法就认为发生了翻天覆地的改变，使用过渡效果，两个标签替换时，就会先删除第一个再让第二个加载
- 多个元素过渡时可以用
mode=”out-in“- 方案一
<button @click="isShow = !isShow" >change</button> <transition name="kerwin" mode=”out-in> <div v-if="isShow">111111111111111</div> <p v-else >2222222222222222222222222</p> </transition>- 方案二
<button @click="isShow = !isShow" >change</button> <transition name="kerwin" mode=”out-in> <div v-if="isShow" key="1">111111111111111</div> <div v-else key="2">2222222222222222222222222</div> </transition>
2.3、列表过渡
- 组件过渡
- 组件过渡可以使用动态组件，在动态组件上加上
<transition>标签即可
- 组件过渡可以使用动态组件，在动态组件上加上
- 列表过渡
<transition-grop>可以添加多个标签，需要给标签加key值<transition-grop>有tag属性，可以指定转化成的一个标签
2.4、可复用过渡
- 将
<transition>加在子组件中，这样每次引用组件就可以使<transition>生效 - 在文档中设置关键帧动画，每次使用组件都可以引用
- 给子组件出入自定义属性，来控制
<transition>的name属性，以便控制动画的效果
三、生命周期
3.1、生命周期-创建阶段
- 在
beforeCreate时，还未初始化基本，不能查到状态 - 在
Create时，可以初始化状态或者挂载到当前实例的一些属性- 这个函数中写
this.自定义属性值,可以直接访问到，但是如果这个属性没有写到data里面，则不可以修改这个自定义属性
- 这个函数中写
- 在
beforeMount时，为初始化DOM节点，无法查到DOM节点 - 在
Mounted时，可以拿到真实的DOM节点。- 依赖于dom创建之后，才进行初始化工作的插件
- 订阅
bus.$on - 发Ajax
- 每个组件之后都有生命周期,组件创建过程中只会走一次生命周期
3.2、生命周期-更新阶段
- 在
Mounted之后即为更新生命周期 beforeUpdate–更新之前，可以记录一些老的dom某些状态，比如滚动条位置记录updated–更新完成，获取更新之后的dom，才进行swiper工作的插件，只要有状态更新，就会执行一次
3.3、生命周期-销毁
beforeDestroy销毁之前，用于清除定时器，事件解绑，防止清除了组件之后，windows上面的函数依旧在进行destroyed销毁，与销毁之前的用法大致相同
四、swiper
4.1、swiper的使用
- swiper是一个轮播图库，可以通过引用库来直接使用里面的轮播图
- 首先加载插件，需要用到的文件有swiper-bundle.min.js和swiper-bundle.min.css文件，不同Swiper版本用到的文件名略有不同。可下载Swiper文件或使用CDN。
<!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内容。Swiper7的默认容器是’.swiper’，Swiper6之前是’.swiper-container’。
<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容器之外
- 你可能想要给Swiper定义一个大小，当然不要也行。
.swiper {
width: 600px;
height: 300px;
}
- 初始化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>
- 完成。恭喜你，现在你的Swiper应该已经能正常切换了。如果作为CommonJs 或ES 模块引入
//CommonJs
var Swiper = require('swiper');
var mySwiper = new Swiper('.swiper', { /* ... */ });
//ES
import Swiper from 'swiper';
var mySwiper = new Swiper('.swiper', { /* ... */ });
4.2、vue-swiper
- 将swiper写在vue的根组件中，通过new vue就可以操作swiper
- 在传入数据在轮播图中时，要注意生命周期的使用，映射数组里的数据到页面上，分页器需要加到更新后的生命周期，以便使数据在页面上加载完以后在出现分页器
- 这种方法如果其他状态更新，那么将会导致分页器再次刷新复用
- 并且这种方法无法给别人复用
4.3、swiper组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.css">
<script src="https://unpkg.com/swiper@8/swiper-bundle.js"> </script>
</head>
<body>
<div id="box">
<swiper :key="datalist.length">
<swiper-item v-for="data in datalist" :key="data">
<img :src="data" />
</swiper-item>
</swiper>
</div>
<script>
Vue.component("swiperItem", {
template: `
<div class= "swiper-slide">
<slot></slot>
</div>`
})
Vue.component("swiper", {
template: `
<div class="swiper-container kerwin">
<div class="swiper-wrapper">
<slot></slot>
</div>
<div class="swiper-pagination"></div>
</div>`,
mounted() {
new Swiper(".kerwin", {
pagination: {
el: '.swiper-pagination',
},
loop: true,
autoplay: {
delay: 2500,
disbleOnInteraction: false,
}
})
}
})
new Vue({
el: "box",
data: {
data: {
datalist: []
}
},
mounted() {
setTimeout(() => {
this.datalist = ['xxx', 'xxx', 'xxx']
}, 2000)
}
})
</script>
</body>
</html>
- 将数据带入到
datalist中就能启用这个组件
五、vue3相关类型写法
5.1、vue3组件写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="D:\Web\Vue3.js">
</head>
<body>
<div id="box">
<navbar></navbar>
</div>
<script>
var obj = {
data() {
return {
}
},
mentods: {}
}
var app = Vue.createApp(obj)
app.component("navbar", {
})
app.mount("#box")
</script>
</body>
</html>
5.2、vue3生命周期&轮播
- vue3中，生命周期没有变化
beforeDestroy变成了beforeUnmount,destroyed变成了unmounted- 轮播的组件改到vue3的组件中
7439
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
