一、组件
组件是可复用的 Vue 实例，且带有一个名字
因为组件是可复用的 Vue 实例，所以它们和Vue接收相同的选项，例如 data 、 computed 、 watch 、 methods 以及生命周期钩子等。
1.通过 app.component 来创建组件
- 注册组件
Vue.createApp({
// 注册组件
components: {
steper
},
data() {
return {}
},
}).mount(".app")
- 定义组件
// 定义组件
const steper = {
template: `
<span>
<button @click="num-=step" :disabled="num<=mini">-</button>
<input type="text" v-model.number="num">
<button @click="num+=step" :disabled="num>=max">+</button>
</span>`,
}
- 使用组件
<div class="app">
<steper></steper><br>
<steper></steper>
</div>
</body>
2.组件的参数传递
- 父传子 props
<step :num="10"></step>
//接收
props:{
"num":{type:Number,default:1}
},
//使用
data(){return {n:this.num}}
对象与数组的默认值必须是函数的返回值
- 子传父 emit事件
//在steper内部
this.$emit("numchange",this.num)
numchange事件名称，this.num 事件值
//父组件
<steper @numchange="w1=$event">
$event 就是子组件通过numchange传递过来的值 this.num
组件案例 swiper幻灯片效果
- css
<style>
* {
margin: 0;
padding: 0;
}
.app img {
width: 800px;
}
.app .swiper {
position: relative;
width: 800px;
margin: 20px auto;
}
.swiper .btn {
font-size: 20px;
position: absolute;
padding: 8px 20px;
color: #000;
background-color: #ccc;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
.pre {
left: 0;
}
.next {
right: 0;
}
.swiper .dots {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 20px;
}
.dots span {
display: inline-block;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: rgba(0, 0, 0, .3);
margin: 0 5px;
cursor: pointer;
}
.dots .current {
background-color: #bfc;
}
</style>
- html
<div class="app">
<swiper :gallery="gallery"></swiper>
</div>
- js
<script>
const swiper = {
template: `
<div class="swiper" @mouseover = "stop()" @mouseout="play()">
<div class="swiper_item" v-for="(item,index) in gallery" v-show="index===current">
<img :src="item">
</div>
<div class="pre btn" @click="next()"><</div>
<div class="next btn" @click="pre()">></div>
<div class="dots">
<span v-for="(item,index) in gallery" @click="gotoPage(index)" :class="{'current':current == index}"></span>
</div>
</div>`,
props: {
gallery: {
type: Array,
default: function () {
return []
}
},
interval: {
type: Number,
default: 2000
}
},
data() {
return {
current: 0,
interId: null
}
},
methods: {
play() {
this.interId = setInterval(() => {
this.current++;
this.check();
}, this.interval)
},
stop() {
clearInterval(this.interId);
},
check() {
if (this.current >= this.gallery.length) {
this.current = 0
}
if (this.current < 0) {
this.current = this.gallery.length - 1
}
},
// 点击下一个按钮
next() {
this.current--;
this.check();
},
// 点击上一个按钮
pre() {
this.current++;
this.check();
},
// 导航点
gotoPage(index) {
this.current = index;
}
},
created() {
this.play()
}
}
Vue.createApp({
// 注册组件
components: {
swiper
},
data() {
return {
gallery: [
"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/918820682e4a490221cfd92b24c14b86.jpg?thumb=1&w=1533&h=575&f=webp&q=90",
"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/222d6c61df75f30e6782ec476d5c8273.jpg?thumb=1&w=1533&h=575&f=webp&q=90",
"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/dd741adcce9417d72ea4c1a6dfcc96e2.jpg?thumb=1&w=1533&h=575&f=webp&q=90",
"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/39bb34167f6c178d6bb768d8872c97f8.jpg?w=2452&h=920"
]
}
}
}).mount(".app")
</script>
3.组件插槽
<slot>作为我们想要插入内容的占位符
实例
<body>
<div class="app">
<price>
<template v-slot:pre>
￥
</template>
<template v-slot:next>
元
</template>
</price>
</div>
</body>
<script>
const price = {
template: `<span><slot name="pre"></slot>100<slot name="next"></slot></span>`,
}
Vue.createApp({
// 注册组件
components: {
price
},
data() {
return {
}
},
}).mount(".app")
</script>
二、动画
Vue 提供了内置的过渡封装组件，该组件用于包裹要实现过渡效果的组件。
组件进入和离开 DOM 的钩子 使用内置的 组件
<button @click="flag=!flag">切换</button> <br>
<transition name="fade">
<img src="./images/sun.jpeg" alt="" width="120" v-if="flag">
</transition>
1.过渡class
在进入/离开的过渡中，会有 6 个 class 切换。
v-enter-active 进入整个状态
v-leave-active 离开整个状态
v-enter-from 进入开始
v-enter-to 进入结束
v-leave-from 离开开始
v-leave-to 离开结束
2.第三方引入
animate动画库：https://www.jq22.com/yanshi819
<link rel="stylesheet" href="./css/animate.css">
<transition name="fade" enter-active-class="animated slideInDown" leave-active-class="slideOutDown animated">
<img src="./images/sun.jpeg" alt="" width="120" v-if="flag">
</transition>
3.in-out 先进在出，out-in先出在进
<body>
<div class="app">
<button @click="flag=!flag">切换</button><br>
<p style="position: relative;">
<transition name="fade" mode="in-out" enter-active-class="rotateIn animated"
leave-active-class="rotateInDownLeft animated">
<button v-if="flag" key="a">in</button>
<button v-else key="b">out</button>
</transition>
</p>
</div>
</body>
<script>
Vue.createApp({
data() {
return {
flag: true
}
},
}).mount(".app")
</script>
4.列表过渡
使用 transition-group 组件实现列表过渡
<transition-group tag="div" name="slide" >
<div class="item" v-for="item in undoList" :key="item.name">
</transition-group>
.slide-leave-active{
}
slide-enter-active 进入整个状态
slide-leave-active 离开整个状态
slide-enter-from 进入开始
slide-enter-to 进入结束
slide-leave-from 离开开始
slide-leave-to 离开结束
/* transition-group 正在移动中的类名 */
/* 移动中的元素 */
.slide-move{
transition: all ease 1s;
}