前端小白的学习之路(Vue2 四)-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端小白的学习之路(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） 自定义动画 -->
            <transition
                enter-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) 使用动画库 -->
            <transition
                enter-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>

文章来源地址https://www.toymoban.com/news/detail-848905.html

到了这里，关于前端小白的学习之路(Vue2 四)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！