前端系列课程之Vue路由和动画制作

最新推荐文章于 2024-10-09 17:00:28 发布

葡萄籽啊

最新推荐文章于 2024-10-09 17:00:28 发布

阅读量190

点赞数

分类专栏： Vue框架文章标签： vue

本文链接：https://blog.csdn.net/qiuqiudongdong/article/details/108987131

版权

Vue框架专栏收录该内容

12 篇文章 1 订阅

订阅专栏

Vue路由和动画制作

目标:

了解路由原理
掌握路由的安装和使用
掌握路由的参数传输方式
掌握动画的制作

vue路由

对路由的理解

什么是路由?

路由是根据不同的 url 地址展示不同的内容或页面

什么是前端路由?

a. 页面不刷新,项目使用期间页面不会重新加载.
b. 把不同路由对应不同的内容或页面的任务交给前端

什么时候使用前端路由？

在单页面应用，大部分页面结构不变，只改变部分内容的使用

前端路由和后端路由的区别

在这里插入图片描述

Vue路由的作用

单页面应用需要实现不同的显示区域的切换

在这里插入图片描述

前端路由在访问一个新页面时,仅仅变化了一下hash值而已,没有和服务器端交互,不存在网络延迟,提升了用户体验.

Vue-router模块的使用

Vue 官方推荐 Vue-router模块实现路由功能
下载安装

cdn方式
npm方式

Vue-router模块的基本用法

页面布局

router-link:超链接跳转
a. to:指定路由路径
b. tag:模拟标签,默认是超链接

router-view : 路由后的显示区域


<div id="mydiv">
           <router-link to='/home'>首页</router-link>
           <router-link to='/news'>新闻</router-link>
           <div>
                       <router-view></router-view>
           </div>
</div>

配置路由

路由设置
a. path
b. Component

在这里插入图片描述

路由实例
a. Routes
b. Mode
c.linkActiveClass
路由注入

在这里插入图片描述
例子：

路由嵌套

通过children 配置子路由
(注意：子路由的路径前没有" / ")

路由传参

查询字符串方式
通过$route.query方式获取参数
RESTFul方式
通过$route.params方式获取参数

路由方法

router.push()
添加路由,功能类似于<route-link>
router.replace()
替换路由,不产生历史记录
router.go()
返回上一次路由记录

例子：

在这里插入图片描述
（返回-1向后退一步，也可为正，但是要有历史记录才能够运行）

动画制作

Vue 动画的概述

动画实现原理

transition动画
animation动画
使用场合
v-if, v-show
动态组件
路由切换

- Vue动画实现

通过transition 组件实现动画,name 属性作为类样式的前缀

- Vue 动画实现的类样式

提供了6个类样式名

-enter-active
-leave-active
-leave
-enter-to
-leave-to
-enter

例子（第一个小例子：）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue简单动画</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.8/vue.js"></script>
</head>
<style>
    span {
        display: block;
        width: 100px;
        height: 100px;
        background-color: blueviolet;
        float: left;
    }
</style>
<script>
    window.onload = function() {
        let vm = new Vue({
            el: '#mydiv',
            data: {
                title: '点击切换状态!',
                status: true
            },
        })
    }
</script>

<body>
    <div id="mydiv">
        <button @click="status=!status">切换状态</button>
        <span v-if="status">{{title}}</span>
    </div>
</body>

</html>

运行结果：瞬间完成，无动画效果

在这里插入图片描述

例子：（淡入淡出）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue动画淡入淡出</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.8/vue.js"></script>
</head>
<style>
    span {
        display: block;
        width: 100px;
        height: 100px;
        background-color: blueviolet;
        float: left;
    }
    
    .fade-enter-active,
    .fade-leave-active {
        transition: all 3s;
    }
    
    .fade-enter,
    .fade-leave-to {
        opacity: 0;
    }
    
    .fade-enter-to,
    .fade-leave {
        opacity: 1;
    }
</style>
<script>
    window.onload = function() {
        let vm = new Vue({
            el: '#mydiv',
            data: {
                title: '点击切换状态!',
                status: true
            },
        })
    }
</script>

<body>
    <div id="mydiv">
        <button @click="status=!status">切换状态</button>
        <!-- 写了transition,会调用类样式 -->
        <transition name="fade">
            <span v-if="status">{{title}}</span>
        </transition>

    </div>
</body>

</html>

代码截图：

在这里插入图片描述

运行结果

在这里插入图片描述

- Vue 动画提供的钩子函数

8个钩子函数
before-enter, enter, after-enter, enter-cancel
before-leave, leave, after-leave, leave-cancel

- Vue 动画结合第三方动画框架

第三方动画框架animate.css
https://cdn.jsdelivr.net/npm/animate.css@3.5.1

在这里插入图片描述

例子：（animation动画）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>animation动画</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.8/vue.js"></script>
</head>
<style>
    @keyframes myAnimation {
        from {
            height: 100px;
        }
        to {
            height: 0px;
        }
    }
    
    span {
        display: block;
        width: 100px;
        height: 100px;
        background-color: blueviolet;
        /* float: left; */
    }
    
    .fade-enter-active,
    .fade-leave-active {
        /* transition: all 3s; */
        animation: myAnimation 3s;
    }
    
    .fade-enter,
    .fade-leave {
        /* opacity: 0; */
    }
    
    .fade-enter-to,
    .fade-leave-to {
        /* opacity: 1; */
    }
</style>
<script>
    window.onload = function() {
        let vm = new Vue({
            el: '#mydiv',
            data: {
                title: '点击切换状态!',
                status: true
            },
        })
    }
</script>

<body>
    <div id="mydiv">
        <button @click="status=!status">切换状态</button>
        <!-- 写了transition,会调用类样式 -->
        <transition name="fade">
            <span v-if="status">{{title}}</span>
        </transition>

    </div>
</body>

</html>

代码截图：

在这里插入图片描述
运行结果截图：