4.vue学习(21-25)

news2024/11/25 18:44:38

文章目录

  • 21.天气案例-监视属性引入
  • 22.监视属性
  • 23.深度监视
  • 24 监视的简写
  • 25 监视属性对比计算属性

21.天气案例-监视属性引入

在这里插入图片描述
效果:点击按钮,切换凉爽为炎热

vscode 开发vue的插件;vue 3 snippets

初步实现方式。计算属性:
在这里插入图片描述
案例中的坑:如果界面不变,vm工具里展示的也不变,但是实际如果变了的话,vm中的对象是会变化的。
在这里插入图片描述
在这里插入图片描述
简写的方案:@click后面可以使用简单的语句。比如你写个alert就不行,因为vm没有alert方法。
在这里插入图片描述
总结:

在这里插入图片描述

22.监视属性

watch实现上面的功能:能够监视到属性被修改了的事件。
在这里插入图片描述
可以用2个参数,旧的值,新的值。
在这里插入图片描述
应用场景:比如数据变化过大,比如温度,可以触发报警,发个请求之类的。

还有其他的配置:比如immediate属性。
在这里插入图片描述
监测的属性,可以是计算属性,也可以是普通属性。

监视功能的使用,可以在vm对象声明区域之外。如下:

在这里插入图片描述

总结:
在这里插入图片描述

23.深度监视

如果监视的是一个嵌套属性的子属性如何做(监视多级结构中某个属性的变化)?如下图,这个图实际上告诉我们前面的key不加引号其实是一种简写的形式。
在这里插入图片描述

如果监视的是父亲级别的结构,那么子属性的变化不会被捕获到。

在这里插入图片描述
如果监视父亲容器,也想监视到儿子元素的变化,可以用deep属性。这样只监视父亲元素,儿子元素一旦变化,也会触发。
在这里插入图片描述

总结:

在这里插入图片描述

24 监视的简写

简写形式的前提,是不需要配置其它的参数(比如deep,immediate),只有handle的时候,可以简写。

在这里插入图片描述
外置的监视的简写方法:
在这里插入图片描述

注意不要写成箭头函数,所有vue管理的函数,都要写成普通函数,不能写成箭头函数。

25 监视属性对比计算属性

首先,2个配置项不冲突。

使用监视实现下面的功能:
在这里插入图片描述

我们学了简写,先用简写,有一天用到复杂写法了,再回到复杂写法。
使用监视,必须data里面有这个最终的属性(案例中的全名)才行。
在这里插入图片描述

计算属性实现:

在这里插入图片描述
监听方案,更像是命令时编程。在上述的案例中,计算方式,比较合适。
新的需求,改完姓名之后,延迟1s,全名才会更新。
在这里插入图片描述
注意上面settimeout写的是箭头函数,找不到this的情况下,会自动往外找,这里的this就变成vm对象了。如果写成普通函数,this就变成windows对象了,就改变不了参数了。
监视属性,或者叫侦听属性,可以非常畅快的开启一个异步任务,但是计算属性就不行。下面的写法,界面直接就不对了。
在这里插入图片描述

为什么不对呢? 因为return 返回的是内部匿名函数,不是给fullName对象返回的。

计算属性里面是不能开启异步任务去维护数据的,但是watch方式可以。因为watch是没有返回值的,直接就是修改的vm的参数。

总结:
在这里插入图片描述

写普通函数,还是箭头函数,就是为了让this指向vm。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1354807.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

不想root,但想远程控制vivo手机?这个方法不用root也能做到

远程控制vivo手机不用root!今天给大家讲讲免Root情况下,笔记本电脑如何远程控制vivo手机。 在电脑和手机都安装AirDroid,这是免Root的关键。 下载AirDroid个人版 | 远程控制安卓手机软件下载下载AirDroid个人版进行文件传输和管理、远程控制安…

Fiddler抓包之【 抓取https请求 】详解教程

📢专注于分享软件测试干货内容,欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正!📢交流讨论:欢迎加入我们一起学习!📢资源分享:耗时200小时精选的「软件测试」资…

力扣hot100 二叉搜索树中第k小的元素 分治 中序遍历

👨‍🏫 题目地址 👨‍🏫 参考题解 😋 分治 /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeNode right;* TreeNode() {}* TreeNode(int va…

uni-app 从入门到精通 3天快速掌握 文字版 学习专栏

大家好,我是java1234小锋老师。 近日锋哥又卷了一波课程,uni-app 从入门到精通 3天快速掌握教程,文字版视频版。三天掌握。 2023版uniapp从入门到上天视频教程(Java后端无废话版),火爆更新中..._哔哩哔哩_bilibili2023版uniapp从…

报告解读:中国新一代终端安全市场洞察,2023

报告解读 中国新一代终端安全市场洞察 2023 安全防御的“最前线” 01 混沌的企业安全 以下来自CSO们最关注的安全热点问题: Q1我们如何看待当下泛化的终端安全,混合的IT环境企业面临的安全变化? IDC:伴随着全球数字化转型的快…

竞赛保研 基于机器视觉的手势检测和识别算法

0 前言 🔥 优质竞赛项目系列,今天要分享的是 基于深度学习的手势检测与识别算法 该项目较为新颖,适合作为竞赛课题方向,学长非常推荐! 🧿 更多资料, 项目分享: https://gitee.com/dancheng…

Swift并发的结构化编程

并发(concurrency) 早期的计算机 CPU 都是单核的,操作系统为了达到同时完成多个任务的效果,会将 CPU 的执行时间分片,多个任务在同一个 CPU 核上按时间先后交替执行。由于 CPU 执行速度足够地快,给人的错觉…

TDengine 荣获 2023 Frost Sullivan 客户价值领导力奖

近日,TDengine 被国际知名咨询公司沙利文(Frost & Sullivan)评为全球最佳工业数据管理解决方案,赢得了 2023 年客户价值领导力奖(Frost & Sullivan duoxie),该奖项重点关注引领行业创新…

S32K312软件看门狗之Software Watchdog Timer (SWT)

S32DS的SDK中提供了Wdg,是属于MCAL层的,配置有点复杂,还需要以来Gpt、Mcu和Platform框架里的东西,配置到已经开发好的工程中还容易出现配置问题。本文主要讲解Software Watchdog Timer (SWT)的软件看门狗配置和使用示例&#xff0…

易点易动固定资产管理系统:集成飞书,助力企业全生命周期固定资产管理

易点易动固定资产管理系统:集成飞书,助力企业全生命周期固定资产管理 在现代商业环境中,固定资产管理对企业的运营和发展至关重要。为了提高管理效率和降低成本,我们引入了易点易动固定资产管理系统,该系统集成了飞书&…

技术学习|CDA level I 描述性统计分析(数据的描述性统计分析)

技术学习|CDA level I 描述性统计分析(数据的描述性统计分析) 数据的描述性统计分析常从数据的集中趋势、离散程度和分布形态3个方面进行。 一、集中趋势 集中趋势是指数据向其中心值靠拢的趋势。测量数据的集中趋势,主要是寻找其中心值。…

聚“工匠”建“双城”,《天府工匠》第二季如何为“双城经济圈”助力?

文|新熔财经 作者|和花 被火烧过破损不堪,还受了潮粘连在一起的古籍书页,如何快速被修复?直径只有0.05—0.07毫米的头发丝上,如何清晰不粘连雕刻出“心无旁骛”,还要确保头发丝不断裂&#xf…

Sectigo泛域名https证书有什么用

Sectigo旗下有泛域名https证书实现了同时为多个域名网站提供安全加密服务,虽然将域名网站的类型限制在了域名以及域名旗下的二级子域名中。Sectigo旗下的泛域名https证书分为DV基础型和OV企业型,提高了https证书对各个场景的适配。今天就随SSL盾小编了解…

主流桌面浏览器Chrome,FireFox和Edge等如何禁用弹出式窗口阻止程序,这里有详细步骤

为什么你想知道如何禁用浏览器中的弹出式窗口阻止程序?毕竟,弹出式窗口是网络的祸害:显示烦人的广告、虚假的安全消息和其他刺激,会分散你的浏览注意力,甚至可能包含恶意代码。 所有主要的桌面浏览器现在都默认阻止弹出式窗口,那么你到底为什么要取消阻止这些害虫呢?事…

自制数据库空洞率清理工具-C版-02-EasyClean-V1.1(支持南大通用数据库Gbase8a)

一、环境信息 名称值CPUIntel(R) Core(TM) i5-1035G1 CPU 1.00GHz操作系统CentOS Linux release 7.9.2009 (Core)内存3G逻辑核数2Gbase8a版本8.6.2-R43.34.27468a27EasyClean版本V1.1 二、简述 工作和兴趣相结合的产物,既能更好的完成工作,也能看看自…

springCould中的Hystrix【上】-从小白开始【7】

目录 1.简单介绍❤️❤️❤️ 2.主要功能 ❤️❤️❤️ 3.正确案例❤️❤️❤️ 4.使用jmeter压测 ❤️❤️❤️ 5.建模块 80❤️❤️❤️ 6.如何解决上面问题 ❤️❤️❤️ 7.对8001进行服务降级❤️❤️❤️ 8.对80进行服务降级 ❤️❤️❤️ 9.通用降级方法❤️❤️…

win10提示“KBDSF.DLL文件缺失”,游戏或软件无法启动运行,快速修复方法

很多用户在日常使用电脑的时候,或多或少都遇到过,在启动游戏或软件的时候,Windows桌面会弹出错误提示框“KBDSF.DLL文件缺失,造成软件无法启动或运行,请尝试重新安装解决”。 首先,先来了解DLL文件是什么&a…

【计算机毕业设计】SSM场地预订管理系统

项目介绍 本项目分为前后台,前台为普通用户登录,后台为管理员登录; 用户角色包含以下功能: 按分类查看场地,用户登录,查看网站公告,按分类查看器材,查看商品详情,加入购物车,提交订单,查看订单,修改个人信息等功能。 管理员角…

急急急!直接从压缩包打开文件,保存后再打开却找不到了怎么办???

这是我今天发生的蠢事,好险,改了一个上午的word文档,因为word突然未响应,强制关闭后再打开word文档找不到了才想起来自己没有解压缩就。。。。 !!!!!!&#…

绿色环保之选:探索智慧公厕公司厂家的可持续发展策略

随着城市化的不断推进,如何在城市中创造更为宜居的环境成为了当今社会亟待解决的问题。在这个背景下,智慧公厕公司厂家应运而生,不仅通过引入创新技术提升了公共卫生水平,更以其独特的可持续发展策略成为了绿色环保之选。 符合智慧…