Vue学习--vue自定义指令及过渡（动画）

最新推荐文章于 2023-07-21 17:34:57 发布

冲鸭嘟嘟可

最新推荐文章于 2023-07-21 17:34:57 发布

阅读量240

点赞数 1

分类专栏： Vue 文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/fuhao6363/article/details/129412765

版权

Vue 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

自定义全局指令

1、注册全局指令
所谓全局指令，是指可以在多个vue实例中使用的指令。
注册全局指令时，指令名不要用大写字母，且不要加v- ，但是使用时一定要加v- 。注册全局指令格式如下：

Vue.directive('指令名',{
	定义对象
})

定义对象为钩子函数，钩子函数主要有五个：bind:function()、inserted:function()、update:function()、componentUpdate:function()、和unbind:function()。

以上钩子函数可以根据需要进行定义。钩子函数根据需要可以有参数，也可以没有参数，下面通过实例来理解具体含义。

<body>
    <div id="app">
        <h3 v-my-dir="msg">{{msg}}</h3>
        <button @click="change">改变</button>
        <button @click="jiebang">解绑</button>
    </div>

    <script>
        Vue.directive('my-dir', {
            bind() {//常用
                //此例的指令绑定到h3 时就执行
                alert('指令第一次绑定到元素上调用，只调用一次，一般执行初始化操作')
            },
            inserted() {
                //被绑定的元素 此例为h3 h3插入div中执行
                alert('被绑定元素插入DOM中调用')
            },
            update() {
                alert('被绑定的元素所在模板更新时调用')
            }
        })

        var vm = new Vue({
            el: "#app",
            data: {
                msg: "这是vue程序"
            },
            methods: {
                change: function () {
                    this.msg = "这是第二个VUE"
                },
                jiebang: function () {
                    vm.$destory()
                }
            }
        })
    </script>
</body>

此例的指令绑定到h3 时就执行

在这里插入图片描述

在这里插入图片描述
运行测试钩子函数的执行时机，实际就是alert方法的参数说明。

钩子函数简写

在很多时候，可能想在bind和update时触发相同的行为，而不关心其他的钩子函数。

 Vue.directive('red-text', function (el, binding) {
            el.innerHTML = binding.value.chartAt(0).toUpperCase() + binding.value.slice(1);
            el.style.color = 'red'
        })

即第二个参数直接传入一个函数，这个函数相当于bind函数和date函数的钩子函数，也就是在刚绑定的元素会执行，在被绑定的元素更新时也会执行。

自定义局部指令

在某个vue指令内部定义，即通过Vue实例选项directives:{}定义的指令为局部指令。

<body>
    <div id="app">
        被绑定元素自动获取焦点：<input type="text" v-myfocus>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: 'welcome to xdz'
            },
            directives: {
                'myfocus': {  //注意：指令名不能有大写字母
                    inserted(el) {
                        el.focus()
                    }
                }
            }
        })
    </script>
</body>

假设下面增加了一个VUE实例，绑定到app2上，在app2下能使用局部定义的指定，v-myfocus指令吗？
答案是不能。

过渡效果实现

1、什么是过渡
元素在显示和隐藏时，不会直接显示和隐藏，而是会有一个过渡或动画的效果。常用的过渡效果是使用CSS来实现。
Vue在插入、更新或者移除DOM时，提供多种不同的应用过渡效果。
2、基本用法
使用transition组件，将要执行过渡的元素包含在该组件内。代码如下：

<transition>
	想要运动的元素
</transition>

<body>
    <div id="app">
        <!-- 单击点我  下面的p标签进行显示或隐藏 -->
        <button @click="flag=!flag">点我</button>
        <p v-show="flag">这是一个p标签</p>
    </div>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                flag: false
            },

        })
    </script>
</body>

在这里插入图片描述
单击按钮之后：

p标签显示出来，但是没有任何过渡效果，因此需要对此进行改进，使显示与隐藏有一个过渡效果。需要为目标元素添加一个父元素< transition name=‘xxx’>,让父元素通过自动应用class类名来达到效果。

设置过渡效果会为对应元素动态添加相关的class类名有以下几种。

xxx-enter:定义显示前的效果
xxx-enter-active:定义显示过程的效果
xxx-enter-to：定义显示后的效果
xxx-leave：定义隐藏前的效果。
xxx-leave-active：定义隐藏过程的效果
xxx-leave-to：定义隐藏后的效果

如果不设置此name属性，则类名就以v-开头，即xxx改为v

<!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="../myfirstpro/vue.js"></script>
    <style>
        .p1 {
            width: 200px;
            height: 200px;
            background-color: red;
        }

        /* 设置动画进入和离开时的共同效果。如果transition组件没有设置name属性，此处就以v-开头 */
        .tagp-enter-active,
        .tagp-leave-active {
            transition: all 2s ease
        }

        /* 设置单独进入过程的过渡效果 */
        .tagp-enter-active {
            opacity: 1;
            width: 200px;
            height: 200px;
        }

        /* 单独设置离开的过渡效果 */
        .tagp-leave-active {
            opacity: 0;
            width: 0px;
            height: 0px;
        }

        /* 刚开始进入状态效果和离开之后的效果。此样式必须放在最后，否则无效 */
        .tagp-enter,
        .tagp-leave-to {
            opacity: 0;
            width: 50px;
            height: 50px;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 单击点我  下面的p标签进行显示或隐藏 -->
        <button @click="flag=!flag">点我</button>
        <transition name="tagp">
            <p v-show="flag" class="p1">这是一个p标签</p>
        </transition>
    </div>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                flag: false
            },

        })
    </script>
</body>

</html>