前端小白的学习之路(Vue2 二)

提示：学习vue2的第二天，笔记记录：自定义指令，事件修饰符，属性计算，属性监听，属性过滤

一、自定义指令

1.全局注册

2.局部注册

二、事件修饰符

1.常用事件修饰符

1）事件相关修饰符

2）键盘事件相关修饰符

3）鼠标事件相关修饰符

三、属性计算

四、属性监听

五、属性过滤

一、自定义指令

在 Vue 中，你可以通过自定义指令来扩展 HTML 元素的行为。

1.全局注册

directive:全局注册通过Vue下的一个方法directive来自定义指令，全局注册的指令可以在任何 Vue 实例的模板中使用

<!DOCTYPE html>
<html lang="zh-cn">

<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>Vue</title>
</head>

<body>
    <div id="app">
        <!-- 定义一个改变字体颜色的指令-->
        <h2 v-color="`purple`">你好，世界</h2>

    </div>
    <script src="./libs/vue.js"></script>
    <script>
        // 当文档上指令满足不了我们的需求，可以选择自定义指令

        // 1) 注册全局指令
        Vue.directive('color', {
            // 当被绑定的元素插入到 DOM 中时改变字体颜色
            //el:被绑定的元素，option:接受的参数，是一个对象
            inserted: function (el,option) {
                if(typeof el === 'object'){
                    el.style.color = option.value;
                }
            }
        })

        //禁止控制台输出日志信息
        Vue.config.productionTip = false;
        new Vue({
            //挂载容器
            el: "#app",
    
        })


    </script>
</body>

</html>

2.局部注册

directives:局部注册是在vue实例中通过在对象directives中进行自定义指令

<!DOCTYPE html>
<html lang="zh-cn">

<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>Vue</title>
</head>

<body>
    <div id="app">
        <!-- 渲染纯文本 -->
        <h2 v-text="`hello title`"></h2>
        <hr>
        <!--自定义指令渲染文本-->
        <h3 v-mytext="2024"></h3>

    </div>
    <script src="./libs/vue.js"></script>
    <script>
        // 当文档上指令满足不了我们的需求，可以选择自定义指令

        //禁止控制台输出日志信息
        Vue.config.productionTip = false;
        new Vue({
            //挂载容器
            el: "#app",
            // 2)自定义指令
            directives: {
                // 名称
                mytext: {
                    inserted(el, option) {
                        // console.log(el, option);
                        if (typeof el === 'object') {
                            el.innerHTML = option.value;
                        }
                    }
                },

            }

        })


    </script>
</body>

</html>

二、事件修饰符

事件修饰符是用于修改事件监听器行为的特殊指令。它们以点号 . 结尾，用于在触发事件时执行特定的行为或修改事件的默认行为。

1.常用事件修饰符

1）事件相关修饰符

.stop：阻止事件冒泡。相当于调用 event.stopPropagation()。
.prevent：阻止事件的默认行为。相当于调用 event.preventDefault()。
.capture：使用事件捕获模式，即在捕获阶段处理事件。
.self：只当事件是从侦听器绑定的元素本身触发时才触发回调。如果事件是从内部元素触发的，则不触发。
.once：事件只会触发一次，触发后会自动移除事件监听器。
.passive：告诉浏览器该事件监听器不会调用 preventDefault()。这可以提高滚动性能。

2）键盘事件相关修饰符

.enter：监听 Enter 键。
.tab：监听 Tab 键。
.delete 或 .backspace：监听删除键（Backspace）。
.esc：监听 Esc 键。
.space：监听空格键。
.up：监听上箭头键。
.down：监听下箭头键。
.left：监听左箭头键。
.right：监听右箭头键

3）鼠标事件相关修饰符

.left：监听鼠标左键点击事件。
.right：监听鼠标右键点击事件。
.middle：监听鼠标中键点击事件。
.up：监听鼠标滚轮向上滚动事件。
.down：监听鼠标滚轮向下滚动事件。

三、属性计算

使用属性计算，你可以在 Vue 实例中定义一些衍生属性，这些属性会根据 Vue 实例的响应式数据动态计算得到。这在很多情况下可以简化模板中的逻辑，使得模板更加清晰和简洁。

通过在Vue实例中在computed对象中定义方法来进行属性计算，在模板语法中方法无需加小括号()

<!DOCTYPE html>
<html lang="zh-cn">
<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>Vue</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.css">
</head>
<body>
    <div id="app">
        <div class="container mt-3">
             <div class="row">
                <div class="col-4">
                    <input v-model="firstName" type="text" class="form-control" placeholder="请输入姓">
                </div>
                <div class="col-4">
                    <input v-model="lastName" type="text" class="form-control" placeholder="请输入名">
                </div>
                <div class="col-4">
                    <span style=" font-size: 22px;text-decoration: underline;">{{fullName}}</span>
                </div>
             </div>
        </div>
        <hr>
        <div class="container">
             <input class="form-control" type="number" v-model="num">
             <button class="btn btn-success mt-2">计算 {{num}} 乘以 2 等于 {{doubleValue}} </button>
        </div>

    </div>
    <script src="./libs/vue.js"></script>
    <script>


        //禁止控制台输出日志信息
        Vue.config.productionTip = false;
        new Vue({
            //挂载容器
            el: "#app",
            // 设置数据
            data: {
                firstName: "",// 姓
                lastName: "",//名
                num: 0
            },
            // 属性计算 (只读不写)
            // 例如： fullName ， doubleValue这些属性是不可以修改的
            // 错误:  this.fullName = "xxx"
            // 此处是对象
            computed: {
                // 在这个对象中写方法，这个方法名称就可以作为属性，retrun的值就是计算的结果
                // 全名
                // fullName: {
                //     get(){
                //         return this.firstName + this.lastName
                //     }
                // },
                fullName(){
                    return this.firstName + this.lastName;
                },
                // 获取双倍的值
                doubleValue(){
                    return this.num * 2;
                }
            }

        })
    </script>
</body>
</html>

四、属性监听

在vue实例中在watch对象中来监听 Vue 实例上的数据变化，并在数据变化时执行自定义的方法。通过属性监听，你可以监视一个或多个属性的变化，并在这些属性发生变化时执行相应的操作。

<!DOCTYPE html>
<html lang="zh-cn">

<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>Vue</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.css">
</head>

<body>
    <div id="app">
        <div class="container mt-3">
            <input v-model="city" type="text" placeholder="请输入城市" class="form-control">
        </div>

        <div class="container mt-3">
            <ul>
                <li @click="play(1)">歌曲1</li>
                <li @click="play(2)">歌曲2</li>
                <li @click="play(3)">歌曲3</li>
                <li @click="play(4)">歌曲4</li>
            </ul>
        </div>
        <div class="container mt-3">
            <button @click="addAge" class="btn btn-success">改变用户年龄</button>
        </div>

    </div>
    <script src="./libs/vue.js"></script>
    <script>
        // 属性侦听
        // 主要是观察数据的变化，只要数据发生改变，就执行相关的回调函数
        // data、路由等数据发生改变，就可以执行对应的回调，往往用于处理一些异步的操作
        // 例如： 根据城市名称查询天气信息，根据歌曲id获取歌曲信息

        //禁止控制台输出日志信息
        Vue.config.productionTip = false;
        new Vue({
            //挂载容器
            el: "#app",
            data: {
                city: "广州",
                music_id: "",
                user: {
                    age: 20
                }
            },
            // 侦听器
            // 侦听器、属性侦听不是计算结果，不用写return 
            // 这些回调函数的名称就是属性名称，例如data: {city: music_id,user 。。。。}
            watch: {
                // 观察city属性的变化
                city: {
                    // nValue（改变之后的数据）,oValue（改变之前的数据） 可选参数
                    handler(nValue, oValue) {
                        console.log("观察city是否发生改变....")
                    }
                },
                music_id: {
                    handler(nValue, oValue) {
                        console.log("观察music_id是否发生改变....", nValue)
                    }
                },
                // 遇到引用数据类型的时候，考虑使用深度侦听
                user: {
                    deep: true,// 深度侦听
                    immediate: true, // 立即执行
                    handler(nValue, oValue) {
                        console.log("观察user.age是否发生改变....", nValue.age)
                    }
                }
            },
            // 设置方法
            methods: {
                play(id) {
                    this.music_id = id;
                },
                addAge() {
                    this.user.age++;
                }

            }
        })
    </script>
</body>

</html>

在本案例中监听一个对象中的一个属性值的变化中用到了两个常用的修饰符

1.deep:当你想要深度监听对象内部属性的变化时，可以使用 deep 修饰符。默认情况下，watch 只会监听对象的引用变化，而不会递归监听对象内部属性的变化。

2.immediate:当你想要在声明监听时立即执行一次监听函数时，可以使用 immediate 修饰符

五、属性过滤

通过在vue实例的filter对象中自定义方法来返回一个过滤正则，可以在模板中使用属性过滤器来动态地对数据进行处理，然后将处理后的数据显示在视图中。Vue 中的属性过滤器通过在模板中使用管道符 | 来实现，语法格式为 {{ expression | filterName }}。

<!DOCTYPE html>
<html lang="zh-cn">
<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>Vue</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.css">
</head>
<body>
    <div id="app">
        <div class="container mt-3">
             <h3>{{str}}</h3>
             <h3>{{str | xxx }}</h3>
             <h3>{{str | yyy }}</h3>
             <h3>{{str | xxx | zzz }}</h3>
        </div>

    </div>
    <script src="./libs/vue@2.7.16/vue.js"></script>
    <script>


        //禁止控制台输出日志信息
        Vue.config.productionTip = false;
        new Vue({
            //挂载容器
            el: "#app",
            data: {
                str: "abc123efg456"
            },
            // 过滤器
            // 就是可以作为工具函数来使用哦~~~
            // 通过 “|” 填写过滤器，让其执行相关的回调函数，在函数作用域中可以把处理结果返回
            filters: {
                // 编写xxx回调函数
                xxx(value){
                    // console.log(this);// window
                    // 去掉所有数字字符
                    return value.replace(/\d/g,'');
                },
                yyy(value){
                    // console.log(this);// window
                    // 去掉所有字母字符
                    return value.replace(/[a-z]/ig,'');
                },
                zzz(value){
                    // 把字母转大写
                    return  value.toUpperCase();
                }
            }
        })
    </script>
</body>
</html>