AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

112.【Vue-细刷-03】（一）

2023-09-24 30
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
公共DNS（含HTTPDNS解析），每月1000万次HTTP解析
全局流量管理 GTM，标准版 1个月
云解析DNS，个人版 1个月
简介： 112.【Vue-细刷-03】

112.【Vue-细刷-03】

Vue-03

(二十)、过渡和动画

1.过渡案列_原生实现

这里我们对img标签类名的修改的时候，我们需要使用到querySelectory(".类名")。不能使用GetElementByName().

transform:  透明和旋转
transition: 过渡 scale() 缩放
querySectory(): 获取Dom元素，可以修改className
<!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>
    <style>
        .picture{
            width: 400px;
            /* 是图片在变化，我们需要给图片添加过渡:  1s监听一次，对所有的元素 匀速 */
            transition: 1s all linear;
        }
        .leave{
            /* 透明度+旋转 */
            transform: scale(0) rotate(180deg);
        }
        .come{
            /* 透明度+旋转 */
            transform: scale(1) rotate(0deg);
        }
    </style>
</head>
<body>
    <button id="btn">点我切换</button><br>
    <img class="picture" src="https://img2.baidu.com/it/u=3626502260,211748893&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800">
    <script type="text/javascript">
        var btn=document.getElementById("btn");
        // 这里我们使用getElementByName()实现不了。
        const img=document.querySelector(".picture");
        btn.addEventListener('click',()=>{
            if(img.className == "picture"|| img.className =="picture come"){
                // 这里我们对img标签里面的class名进行修改
                img.className='picture leave';
            }
            else{
                img.className="picture come";
            }
        })
    </script>
</body>
</html>
32

2.过渡案列_Vue实现

1.需要实现v-show();
2.需要过渡标签:<transition name=xxx></transition>
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>
    <style>
        .picture {
            width: 400px;
        }
        /* 离开起点 : 显示程度为1，不旋转*/
        .qiuku-leave {
            opacity: 1;
            transform: scale(1) rotate(0deg);
        }
        /* 离开终点 */
        .qiuku-leave-to {
            opacity: 0;
            transform: scale(0) rotate(180deg);
        }
        /* 离开过程:在过程中添加过渡 */
        .qiuku-leave-active {
            transition: 1s all linear;
        }
        /*  */
        .qiuku-enter {
            opacity: 0;
            transform: scale(0) rotate(180deg);
        }
        .qiuku-enter-to {
            opacity: 1;
            transform: scale(1) rotate(0deg);
        }
        .qiuku-enter-active {
            transition: 4s all linear;
        }
    </style>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        1.Vue实现过渡
            (1).在目标元素外包裹<translation name="xxx"></translation>标签
            (2).编写css样式:
                进入:
                    进入起点:(xxx-enter)
                    进入终点:(xxx-enter-to)
                    进入过程:(xxx-enter-active)
                离开:
                    离开起点:(xxx-leave)
                    离开终点:(xxx-leave-to)
                    离开过程:(xxx-leave-active)    
     -->
    <div id="root">
        <button @click="isShow=!isShow">点我切换</button><br>
        <!-- 我们为图片添加: 过渡。第一步:需要使用到v-show.第二步: 需要在外部添加过渡标签。 -->
        <transition name="qiuku">
            <img v-show="isShow" class="picture"
                src="https://img2.baidu.com/it/u=3626502260,211748893&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800">
        </transition>
    </div>
    <script type="text/javascript">
        new Vue({
            el: "#root",
            data: {
                isShow: "true"
            },
        });
    </script>
</body>
</html>

3.动画案列_Vue实现 (1)

animation: 动画名字 延迟几秒。
@keyframes： 动画帧率展现
<!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>
    <style>
        .picture {
            width: 400px;
        }
        .enter {
            animation: jsxs_enter 1s;
        }
        @keyframes jsxs_enter {
            0%{
                /* scale 缩放 */
                transform: scale(1);
            }
            50%{
                /* scale */
                transform: scale(1.3);
            }
            100%{
                /* scale */
                transform: scale(0);
            }
        }
        .leave{
            animation: jsxs_leave 1s;
        }
        @keyframes jsxs_leave {
            0%{
                /* scale 缩放 */
                transform: scale(0);
            }
            50%{
                /* scale */
                transform: scale(1.3);
            }
            100%{
                /* opacity: 0; */
                transform: scale(1);
            }
        }
    </style>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <button id="btn" @click="click_btn" >点我切换</button><br>
        <img class="picture"
            src="https://img2.baidu.com/it/u=3626502260,211748893&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800">
    </div>
    <script type="text/javascript">
        new Vue({
            el: "#root",
            data: {
                isShow: "true"
            },
            methods: {
                click_btn(){
                    var btn=document.getElementById("btn");
                    const img=document.querySelector(".picture");
                        if(img.className=="picture"||img.className=="picture leave"){
                        img.className="picture enter";
                    }else{
                        img.className="picture leave";
                    }
                    }
            },
        });
    </script>
</body>
</html>

4.动画案列_Vue实现(2)

animation : 名字 时间
                1.基本编码:
                    (1).在目标元素外包裹<transition name="xxx"></transition>
                    (2).编写:进入动画、离开动画的样式
                3.类名规范:
                    进入动画样式: xxx-enter-active
                    离开动画样式: xxx-leave-active  
<!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>
    <style>
        .picture {
            width: 400px;
        }
        .qiuku-enter-active{
            animation: jsxs_enter 1s;
        }
        @keyframes jsxs_enter{
            0%{
                /* scale 缩放 */
                transform: scale(0);
            }
            50%{
                /* scale */
                transform: scale(1.3);
            }
            100%{
                /* scale */
                transform: scale(1);
            }
        }
        /* 动画离开 */
        .qiuku-leave-active {
            animation: jsxs 1s;
        }
        @keyframes jsxs{
            0%{
                /* scale 缩放 */
                transform: scale(1);
            }
            50%{
                /* scale */
                transform: scale(1.3);
            }
            100%{
                /* scale */
                transform: scale(0);
            }
        }
    </style>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 
            动画:
                1.基本编码:
                    (1).在目标元素外包裹<transition name="xxx"></transition>
                    (2).编写:进入动画、离开动画的样式
                3.类名规范:
                    进入动画样式: xxx-enter-active
                    离开动画样式: xxx-leave-active    
     -->
    <div id="root">
        <button  @click="isShow=!isShow" >点我切换</button><br>
        <transition name="qiuku">
                    <img v-show="isShow" class="picture"src="https://img2.baidu.com/it/u=3626502260,211748893&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800">
        </transition>
    </div>
    <script type="text/javascript">
        new Vue({
            el: "#root",
            data: {
                isShow: "true"
            },
        });
    </script>
</body>
</html>

5.Vue实现时间格式化

时间格式化CDN

<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
• 1
<!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="../js/vue.js"></script>
    <!-- 利用cdn远程引入 moment.js -->
    <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
</head>
<body>
    <div id="root">
        <h2>现在的时间是:</h2>
        <h3>{{fmtData("YYYY-MM-DD HH:mm:ss")}}</h3>
        <h3>{{fmtData()}}</h3>
    </div>
    <script type="text/javascript">
        new Vue({
            el:"#root",
            data:{
                time:Date.now(),
            },
            methods: {
                // 假如说:"没有信息传入，那么我们就让这个格式称为默认的。如果有信息传入，我们就使用信息传入的"
                fmtData(str="YYYY-MM-DD"){
                    //  这里的moment的参数如果为空: 那么就解析此时此刻的时间。如果添加参数，那么就解析添加的
                    return moment(this.time).format(str);
                }
            },
            mounted() {
                setInterval(()=>{
                    this.time=Date.now();
                },1000);
            },
        });
    </script>
</body>
</html>

6.Vue实现过滤器

``

配置过滤器

// 全局注册的过滤器:  "名字",函数(value就是被调用者的值，str就是我们传入的值)
        Vue.filter('dataFormat',function(value,str="YYYY-MM-DD"){
            console.log(value+" "+str);
            return moment(value).format(str);
        });

使用过滤器

<div id="root">
        <h2>现在的时间是:</h2>
        <h3>{{time |dataFormat("YYYY-MM-DD HH:mm:ss")}}</h3>
        <h3>{{time | dataFormat}}</h3>
    </div>
<!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="../js/vue.js"></script>
    <!-- 利用cdn远程引入 moment.js -->
    <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
</head>
<body>
    <div id="root">
        <h2>现在的时间是:</h2>
        <h3>{{time |dataFormat("YYYY-MM-DD HH:mm:ss")}}</h3>
        <h3>{{time | dataFormat}}</h3>
    </div>
    <div id="root2">
        <h2>现在的时间是:</h2>
        <h3>{{time |dataFormat("YYYY-MM-DD HH:mm:ss")}}</h3>
        <h3>{{time | dataFormat}}</h3>
    </div>
    <script type="text/javascript">
        // 全局注册的过滤器:  "名字",函数(value就是被调用者的值，str就是我们传入的值)
        Vue.filter('dataFormat',function(value,str="YYYY-MM-DD"){
            console.log(value+" "+str);
            return moment(value).format(str);
        });
        new Vue({
            el:"#root",
            data:{
                time:Date.now(),
            },
            mounted() {
                setInterval(()=>{
                    this.time=Date.now()
                },1000)
            },
            },
        );
        new Vue({
            el:"#root2",
            data:{
                time:Date.now(),
            },
            mounted() {
                setInterval(()=>{
                    this.time=Date.now()
                },1000)
            },
            },
        );
    </script>
</body>
</html>

7.Vue常用内置指令

常用的指令:
            v-text :更新元素的innerText
            v-html :更新元素的innerHtml
            v-if   :条件渲染(动态控制结点是否存在)
            v-else :条件渲染(动态控制结点是否存在)
            v-show :条件渲染(动态控制display)
            v-for :遍历数组/对象
            v-on: 绑定时间监听,可简写为@
            v-bind:xxx :强制绑定解析表达式
            v-model: 双向绑定
<!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="../js/vue.js"></script>
</head>
<body>
    <!-- 
        常用的指令:
            v-text :更新元素的innerText
            v-html :更新元素的innerHtml
            v-if   :条件渲染(动态控制结点是否存在)
            v-else :条件渲染(动态控制结点是否存在)
            v-show :条件渲染(动态控制display)
            v-for :遍历数组/对象
            v-on: 绑定时间监听,可简写为@
            v-bind:xxx :强制绑定解析表达式
            v-model: 双向绑定   
     -->
    <div id="root">
        <!-- 这里的指令语法会覆盖掉原来的插值语法 -->
        <a :href="url" v-text="text">{{text1}}</a>
        <h2 v-html="htmlStr">欢迎呀 非Vue</h2>
    </div>
    <script type="text/javascript">
        new Vue({
            el:"#root",
            data:{
                url:"https://www.baidu.com",
                text:"点我去学习",
                text1:"122",
                htmlStr:"<h2>欢迎呀 Vue</h2>"
            }
        });
    </script>
</body>
</html>

文章标签：
CDN
云解析DNS
JavaScript
CDN
相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
吉士先生
目录
相关文章
热爱技术的小郑
|
3天前
|
JavaScript
Vue中如何设置在执行删除等危险操作时给用户提示（二次确认后执行对应的操作）
这篇文章介绍了在Vue项目中如何实现执行删除等危险操作时的二次确认机制，使用Element UI的`el-popconfirm`组件来弹出确认框，确保用户在二次确认后才会执行删除操作。
热爱技术的小郑
19 0
Vue中如何设置在执行删除等危险操作时给用户提示（二次确认后执行对应的操作）
热爱技术的小郑
|
3天前
|
JavaScript
如何创建一个Vue项目（手把手教你）
这篇文章是一篇手把手教读者如何创建Vue项目的教程，包括使用管理员身份打开命令行窗口、找到存放项目的位置、通过vue-cli初始化项目、填写项目信息、进入项目目录、启动项目等步骤，并提供了一些常见第三方库的引入方法。
热爱技术的小郑
7 0
如何创建一个Vue项目（手把手教你）
热爱技术的小郑
|
3天前
|
前端开发
StringBoot+Vue实现游客或用户未登录系统前、可以浏览商品等信息、但是不能购买商品或者加入购物车等操作。登录系统显示用户的登录名（源码+讲解）
这篇文章介绍了使用StringBoot+Vue实现用户登录状态判断的方法，包括前端加载用户信息和后端设置session的源码示例。
热爱技术的小郑
9 0
热爱技术的小郑
|
4天前
|
JavaScript 编译器
成功解决：Module build failed: Error: Vue packages version mismatch
这篇文章记录了解决Vue项目中遇到的"Module build failed: Error: Vue packages version mismatch"错误的步骤，原因是项目中Vue依赖的版本不一致，解决方法是删除`node_modules`后重新安装指定版本的Vue和`vue-template-compiler`，确保版本匹配，最终成功运行项目。
热爱技术的小郑
16 4
成功解决：Module build failed: Error: Vue packages version mismatch
热爱技术的小郑
|
4天前
|
JavaScript
在Vue中使用Avue、配置过程以及实际应用
这篇文章介绍了作者在Vue项目中集成Avue组件库的完整过程，包括安装、配置和实际应用，展示了如何利用Avue实现动态表单和数据展示的功能。
热爱技术的小郑
9 1
在Vue中使用Avue、配置过程以及实际应用
VipSoft
|
4天前
|
JavaScript
Vue devDependencies 与 dependencies 能别
Vue devDependencies 与 dependencies 能别
VipSoft
10 3
热爱技术的小郑
|
3天前
|
JavaScript
如何在Vue页面中引入img下的图片作为背景图。../的使用
这篇文章介绍了在Vue页面中如何引入`img`目录下的图片作为背景图，提供了两种使用相对路径的方法。第一种是使用`../assets/img/`作为路径引入图片，第二种是使用`../../assets/img/`作为路径。文章还展示了使用这些方法的代码实现和效果展示，并鼓励读者学无止境。
热爱技术的小郑
16 0
如何在Vue页面中引入img下的图片作为背景图。../的使用
热爱技术的小郑
|
3天前
|
JavaScript
如何通过点击商品的信息（图片或者文字）跳转到更加详细的商品信息介绍（前后端分离之Vue实现）
该博客文章介绍了如何在Vue 2框架下实现前后端分离的商品信息展示和详情页跳转，包括排序筛选、详情展示、加入购物车和分享功能。
热爱技术的小郑
7 0
如何通过点击商品的信息（图片或者文字）跳转到更加详细的商品信息介绍（前后端分离之Vue实现）
热爱技术的小郑
|
3天前
|
JavaScript
在Vue中使用Swiper轮播图、同时解决点击轮播图左右切换按钮不生效的问题、同时将轮播图抽离出为一个公共组件
这篇文章介绍了在Vue中如何使用Swiper插件创建轮播图，解决Swiper左右切换按钮不生效的问题，并展示了如何将Swiper轮播图抽离成一个可复用的公共组件，同时提供了详细的安装、配置和优化建议。
热爱技术的小郑
7 0
在Vue中使用Swiper轮播图、同时解决点击轮播图左右切换按钮不生效的问题、同时将轮播图抽离出为一个公共组件
热爱技术的小郑
|
4天前
|
JavaScript
Vue学习之--------插槽【默认插槽、具名插槽、作用域插槽】
这篇文章详细介绍了Vue.js中的插槽概念，包括默认插槽、具名插槽和作用域插槽的使用方式和实际应用示例，通过代码演示了如何在组件中定义和使用插槽来实现内容的灵活替换和展示。
热爱技术的小郑
4 0
Vue学习之--------插槽【默认插槽、具名插槽、作用域插槽】