Vue全家桶--05 过度/动画和自定义指令

Z时代
2024-01-10
分类：综合

vue

5.1 过渡/动画指令

元素在显示和隐藏时，实现过滤或者动画的效果。常用的过渡和动画都是使用CSS来实现的

**在CSS中操作 trasition（过滤）或 animation（动画）达到不同效果

**为目标元素添加一个父元素<trasition name='xxx'>，让父元素通过自动应用class类名来达到效果

**过渡与动画时，会为对应元素动态添加的相关class类名：

1.xxx-enter：定义显示前的效果

2.xxx-enter-active：定义显示过程的效果

3.xxx-enter-to：定义显示后的效果

4.xxx-leave：定义隐藏前的效果

5.xxx-leave-active：定义隐藏过程的效果

6.xxx-leave-to：定义隐藏后的效果

5.2 Vue内置指令

v-html：内容按普通HTML插入，可防止XSS攻击

v-show：根据表达式的真假值，切换元素的display CSS属性来显示隐藏元素

v-if：根据表达式的真假值，来渲染元素

v-else：前面必须有 v-if 或 v-else-if

v-else-if：前面必须有 v-if 或 v-else-if

v-for：遍历的数组或对象

v-on：绑定事件监听器

v-bind：用于绑定元素属性

v-model：在表单控件或者组件上创建双向绑定

v-once：一次性插值，当后面数据更新后视图数据不会更新

v-pre：可以用来显示原始插入值标签{{}}，并跳过这个元素和它的子元素的编译过程，加快编译。

v-text：等价于{{}}用于显示内容，但区别在于：{{}}会造成闪烁问题，v-text不会闪烁

v-cloak：如果想用{{}}又不想有闪烁问题，则使用v-cloak来处理

　　　　添加一个属性选择器[v-cloak]的CSS隐藏样式：[v-cloak]{display:none;}

　　　　原理：默认一开始被Vue管理的模板是隐藏着的，当Vue解析处理完DOM模板之后，会自动把这个样式去除，然后就显示出来。

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>
        [v-cloak] {display: none;}
    </style>
</head>
<body>
    <div id="app">
        <h3> v- text</h3>
        <p v-text="msg"></p>
        <p v-text="msg"></p>
        <div v-cloak>
            <p>{{ msg }}</p>
            <p>{{ msg }}</p>
        </div>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'hello!'
            }
        });
    </script>
</body>
</html>

5.3 自定义指令

除了内置指令外，Vue也允许注册自定义指令，有的情况下，你仍然需要对普通DOM元素进行底层操作，这时候使用自定义指令更为方便。

全局自定义指令：

// 注册全局自定义指令，可以在多个Vue管理的入口下使用该指令
        // 第一个参数为指令名，但是不要有v-开头
        Vue.directive('upper-text',{
            //一般对样式 的操作在bind中，bind函数只调用一次
            bind: function (el) {
                el.style.color = 'red'
            },
            //一般对js操作在inserted中，inserted也是只调用一次
            // el是当前指令作用的那个Dom元素，
            // binding用于获取使用了当前指令的绑定值(value)、表达式(expression)、指令名(name)等
            inserted: function (el, binding) {
                // 将所有字母文本内容转换为大写
                el.innerHTML = binding.value.toUpperCase()
            }
        })

局部自定义指令：

new Vue({
            el: '#app',
            data: {
                message: 'mengxuegu, 陪你学习伴你梦想'
            },
            //注册局部自定义指令：只能在当前Vue实例管理的入口 下引用这个指令
            directives: {
                'focus': { // 指令名，
                    bind: function () {
                    },
                    // 刷新页面自动获取焦点
                    inserted: function (el, binding) {
                        //被 v-focus 作用的那个元素在刷新页面后会自动 获取焦点
                        el.focus()
                    }
                }
            }
        })

DEMO：自动获取焦点/字体转换

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
    <div id="app">
        <p v-upper-text="message">xxxxx</p>
        自动获取焦点：<input type="text" v-focus>
    </div>
    <div id="app2">
        <p v-upper-text="msg">xxxxx</p>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        // 注册全局自定义指令，可以在多个Vue管理的入口下使用该指令
        // 第一个参数为指令名，但是不要有v-开头
        Vue.directive('upper-text',{
            //一般对样式 的操作在bind中，bind函数只调用一次
            bind: function (el) {
                el.style.color = 'red'
            },
            //一般对js操作在inserted中，inserted也是只调用一次
            // el是当前指令作用的那个Dom元素，
            // binding用于获取使用了当前指令的绑定值(value)、表达式(expression)、指令名(name)等
            inserted: function (el, binding) {
                // 将所有字母文本内容转换为大写
                el.innerHTML = binding.value.toUpperCase()
            }
        })
        new Vue({
            el: '#app',
            data: {
                message: 'mengxuegu, 陪你学习伴你梦想'
            },
            //注册局部自定义指令：只能在当前Vue实例管理的入口 下引用这个指令
            directives: {
                'focus': { // 指令名，
                    bind: function () {
                    },
                    // 刷新页面自动获取焦点
                    inserted: function (el, binding) {
                        //被 v-focus 作用的那个元素在刷新页面后会自动 获取焦点
                        el.focus()
                    }
                }
            }
        })
        new Vue({
            el: '#app2',
            data: {
                msg: 'hello'
            }
        })
    </script>
</body>
</html>