前端小白的学习之路(Vue2 四)

提示：学习vue2的第四天，笔记记录：混入(mixins),插槽(slot),过渡与动画(transition)

一、混入(mixins)

二、插槽(solt)

1.匿名插槽

2.具名插槽

三、过渡与动画(transition)

1.过渡

1）单元素过渡

Ⅰ.通用类名

Ⅱ.指定类名

2)多元素过渡

2.动画

1.自定义动画

2.使用动画库

一、混入(mixins)

混入（Mixin）是一种重用 Vue 组件中可复用功能的方法，它允许你在多个组件之间共享相同的代码逻辑。通过混入，你可以将一组选项合并到组件中，这些选项可以包括数据、计算属性、方法等。

基本步骤:

1.创建混入对象：首先，创建一个包含要复用的选项的混入对象。这个对象可以包含任何 Vue 组件中可用的选项。

const options = {data() {return {num: 100}},methods: {add() {this.num++;}},watch: {num(nValue) {console.log("值:", nValue);}},created() {console.log("初始化...")}
}

2.在组件中使用混入：在你想要使用混入的组件中，通过 mixins 选项将混入对象添加到组件中。

// 组件A
const CompA = {data() {return {num: 1}},// 混入语法mixins: [options],template: `<div><h3>组件A</h3><p>{{num}}</p><button @click="add">按钮</button></div>`,
}
// 组件B
const CompB = {// 混入语法mixins: [options],template: `<div><h3>组件B</h3><p>{{num}}</p><button @click="add">按钮</button></div>`,
}

注：当组件data选项中的数据和mixins选项中的属性和方法相同的情况，优先使用的是组件的属性和方法等。虽然混入提供了一种方便的重用代码的方法，但过度使用混入可能导致代码变得难以理解和维护。因此，应该谨慎使用混入，避免滥用。

二、插槽(solt)

组件插槽（slot）是一种机制，允许组件接受额外的内容作为其子组件，并且可以在组件内部的特定位置渲染这些内容。插槽使得组件更加灵活，可以根据需要插入不同的内容。

1.匿名插槽

匿名插槽是最简单的一种插槽，不需要任何特定的名称。当在组件中写入内容时，如果没有为插槽指定名称，那么这个内容会被放置到子组件中的默认插槽位置。在子组件中，可以使用 <slot> 元素来标记默认插槽的位置。

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Vue</title><style>* {padding: 0;margin: 0;}.header {width: 100%;box-sizing: border-box;padding: 0 15px;height: 60px;background-color: #ccc;display: flex;align-items: center;margin-bottom: 10px;}.header .left {width: 80px;height: 40px;background-color: red;text-align: center;line-height: 40px;}.header .left a , .header .left span {color: #fff;text-decoration: none;}</style>
</head>
<body><div id="app"><comp-header><span>搜狐  </span></comp-header><comp-header><span>淘宝  </span></comp-header><comp-header><span>京东  </span></comp-header><comp-header><span>拼多多</span></comp-header></div><script src="./libs/vue@2.7.16/vue.js"></script><script>// 匿名插槽// <slot></slot>// 编写头部组件const CompHeader = {template: `<header class="header"><!-- 插槽 --><div class="left"><slot></slot></div></header>`}//禁止控制台输出日志信息Vue.config.productionTip = false;new Vue({//挂载容器el: "#app",// 注册组件components: {CompHeader}})</script>
</body>
</html>

在上面的案例中<comp-header> 组件中的<span>搜狐</span>等内容就会被插入匿名插槽中

2.具名插槽

与匿名插槽不同，在组件中写入的内容会根据name属性插入到用v-solt绑定了相同名称的插槽中

<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Vue</title><style>* {padding: 0;margin: 0;}.header {width: 100%;box-sizing: border-box;padding: 0 15px;height: 60px;background-color: deepskyblue;display: flex;align-items: center;margin-bottom: 10px;}.header .left {width: 80px;height: 40px;/* background-color: red; */text-align: center;line-height: 40px;}.header .left a,.header .left span {color: #fff;text-decoration: none;}.header .center {flex-grow: 1;}.header .center input {width: 100%;height: 40px;border-radius: 20px;border: 0;outline: none;box-sizing: border-box;padding-left: 15px;}.header .right {width: 50px;height: 40px;/* background-color: blue; */text-align: center;line-height: 40px;}.header .right a {color: #fff;text-decoration: none;}</style>
</head><body><div id="app"><comp-header><!-- 代表left插槽 --><template v-slot:left><span>LOGO</span></template><!-- 代表center插槽 --><template v-slot:center><input type="text" placeholder="请输入关键字"></template><!-- 代表right插槽 --><template #right><a href="#">登录</a></template></comp-header></div><script src="./libs/vue@2.7.16/vue.js"></script><script>// 具名插槽// <slot name="left"></slot>// 编写头部组件const CompHeader = {template: `<header class="header"><!-- 插槽 --><div class="left"><slot name="left"></slot></div><div class="center"><slot name="center"></slot></div><div class="right"><slot name="right"></slot></div></header>`}//禁止控制台输出日志信息Vue.config.productionTip = false;new Vue({//挂载容器el: "#app",// 注册组件components: { CompHeader }})</script>
</body></html>

在上面的案例中，v-solt:left中的logo就会被插入到name='left'的插槽中去

三、过渡与动画(transition)

1.过渡

过渡（Transition）是一种在元素在插入、更新或删除时，在其内部进行过渡的方式，就是为元素的行为增加过渡效果。

1）单元素过渡

通过内置组件<transition> 可以对单个元素进行过渡动画，可以在元素插入、更新或删除时触发动画效果。它通过设置不同的 CSS 类名来实现动画效果。

Ⅰ.通用类名

没有设置name属性的<transition>组件过渡效果都会执行 .v- 开头的类名中设置的过渡效果。

<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Vue</title><link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.css"><style>/* 入场类名 *//* 入场之前的样式 */.v-enter {transform: translateX(-100%);opacity: 0;}/* 入场过程中的样式 */.v-enter-active {transition: all .5s;}.v-enter-to {transform: translateX(0px);opacity: 1;}/* 离场类名 *//* 离场之前的样式 */.v-leave {transform: translateY(0px);opacity: 1;}/* 离场过程中的样式 */.v-leave-active {transition: all .5s;}/* 离场后的样式 */.v-leave-to {transform: translateY(-100%);opacity: 0;}</style>
</head><body><div id="app"><div class="container mt-2"><div class="btn btn-success" @click="isShow=true">入场(显示)</div><div class="btn btn-danger" @click="isShow=false">离场(隐藏)</div><transition><div v-if="isShow" class="bg-primary mt-2" style="height: 200px;"></div></transition></div></div><script src="./libs/vue@2.7.16/vue.js"></script><script>//禁止控制台输出日志信息Vue.config.productionTip = false;new Vue({//挂载容器el: "#app",// 数据data(){return {isShow: true }},})</script>
</body></html>

Ⅱ.指定类名

通过在<transition>中设置name属性可以调用 .name- 开头的专属类名中的过渡效果。

<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Vue</title><link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.css"><style>/* 设置transition组件的name属性为demo后 *//* 入场类名 *//* 入场之前的样式 */.demo-enter {transform: translateX(-100%) rotate(180deg);opacity: 0;}/* 入场过程中的样式 */.demo-enter-active {transition: all .5s;}.demo-enter-to {transform: translateX(0px)  rotate(0deg);opacity: 1;}/* 离场类名 *//* 离场之前的样式 */.demo-leave {transform: translateY(0px)  rotate(0deg);opacity: 1;}/* 离场过程中的样式 */.demo-leave-active {transition: all .5s;}/* 离场后的样式 */.demo-leave-to {transform: translateY(-100%) rotate(180deg);opacity: 0;}</style>
</head><body><div id="app"><div class="container mt-2"><div class="btn btn-success" @click="isShow=true">入场(显示)</div><div class="btn btn-danger" @click="isShow=false">离场(隐藏)</div><transition name="demo"><div v-if="isShow" class="bg-primary mt-2" style="height: 200px;"></div></transition></div></div><script src="./libs/vue@2.7.16/vue.js"></script><script>//禁止控制台输出日志信息Vue.config.productionTip = false;new Vue({//挂载容器el: "#app",// 数据data(){return {isShow: true }},})</script>
</body></html>

2)多元素过渡

通过内置组件<transition-group> 组件用于对多个相同类型的元素进行过渡动画，例如列表中的项。它也通过设置不同的 CSS 类名来实现动画效果。使用方法与 <transition> 类似，主要区别在于添加了 tag 属性指定了渲染元素的标签，默认为 span。

<template><div><transition-group name="list" tag="ul"><li v-for="(item, index) in items" :key="index">{{ item }}</li></transition-group><button @click="addItem">添加项</button></div>
</template><script>
export default {data() {return {items: ['Item 1', 'Item 2', 'Item 3']};},methods: {addItem() {this.items.push(`Item ${this.items.length + 1}`);}}
};
</script><style>
/* 定义过渡效果的 CSS 类 */
.list-enter-active, .list-leave-active {transition: transform 0.5s;
}
.list-enter, .list-leave-to {transform: translateY(30px);opacity: 0;
}
</style>

2.动画

1.自定义动画

通过@keyframes来自定义动画，利用enter-active，leave-active这些属性设置过渡

<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Vue</title><link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.css"><style>/* 入场类名 */.enter-box {animation: enter-ani .5s  forwards;}/* 离场类名 */.leave-box {animation: leave-ani .5s  forwards;}/* 自定义动画 *//* 入场动画 */@keyframes enter-ani {0% {transform: scale(.5) rotate(180deg);opacity: 0;}100% {transform: scale(1) rotate(0deg);opacity: 1;}}/* 离场动画 */@keyframes leave-ani {0% {transform: scale(1) rotate(0deg);opacity: 1;}100% {transform: scale(.5) rotate(180deg);opacity: 0;}}</style>
</head><body><div id="app"><div class="container mt-2"><div class="btn btn-success" @click="isShow=true">入场(显示)</div><div class="btn btn-danger" @click="isShow=false">离场(隐藏)</div><!-- 处理动画，利用enter-active，leave-active这些属性设置 --><!-- 1） 自定义动画 --><transitionenter-active-class="enter-box"leave-active-class="leave-box"><div v-if="isShow" class="bg-primary mt-2" style="height: 200px;"></div></transition></div></div><script src="./libs/vue@2.7.16/vue.js"></script><script>//禁止控制台输出日志信息Vue.config.productionTip = false;new Vue({//挂载容器el: "#app",// 数据data(){return {isShow: true }},})</script>
</body></html>

2.使用动画库

使用别人设置好的动画可以轻松实现好看的动画效果。

动画库：https://animate.style/

<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Vue</title><!-- 动画库 --><link rel="stylesheet" href="./libs/animate.min.css"></head><body><div id="app"><div class="container mt-2"><div class="btn btn-success" @click="isShow=true">入场(显示)</div><div class="btn btn-danger" @click="isShow=false">离场(隐藏)</div><!-- 2) 使用动画库 --><transitionenter-active-class="animate__animated  animate__backInLeft"leave-active-class="animate__animated  animate__fadeOutUp"><div v-if="isShow" class="bg-warning mt-2" style="height: 200px;"></div></transition></div></div><script src="./libs/vue@2.7.16/vue.js"></script><script>//禁止控制台输出日志信息Vue.config.productionTip = false;new Vue({//挂载容器el: "#app",// 数据data(){return {isShow: true }},})</script>
</body></html>