前端系列课程之计算属性&侦听器和自定义指令（一）

最新推荐文章于 2022-11-02 15:12:24 发布

葡萄籽啊

最新推荐文章于 2022-11-02 15:12:24 发布

阅读量171

点赞数 1

分类专栏： Vue框架文章标签： vue

本文链接：https://blog.csdn.net/qiuqiudongdong/article/details/109003202

版权

Vue框架专栏收录该内容

12 篇文章 1 订阅

订阅专栏

计算属性&侦听器和自定义指令

目标：

掌握计算属性的应用
掌握监听器的应用
掌握自定义指令的应用

计算属性

为什么需要计算属性？

（1）模板语法可以使用表达式，但是不便于实现复杂的业务逻辑功能，也不利于维护

在这里插入图片描述

如何对绑定的title倒序？

例子：（倒序）

在这里插入图片描述

或者：

在这里插入图片描述

（2）计算属性可以解决模板语法的缺点，完成复杂的逻辑，便于代码维护。

计算属性的语法：

计算属性通过computed选项进行设置，以函数的方式实现业务功能，需要返回一个结果。

在这里插入图片描述

计算属性和方法的区别：

计算属性以来响应式属性，当响应式属性没有变化时，计算属性不会执行，而方法始终会执行。

例子：

在这里插入图片描述

计算属性的读写：

计算属性默认只有读取功能，如果需要写操作，需要定义set方法。

在这里插入图片描述

例子：（实现写入）


<body>
    <div id="app">
        <p>姓名：{{userName}}</p>
        <button @click="userName='李四'">修改</button>
    </div>
    <script>
        var app = new Vue({

            el: '#app',
            data: {
                firstName: "三",
                lastName: "张"
            },
            methods: {
            },
            computed: {
                userName: {
                    get() {
                        return this.lastName + this.firstName
                    },
                    set(value) {
                        this.lastName = value[0]
                        this.firstName = value[value.length - 1]
                    }
                }
            },
        })
    </script>
</body>

点击修改后，修改值

实际应用：案例一：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
    <title></title>
</head>

<body>
    <div id="app">
        search: <input type="text" name="" id="" v-model='age'>
        <table border="1">
            <tr>

                <th>编号：</th>
                <th>姓名：</th>
                <th>年龄：</th>
            </tr>
            <tr v-for="student,index in searchStus ">
                <td>{{index+1}}</td>
                <td v-for="value in student">{{value}}</td>

            </tr>
        </table>
    </div>
    <script>
        var app = new Vue({

            el: '#app',
            data: {
                age: 18,
                students: [{
                    name: 'tom',
                    age: 20
                }, {
                    name: 'jsck',
                    age: 23
                }, {
                    name: 'alex',
                    age: 34
                }, {
                    name: 'susan',
                    age: 50
                }, {
                    name: 'Jone',
                    age: 40
                }, ]
            },
            methods: {},
            computed: {
                searchStus() {
                    let newStus = []
                    for (let i = 0; i < this.students.length; i++) {
                        if (this.students[i].age > this.age) {
                            newStus.push(this.students[i])
                        }
                    }
                    return newStus
                },
            }
        })
    </script>
</body>

</html>

运行结果：（具有筛选功能）

在这里插入图片描述

注意：计算属性是同步操作，计算属性不支持异步请求

侦听器

侦听器的特性

侦听器是用来检测数据变化，从而添加自定义的业务逻辑代码
侦听器可以监测计算属性和非计算属性
侦听器可以实现比较复杂的逻辑，而计算属性一般用于简单的逻辑代码
侦听器可以执行异步操作，而计算属性是同步执行
侦听器的性能方面比不上计算属性

侦听器的语法

通过watch选项设置侦听器

在这里插入图片描述

例子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
    <title></title>
</head>

<body>
    <div id="app">
        <p>{{title}}</p>
        <button @click="title = 'hello'">修改属性</button>
    </div>
    <script>
        var app = new Vue({

            el: '#app',
            data: {
                title: 'this is Vue'
            },
            watch: {
                title: function(val, oldVal) {
                    console.log("原值：", oldVal)
                    console.log("修改后值：", val)
                }
            }
        })
    </script>
</body>

</html>

运行结果：

在这里插入图片描述

高级侦听器

深度侦听器
层次侦听器
多重侦听器

例子：

在这里插入图片描述
多重侦听：


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
    <title></title>
</head>

<body>
    <div id="app">
        <p>{{title}}</p>
        <p>电话:{{user.phone.home}}</p>
        <button @click="user.phone.home = '045222222222'">修改属性</button>
        <button @click="title = 'hello'">修改title属性</button>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                title: 'This is Vue',
                user: {
                    name: 'tom',
                    age: 18,
                    phone: {
                        home: '04521111111',
                        selfPhone: '12345678901'
                    }
                }
            },
            watch: {
                user: {
                    handler: function(val, oldVal) {
                        console.log("原值：", oldVal)
                    },
                    //是否深度追踪
                    deep: true
                },
                //多重侦听器
                title: [
                    function watch1(val, oldVal) {
                        console.log("原值：", oldVal)
                        console.log("新值：", val)
                    },
                    function watch2(val, oldVal) {
                        console.log("原值：", oldVal)
                        console.log("新值：", val)
                    }
                ]
            }
        })
    </script>
</body>

</html>

运行结果：

在这里插入图片描述