计算属性与监听属性

【 1 】计算属性

image-20240427212743197

  • 计算属性大致就是这样

# 1  计算属性是基于它们的依赖进行缓存的# 2 计算属性只有在它的相关依赖发生改变时才会重新求值# 3 计算属性就像Python中的property,可以把方法/函数伪装成属性
# 计算属性本质上是一个函数,它们可以通过 get 和 set 方法对属性进行操作。# 4 写在computed中,必须返回值--》返回值才是属性-以后把他当属性用-for循环

个人的理解就是

  • vue中的计算属性的好处就是我比如在设置了一个input标签里写了计算属性之后 别的组件发生改变我的input标签也不会发生改变
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script></head>
<body>
<div id="app"><input type="text" v-model="name">--》》{{ newName }}<hr><input type="text" v-model="name1">---》{{ name1 }}</div>
</body>
<script>var vm = new Vue({el: '#app',data: {name: '',name1: ''},methods: {// 普通函数形式handleToUpper() {console.log('函数我执行了')return this.name.substring(0, 1).toUpperCase() + this.name.substring(1)}},computed:{// 将 handleToUpper() 方法改写为计算属性newName(){console.log('计算属性我执行了')return this.name.substring(0, 1).toUpperCase() + this.name.substring(1)}}})</script>
</html>

image-20240427230605301

【 2 】监听属性

# 1 监听住一个属性,只要这个属性发生变化,就执行函数

name 属性被监听,当它的值发生变化时,会触发相应的处理函数。

在Vue.js中,监听属性(Watchers)必须在 watch 对象中定义,而计算属性(Computed Properties)必须在 computed 对象中定义。

  • Watchers(监听属性):用于监听某个数据的变化,并在数据发生变化时执行一些自定义的逻辑。你可以在 watch 对象中定义一个或多个属性,每个属性对应一个要监听的数据,并指定一个处理函数。
  • Computed Properties(计算属性):用于基于已有的数据计算出一个新的值,这个新的值会被缓存起来,只有在相关的依赖发生变化时才会重新计算。你可以在 computed 对象中定义计算属性,每个属性对应一个计算值的处理函数。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script></head><div id="app"><input type="text" v-model="name"><p>新的 name: {{ name }}</p><p>旧的 name: {{ oldName }}</p>
</div><script>var vm = new Vue({el: '#app',data: {name: 'John',oldName: ''},watch: {// 监听name属性的变化name: function(newValue, oldValue) {this.oldName = oldValue; // 将旧的名字存储到oldName数据属性中console.log('Name changed from ' + oldValue + ' to ' + newValue);}}});
</script>
</html>

image-20240427231119588

【 3 】生命周期钩子

生命周期

  • new Vue---->根组件.03

image-20240428190832503

vue2 组件的生命周期钩子函数

  • 一个vue的组件,从创建开始—》到最后销毁—》经历一些过程—》每个过程都绑定了一个函数–》当到这个过程的时候,这个函数就会执行
    面向切面编程:AOP

8个生命周期钩子函数

  • beforeCreate: 组件创建之前实现这个:组件html,js–》html和js都是空的
  • created:组件创建完成后:js就有值了,html还是空的 (向后端发送ajax请求)
  • beforeMount:挂载模板之前,js有值,模板(html) 还是空的(向后端发送ajax请求)
  • mounted:挂载完成:js有值,模板有值
  • beforeUpdate:刷新之前执行:只要页面发送变化或js变量发生变化,就会触发它的执行
  • updated:刷新之后执行
  • beforeDestroy:被销毁之前执行 (资源清理性工作)
  • destroyed:被销毁之后执行

实际用途

  • 页面加载完成,向后端发请求拿数据
    • 写在create中
  • 组件中有定时任务,组件销毁,要销毁定时任务、
# 1 new Vue---->根组件
# 2 创建全局组件---》放在根组件中
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./vue/vue.js"></script>
</head>
<body>
<div id="app"><h1>组件使用</h1><button @click="hanleShow">显示隐藏组件</button><hr><Child v-if="isShow"></Child><hr></div>
</body>
<script>let a = {template: `<div><button @click="handleClick">{{ title }}</button></div>`,data() {return {title: '首页',t:null}},methods: {handleClick() {this.title = '拜年了'alert(this.title)}},beforeCreate() {console.log('beforeCreate')console.log(this.title)console.log(this.$el)},created() {// 跟后端交互console.log('created')console.log(this.title)console.log(this.$el)// 启动定时器--》每隔3s,打印helloworldthis.t=setInterval(()=>{console.log('hello world')},3000)},beforeMount() {console.log('beforeMount')console.log(this.title)console.log(this.$el)},mounted() {console.log('mounted')console.log(this.title)console.log(this.$el)},beforeUpdate() {console.log('beforeUpdate')},updated() {console.log('updated')},beforeDestroy(){console.log('beforeDestroy')// 销毁定时器clearInterval(this.t)this.t=null},destroyed() {console.log('destroyed')},}// 1 定义全局组件Vue.component('Child', a)var vm = new Vue({el: '#app',data: {isShow: true},methods: {hanleShow() {this.isShow = !this.isShow}}})</script>
</html>

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

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

相关文章

数据隐私新篇章:Facebook如何保护用户信息

随着数字化时代的到来&#xff0c;数据隐私保护成为了社交媒体平台和用户共同关注的焦点。作为全球最大的社交网络之一&#xff0c;Facebook一直致力于保护用户的隐私和数据安全。本文将深入探讨Facebook在数据隐私保护方面的措施和实践&#xff0c;以及其如何开启数据隐私的新…

vue实现简易基本对话功能

基于vue3.0实现的功能&#xff0c;仿照微信、QQ聊天界面。 HTML代码块 <template><el-container style"height: 100%" ref"bodyform"><div class"el_main_content"><div class"main_content_header">这是一…

Git基本配置,使用Gitee(一)

1、设置Giter的user name和email 设置提交用户的信息 git config --global user.name "username" git config --global user.email "Your e-mail"查看配置 git config --list2、生成 SSH 公钥 通过命令 ssh-keygen 生成 SSH Key -t key 类型 -C 注释 ssh-…

K8S 证书过期不能使用kubectl之后,kubeadm 重新生成证书

查询证书过期时间 kubeadm certs check-expiration重新生成证书 # 重新生成所有证书 kubeadm certs renew all # 重新生成某个组件的证书 kubeadm certs renew 组件名称 如&#xff1a;apiserver生成新的配置 # 重新生成kubeconfig配置 kubeadm init phase kubeconfig # 重…

LabVIEW中PID控制器系统的噪声与扰动抑制策略

在LabVIEW中处理PID控制器系统中的噪声和外部扰动&#xff0c;需要从信号处理、控制算法优化、硬件滤波和系统设计四个角度入手。采用滤波技术、调节PID参数、增加前馈控制和实施硬件滤波器等方法&#xff0c;可以有效减少噪声和扰动对系统性能的影响&#xff0c;提高控制系统的…

原生小程序一键获取手机号

1.效果图 2.代码index.wxml <!-- 获取手机号 利用手机号快速填写的功能&#xff0c;将button组件 open-type 的值设置为 getPhoneNumber--><button open-type"getPhoneNumber" bindgetphonenumber"getPhoneNumber">获取手机号</button> …

Spring使用的设计模式

Spring 框架是一个广泛使用的 Java 框架&#xff0c;它内部使用了多种设计模式来简化开发过程、提高代码的可维护性和扩展性。 以下是一些在 Spring 框架中常见的设计模式&#xff0c;以及用代码示例来解释它们&#xff1a; 一、工厂模式&#xff08;Factory Pattern&#xff…

elasticsearch7.15实现用户输入自动补全

Elasticsearch Completion Suggester&#xff08;补全建议&#xff09; Elasticsearch7.15安装 官方文档 补全建议器提供了根据输入自动补全/搜索的功能。这是一个导航功能&#xff0c;引导用户在输入时找到相关结果&#xff0c;提高搜索精度。 理想情况下&#xff0c;自动补…

02-CSS3基本样式

目录 1. CSS3简介 1.1 CSS3的兼容情况 1.2 优雅降级和渐进增强的开发思想 2. 新增选择器 2.1 选择相邻兄弟 2.2 匹配选择器 2.3 属性选择器(重点) 2.4 结构性伪类选择器&#xff08;重点&#xff09; 2.4.1 整体结构类型 2.4.2 标签结构类型 2.4.3 指定子元素的序号&…

模型训练、结果存储、API 调用的系列优化|ModelWhale 版本更新

蜂飞蝶舞&#xff0c;万物并秀&#xff0c;明媚的春光中 ModelWhale 带来新一轮的版本更新&#xff0c;期待为大家带来更优质的使用体验。 本次更新中&#xff0c;ModelWhale 主要进行了以下功能迭代&#xff1a; 新增 IDE 中使用训练记录&#xff08;专业版✓ 团队版✓&…

Ansible04-Ansible Vars变量详解

目录 写在前面6 Ansible Vars 变量6.1 playbook中的变量6.1.1 playbook中定义变量的格式6.1.2 举例6.1.3 小tip 6.2 共有变量6.2.1 变量文件6.2.1.1 变量文件编写6.2.1.2 playbook编写6.2.1.3 运行测试 6.2.2 根据主机组使用变量6.2.2.1 groups_vars编写6.2.2.2 playbook编写6.…

迈的普拉姆利普绘图:深入解析与实战应用

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、引言&#xff1a;matplotlib绘图的基本原理 代码案例 二、深入了解&#xff1a;matplo…

数据结构与算法02-排序算法

介绍 排序算法是计算机科学中被广泛研究的一个课题。历时多年&#xff0c;它发展出了数十种算法&#xff0c;这些 算法都着眼于一个问题&#xff1a;如何将一个无序的数字数组整理成升序&#xff1f;先来学习一些“简单排序”&#xff0c;它们很好懂&#xff0c;但效率不如其他…

闽盾杯 2021 DNS协议分析

今年CISCN的Tough DNS 的前戏就是DNS协议分析 直接可以查找到flag的base64形式Zmxh 发现就是请求的dnslog 携带的数据 过滤器就是 dns tshark -r dns.pcapng -T json -Y "dns" >1.json 字段选择 dns.qry.name tshark -r dns.pcapng -T json -Y "dns"…

内网渗透-隧道搭建ssp隧道代理工具

内网渗透-隧道搭建&ssp隧道代理工具 目录 内网渗透-隧道搭建&ssp隧道代理工具spp隧道代理工具spp工作原理图cs上线主机spp代理通信服务端配置客户端配置CS配置设置CS生成木马的监听器配置CS监听上线的监听器生成木马 spp隧道搭建服务端配置客户端配置CS配置 内网穿透&a…

根据模板和git commit自动生成日·周·月·季报

GitHub - qiaotaizi/dailyreport: 日报生成器 GitHub - yurencloud/daily: 程序员专用的日报、周报、月报、季报自动生成器&#xff01; config.json: { "Author": "gitname", "Exclude": ["update:", "add:", "…

实际测试stm32中断优先级

HAL_NVIC_SetPriority(IRQn_Type IRQn, uint32_t PreemptPriority, uint32_t SubPriority); void HAL_NVIC_EnableIRQ(IRQn_Type IRQn); void HAL_NVIC_DisableIRQ(IRQn_Type IRQn);第一个函数 HAL_NVIC_SetPriority 是用来设置单个优先级的抢占优先级和响应优先级的值。第二个…

恒压频比开环控制系统Matlab/Simulink仿真分析(SPWM控制方式)

介绍恒压频比的开环控制方法驱动永磁同步电机的转动&#xff0c;首先分析恒压频比的控制原理&#xff0c;然后在Matlab/Simulink中进行永磁同步电机恒压频比开环控制系统的仿真分析&#xff0c;最后将Simulink中的恒压频比控制算法生成代码加载到实际工程中进行工程实现。 一、…

丝绸之路网络安全论坛成功举办,开源网安受邀分享软件供应链安全落地经验

5月23日&#xff0c;2024第八届丝绸之路网络安全论坛在陕西宾馆会议中心成功举办&#xff0c;本次论坛由陕西省信息网络安全协会主办&#xff0c;以“汇聚万千智慧 夯实安全堤坝”为主题&#xff0c;邀请业内专家学者、企业代表、行业代表共计400余人参加。开源网安常务副总王颉…

【PostgreSQL17新特性之-冗余IS [NOT] NULL限定符的处理优化】

在执行一个带有IS NOT NULL或者NOT NULL的SQL的时候&#xff0c;通常会对表的每一行&#xff0c;都会进行检查以确保列为空/不为空&#xff0c;这是符合常理的。 但是如果本身这个列上有非空&#xff08;NOT NULL&#xff09;约束&#xff0c;再次检查就会浪费资源。甚至有时候…