前端系列课程之计算属性&侦听器和自定义指令（一）_计算属性返回自身命令-程序员宅基地

技术标签： vue Vue框架

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

目标：

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

计算属性

为什么需要计算属性？

（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>

运行结果：

在这里插入图片描述

**深度侦听：**

在这里插入图片描述

Vue响应工作原理

在这里插入图片描述

自定义指令

全局指令

通过directive创建全局指令

在这里插入图片描述

指令对象的钩子函数

bind
inserted
update
componentUpdated
unbind

例子：（完整版）

在这里插入图片描述

简化指令

简化指令的语法：

在这里插入图片描述

例子：（简化版）

在这里插入图片描述

局部指令

通过directive选项设置局部指令

在这里插入图片描述

指令对象钩子函数的参数

el
binding
a. name
b. value
c. expression
d. modifiers

在这里插入图片描述
例子：
输出结果为data中定义的title：this is Vue

在这里插入图片描述

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

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

W32Dasm反编译教程+工具_w32dsm-程序员宅基地

文章浏览阅读2k次。这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入给大家转一个..._w32dsm

插值表达式闪烁,网络慢Vue先显示花括号变量名_vue接口慢会先显示placeholder-程序员宅基地

文章浏览阅读378次。插值表达式闪烁,网络慢vue先显示花括号变量名使用Vue的插值表达式有个坑，就是当网络加载慢的时候，Vue.js还没加载到浏览器来，如下代码：<body> <div id="app"> <p>{{ msg }}</p> </div></body><script> var app = new Vue({ el:"#app", data:{ msg:'123' } })</scirp_vue接口慢会先显示placeholder

Android开发免积分资料（教程+工具+源码）下载汇总_android软件开发积分源码-程序员宅基地

文章浏览阅读667次。Android开发可谓如火如荼，越来越多开发人员进入这个行列，最近小弟为大家整理了一批免积分下载的Android优质资料，包括60个手册教程、10个相关工具和20套源码。资料众多，很难一一将资料上传分享，先将下载目录分享给大家，需要的就拿去，希望能帮助到大家~ 【免费】android界面效果全汇总.pdfhttp://down.51cto.com/data/209179Andro_android软件开发积分源码

Remote Debugging (2)-程序员宅基地

文章浏览阅读65次。use Eclipse| a Java application创建一个简单的maven项目Main.javapackage cn.zno;public class Main { public static void main(String[] args) { for (String arg : args) { ..._remote debugging for hadoop client

建立哈希表并进行插入删除查找元素操作_假设哈希表上删除操作已将记录关键字标记为delete 试设计一个查找及插入算法,-程序员宅基地

文章浏览阅读5.4k次，点赞3次，收藏7次。注意：1.本博客仅供参考交流使用，请读者务必自行实践，切勿生搬硬套2.由于笔者水平有限，若文中有错误或者可以改进之处，欢迎在评论区指出题目Description散列表（Hash table，也叫哈希表），是根据关键码值(Key value)而直接进行访问的数据结构。也就是说，它通过把关键码值映射到表中一个位置来访问记录，以加快查找的速度。这个映射函数叫做散列函数，存放记录的数组叫做散列表..._假设哈希表上删除操作已将记录关键字标记为delete 试设计一个查找及插入算法,

解决git每次提交代码都要输入帐号和密码问题_gitlab每次都要输入账号密码-程序员宅基地

文章浏览阅读3.8k次。执行下面这条代码git config --global credential.helper store然后首次提交的时候输入一次帐号和密码之后就不需要再次输入了_gitlab每次都要输入账号密码

随便推点

python2.7 中 print（）函数的使用及input()、与raw_input()的区别_python 2.7 input-程序员宅基地

文章浏览阅读2.2k次。一、python2.7 中 print（）函数的使用：直接输出双引号或单引号内的任何字符或数字输出变量的值，不用加双引号或单引号，直接在（）内写变量名称即可，或者print后面空格直接写变量名称同时输出多项内容，不同内容用逗号隔开，不同内容包括双引号或单引号内的内容、变量。在双引号或单引号内的内容中掺杂有一个变量或多个，在要输出变量值的位置用%加变量类型来代替，比如字符型%s,浮点型%f。并在双引号或单引号后面再加一个%号和括号，并在括号内按顺序写入变量名，变量之间用逗号隔开。字符串格式化输出：_python 2.7 input

DDR的基本原理_non target odt-程序员宅基地

文章浏览阅读2.8k次。一、软件平台与硬件平台　　软件平台：　　　　1、操作系统：Windows-8.1　　　　2、开发套件：无　　　　3、仿真工具：无　　硬件平台：　　　　1、 FPGA型号：无　　　　2、 DDR3型号：无二、存储器的分类　　存储器一般来说可以分为内部存储器(内存)，外部存储器(外存)，缓冲存储器(缓存)以及闪存这几个大类。内存也称为主存储器，位于系统主机板上，可以同CPU直接进行信息交换。其主要特点是：运行速度快，容量小。外存也称为辅助存储器，不能与CPU之间直接进行信息交..._non target odt

DP和HDMI区别_dp hdmi-程序员宅基地

文章浏览阅读1.2w次，点赞2次，收藏34次。转自：https://www.toutiao.com/i6877677362054595080在目前市面上显示器接口中，VGA和DVI已经逐渐退出了历史舞台，Type-C还算是小众，而DP（DisplayPort）与HDMI则成为了主流产品的标配，目前的主流级显卡也是以这两个输出接口为主，而新的问题也随之诞生了：当这两个接口都可以使用的时候，选择哪个会更好？对于大部分普通的消费者来说，显示器能跟主机正常连接就行，随便哪个接口都无所谓，反正能正常使用，但是对于DIY玩家来说，这个问题就显得非常重要_dp hdmi