Vue基础-3

最新推荐文章于 2024-11-01 14:29:13 发布

smile.1

最新推荐文章于 2024-11-01 14:29:13 发布

阅读量1.6k

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_48345246/article/details/127017820

版权

本文深入探讨Vue.js的核心特性，包括自定义指令的创建，如v-focus，用于实现点击按钮获取输入框焦点；过滤器（管道）的使用，如数值格式化和日期处理；组件的定义与传参，强调降低耦合性；以及过渡动画的实现，包括使用内置过渡类名、第三方动画库Animate.css和关键帧动画。这些内容揭示了Vue.js在实际开发中的强大功能和灵活性。

摘要由CSDN通过智能技术生成

1、自定义指令

<body>
    <div id="app">
        <h1>自定义点击按钮获取焦点指令</h1>
        <input type="text" v-focus="flag">
        <button @click.prevent.stop="flag=!flag">change</button>
    </div>
</body>
<script>
new Vue({
        el: "#app",
        data() {
            return {
                flag: true
            }
        },
        directives: {
            //自定义v-focus指令
            "focus": {
                //当被插入时 inserted
                //只绑定一次 bind
                //更新数据时 update
                update(el, binding) {
                    //el指令对应的节点
                    //binding.value 指令的值
                    if (binding.value) {
                        //让指令对应的节点获取焦点
                        el.focus();
                    }
                }
            }
        }
    })
</script>

2、过滤，管道

<body>
    <div id="app">
        <h1>过滤(管道)</h1>
        <p>{{3.1415926|fix(3)}}</p>
        <p>{{3.1415926|fix(4)}}</p>
        <p>{{3.141592614561564156|fix(6)}}</p>
        <p>{{10|number(2)}}</p>
        <p>{{15|max(20)}}</p>
        <p>{{'2022-9-19'|date}}</p>
        <p>{{'2000-9-22'|date}}</p>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        filters: {
            //val 是过滤前的值；return 过滤后的值；len fix 过滤的参数
            fix(val, len = 2) { //len不加=2默认len为0
                return Number(val).toFixed(len);
            },
            number(val, num) {
                return eval(Number(val) - Number(num));
            },
            max(val, num) {
                return Number(val) > Number(num) ? `${val}` : `${num}`;
            },
            date(val) {
                var time1 = new Date(val).getTime();
                var time2 = new Date().getTime();
                var dis = time2 - time1;
                var day = Math.floor(dis / 1000 / 60 / 60 / 24);
                return `${day}天前`;
            }
        }
    })
</script>

3、Vue选项

el 模板
data 数据
methods 方法
directives 指令
filters 过滤
watch 监听
computed 计算
props 属性
created 创建完毕

4、动画

动画，即两个状态形成过度的过程；如进入和离开（v-show v-if）

（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>
    <style>
        .fade-enter-active {
            /* 进入整个状态 */
            transition: all ease 20s;
        }

        .fade-enter {
            /* 进入初始状态 */
            opacity: 0;
            transform: rotate(-180000deg);
        }

        .fade-enter-to {
            /* 进入最终状态 */
            opacity: 1;
            transform: rotate(0deg);
        }

        .fade-leave-active {
            /* 离开整个状态 */
            transition: all ease 20s;
        }

        .fade-leave {
            /* 离开初始状态 */
            opacity: 1;
            transform: rotate(0deg);
        }

        .fade-leave-to {
            /* 离开最终状态 */
            opacity: 0;
            transform: rotate(180000deg);
        }
    </style>
</head>

<body>
    <div id="app">
        <button @click="flag=!flag">切换</button>
        <p>
            <transition name="fade">
                <img v-show="flag" src="../img/ban1.jpg" />
            </transition>
        </p>
    </div>
</body>
<script src="../js/vue.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                flag: true
            }
        }
    })
</script>

</html>

（2）使用第三方css动画库

<!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>
    <link rel="stylesheet" href="../css/animate.min.css">
</head>

<body>
    <div id="app">
        <button @click="flag=!flag">切换</button>
        <p>
            <transition leave-active-class="hinge animated" enter-active-class="bounceInDown animated">
                <img v-show="flag" src="../img/ban1.jpg" />
            </transition>
        </p>
    </div>
</body>
<script src="../js/vue.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                flag: true
            }
        }
    })
</script>

</html>

（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>
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: scale(0);
            }

            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        @keyframes fadeOut {
            0% {
                opacity: 1;
            }

            100% {
                opacity: 0;
            }
        }

        .fade-enter-active {
            /* 进入整个状态 */
            animation: fadeIn ease 1s;
        }

        .fade-leave-active {
            /* 离开整个状态 */
            animation: fadeOut ease 1s;
        }
    </style>
</head>

<body>
    <div id="app">
        <button @click="flag=!flag">切换</button>
        <p>
            <transition name="fade">
                <img v-show="flag" src="../img/ban1.jpg" />
            </transition>
        </p>
    </div>
</body>
<script src="../js/vue.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                flag: true
            }
        }
    })
</script>

</html>