2.3Java全栈开发前端+后端(全栈工程师进阶之路)-前端框架VUE3-基础-Vue进阶

Vue方法、计算属性及监听器

在vue中处理复杂的逻辑的时候,我们经常使用计算属性、方法及监听器。

  1. methods:方法:它们是挂载在Vue对象上的函数,通常用于做事件处理函数,或自己封装的自定义函数。

  2. computed:计算属性:在Vue中,我们可以定义一个计算属性,这个计算属性的值,可以依赖于某个data中

的数据。或者说:计算属性是对数据的再加工处理。

  1. watch:监听器:如果我们想要在数据发生改变时做一些业务处理,或者响应某个特定的变化,我们就可以通

过监听器,监听数据的变化,从而做出相应的反应。

computed 计算属性

计算属性是根据依赖关系进行缓存的计算,并且只在需要的时候进行更新。

<div id="app">原数据:{{msg}} <br>新数据:{{reversedMsg}}
</div><script src="../js/vue3.js"></script>
<script>Vue.createApp({data() {return {msg: 'hello world!'}},computed:{reversedMsg(){// 反转操作return this.msg.split('').reverse().join('');}}}).mount('#app');
</script>

一个案例:根据商品数量修改总价

<div id="app">商品名称:小米手机; 数量:<button @click="sub">-</button>{{quantity}}<button @click="add">+</button><br>总价:{{total}}
</div><script src="../js/vue3.js"></script>
<script>Vue.createApp({data() {return {quantity: 1}},computed:{total(){return this.quantity*100;}},methods:{add(){this.quantity++;},sub(){this.quantity--;}}}).mount('#app');
</script>

另一个案例:对数据进行过滤处理。

<div id="app">{{newMoney}}
</div><script src="../js/vue3.js"></script>
<script>Vue.createApp({data() {return {money: 1000}},computed:{newMoney(){return this.money + '¥';}},}).mount('#app');
</script>

methods 方法

在使用vue的时候,可能会用到很多的方法,它们可以将功能连接到事件的指令,甚至只是创建一个小的逻辑就像

其他函数一样被重用。接下来我们用方法实现上面的字符串反转。

<div id="app">{{msg}} <br>{{reversedMsg()}}
</div><script src="../js/vue3.js"></script>
<script>Vue.createApp({data() {return {msg: 'hello world!'}},methods:{reversedMsg(){return this.msg.split('').reverse().join('');}}}).mount('#app');
</script>

虽然使用computed和methods方法来实现反转,两种方法得到的结果是相同的,但本质是不一样的。

计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变的时候才会重新求值,这就意味着 只要message还没有发生改变,多次访问reversedMessage计算属性立即返回的是之前计算的结果,而不会再次执 行计算函数。

而对于methods方法,只要发生重新渲染,methods调用总会执行该函数。

如果某个computed需要的遍历一个极大的数组和做大量的计算,可以减小性能开销,如果不希望有缓存,则用 methods。

watch 监听器

watch能够监听数据的改变。监听之后会调用一个回调函数。 此回调函数的参数有两个:

  1. 更新后的值(新值)

  2. 更新前的值(旧值)

监听基本数据类型

下面使用watch来监听商品数量的变化。如果商品数量小于1,就重置成上一个值。

<div id="app">商品名称:小米手机; 数量:<button @click="sub">-</button>{{quantity}}<button @click="add">+</button><br>总价:{{total}}
</div><script src="../js/vue3.js"></script>
<script>Vue.createApp({data() {return {quantity: 1}},computed:{total(){return this.quantity*100;}},methods:{add(){this.quantity++;},sub(){this.quantity--;}},watch:{quantity(newVal,oldVal){this.quantity = newVal<=0?oldVal:newVal;}}}).mount('#app');
</script>

深度监听

在上面的例子中,监听的简单的数据类型,数据改变很容易观察,但是当需要监听的数据变为对象类型的时候,上

面的监听方法就失效了,因为上面的简单数据类型属于浅度监听,对应的对象类型就需要用到深度监听,只需要在

上面的基础上加上deep: true就可以了。

<div id="app">商品名称:{{goods.name}}; 数量:<button @click="sub">-</button>{{goods.quantity}}<button @click="add">+</button><br>总价:{{total}}
</div><script src="../js/vue3.js"></script>
<script>Vue.createApp({data() {return {goods:{name: '小米手机',quantity: 1}}},computed:{total(){return this.goods.quantity*100;}},methods:{add(){this.goods.quantity++;},sub(){this.goods.quantity--;}},watch:{goods:{handler(newVal,oldVal){/** * 注意:虽然使用深度监听,可以监听到对象的改变。 * 但是,由于是对象类型,所以newVal与oldVal都指向同一个对象。 * 所以,newVal与oldVal中的quantity都是改变后的新值。 */ console.log(newVal,oldVal)this.goods.quantity = newVal.quantity<=0?oldVal.quantity:newVal.quantity;},deep: true}}}).mount('#app');
</script>

上面代码中,由于监听的是对象类型,所以newVal与oldVal都指向同一个对象。

所以,在深度监听对象时,是不能正确获取更新前的对象和更新后的对象的。

解决方案:利用计算属性将对象变成字符串后再监听。

<div id="app">商品名称:{{goods.name}}; 数量:<button @click="sub">-</button>{{goods.quantity}}<button @click="add">+</button><br>总价:{{total}}
</div>
<script src="../js/vue3.js"></script>
<script>Vue.createApp({data() {return {goods:{name: '小米手机',quantity: 1}}},computed:{total(){return this.goods.quantity*100;},goodsStr(){return JSON.stringify(this.goods);}},methods:{add(){this.goods.quantity++;},sub(){this.goods.quantity--;}},watch:{goodsStr(newVal,oldVal){let newGoods = JSON.parse(newVal);let oldGoods = JSON.parse(oldVal);this.goods.quantity = newGoods.quantity<=0?oldGoods.quantity:newGoods.quantity;}}}).mount('#app');
</script>

Vue的表单绑定

v-bind实现了数据的单向绑定,将vue实例中的数据同元素属性值进行绑定,接下来看一下vue中的数据双向绑定v-model。

v-mode实现表单绑定

<div id="app"><h3>注册</h3><form>用户名:<input type="text" v-model="user.userName"><br>密码:<input type="password" v-model="user.password"><br>确认密码:<input type="password" v-model="user.beginPass"><br><!-- 单选框 -->性别:<input type="radio" v-model="user.sex" value="0">男 <input type="radio" v-model="user.sex" value="1">女<br><!-- 复选框 -->爱好:<input type="checkbox" v-model="user.like" value="0">读书<input type="checkbox" v-model="user.like" value="1">体育<input type="checkbox" v-model="user.like" value="2">旅游<br><!-- 下拉选 -->国籍:<select v-model="user.nationality"><option value="0">中国</option><option value="1">美国</option><option value="2">俄罗斯</option></select><br><!--   文本域 -->个人简介:<textarea cols="30" rows="5" v-model="user.brief"></textarea> <br><!--  <button @click="reg">注册</button>--><input type="button" @click="reg" value="注册"></form>
</div>
<script src="../js/vue3.js"></script>
<script>Vue.createApp({data() {return {user:{userName:'',password:'',beginPass:'',sex: 0,like: [],nationality: 0,brief: ''}}},methods:{reg(){console.log(this.user);}}}).mount('#app');
</script>

v-model修饰符

v-model中还可以使用一些修饰符来实现某些功能:

  1. v-model.lazy 只有在input输入框发生一个blur时才触发,也就是延迟同步到失去焦点时。

  2. v-model.trim 将用户输入的前后的空格去掉。

  3. v-model.number 将用户输入的字符串转换成number。

<div id="app">{{num}} <input type="text" v-model.lazy="num"><br><input type="text" v-model.trim="msg"><button @click="add">点击</button><br>{{num+1}} <input type="text" v-model.number="num"><br>
</div>
<script src="../js/vue3.js"></script>
<script>Vue.createApp({data() {return {num: '10',msg: 'hello'}},methods:{add(){console.log(this.msg)}}}).mount('#app');
</script>

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

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

相关文章

Ubuntu服务器创建新用户及解决新用户登录Access denied问题

目录 Ubuntu服务器创建新用户及解决新用户登录Access denied问题创建账号步骤创建用户只创建用户添加用户到sudo组 允许账号远程连接重启ssh服务 删除账号要删除用户而不删除用户文件如果要删除并且删除用户的家目录和邮件 查询指令查看所有用户查询特定用户账户信息查看用户组…

Java中面向对象三大特征(封装、继承、多态)

目录 一、封装 1.1 封装的意义 1.2 如何进行封装 二、继承 2.1 继承的意义 2.2 如何继承 2.3 继承的优点 2.4 继承的缺点 三、多态 3.1 多态的定义 3.2 多态的使用要求 一、封装 所谓封装就是将对象的属性隐藏起来&#xff0c;不让外界直接访问&#xff0c;而是通过…

【Micropython Pitaya Lite教程】key按键与EXTI中断

文章目录 前言一、按键的使用1.1 按键的简介1.2 读取按键的高低电平 二、EXIT外部中断2.1 EXIT外部中断简介2.2 外部中断基础知识2.3 设置外部中断2.4 示例代码 总结 前言 Micropython Pitaya Lite开发板提供了丰富的功能和灵活的扩展性&#xff0c;其中包括了按键&#xff08…

Python 全栈系列241 GFGo Lite迭代

说明 随着整个算网开发逐渐深入&#xff0c;各个组件、微服务的数量、深度在不断增加。由于算网是个人项目&#xff0c;我一直按照MVP(Minimum Viable Product )的原则在推进。由于最初的时候对架构、算法和业务的理解并没有那么深刻&#xff0c;所以MVP的内容还是在不断变化&…

精准医疗中的图像识别技术:从诊断到治疗的新变革

在精准医疗中&#xff0c;图像识别技术的应用正在从诊断到治疗带来一场新的变革。这种技术通过深度学习和计算机视觉算法&#xff0c;能够分析和解释医学图像&#xff0c;如X射线、CT扫描、MRI等&#xff0c;从而帮助医生更准确地诊断疾病&#xff0c;制定更个性化的治疗方案。…

IoTDB 入门教程 基础篇①——时序数据库为什么选IoTDB ?

文章目录 一、前文二、性能排行第一三、完全开源四、数据文件TsFile五、乱序数据高写入六、其他七、参考 一、前文 IoTDB入门教程——导读 关注博主的同学都知道&#xff0c;博主在物联网领域深耕多年。 时序数据库&#xff0c;博主已经用过很多&#xff0c;从最早的InfluxDB&a…

跟我学C++中级篇——const和constexpr的使用

一、从例程介绍 已经不同的篇章里介绍和分析过const及constexpr&#xff0c;特别对于后者&#xff0c;从c11到c14直到c17甚至以后&#xff0c;功能都不断的在完善。那么这么多复杂的应用如何搞清楚呢&#xff1f;下面先从代码看起&#xff1a; #include <iostream>void…

Linux基础之yum和vim

目录 一、软件包管理器yum 1.1 软件包的概念 1.2 软件包的查看 1.3 软件包的安装和删除 二、Linux编辑器之vim 2.1 vim的基本概念 2.2 正常模式&#xff08;命令模式&#xff09; 2.3 底行模式 2.4 输入模式 2.5 替换模式 2.6 视图模式 2.7 总结 一、软件包管理器yu…

MATLAB可视化图形绘制详解

图形常见的修饰命令 ①曲线修饰 曲线修饰包括曲线的顔色、线型和标示符号的设置。曲线修饰的命令格式如下。 plot(x,y,option):option定义了曲线的颜色、线型和标示符号。 MATLAB曲线修饰的各种选项见表 举例&#xff1a; x-2*pi:pi/50:2*pi; y1x.^2;y2cos(2*X);y3y1.*y2…

ctfshow web入门 php反序列化 web254--web259

web 254 只要传入的值与其类中的值相等即为true就有flag usernamexxxxxx&passwordxxxxxx web255 序列化和反序列化就像是把物品放进盒子和从盒子里取出物品的过程一样&#xff0c;只是在计算机编程中&#xff0c;我们是针对数据进行的操作。 这一题就是要把cookie进行序…

【Python项目】基于DJANGO的【基于语音识别的智能垃圾分类系统】

技术简介&#xff1a;使用Python技术、DJANGO框架、MYSQL数据库等实现。 系统简介&#xff1a;用户们可以在系统上面录入自己的个人信息&#xff0c;录入后还可以对信息进行修改&#xff0c;网站可以对用户上传的音频文件进行识别&#xff0c;然后进行垃圾分类。 背景&#xf…

【竞技宝jjb.lol】LOL:TES顺利晋级却暴露问题

北京时间2024年5月5日,英雄联盟2024MSI季中赛正在如火如荼的进行之中,目前入围赛阶段的比赛已经进入尾声,入围赛实力最强的两支战队T1、TES都已经顺利晋级淘汰赛阶段,在昨天的比赛结束之后,A组的FLY、PSG,B组的FNC、GAM将争夺剩下的两个出线名额。 回顾这次入围赛中,T1和TES的比…

课题学习(二十三)---三轴MEMS加速度计芯片ADXL372

声明&#xff1a;本人水平有限&#xff0c;博客可能存在部分错误的地方&#xff0c;请广大读者谅解并向本人反馈错误。 一、基础配置 测量范围-200g-200g&#xff0c;分辨率为12位&#xff0c; V s 、 V D D I / O V_s、V_{DDI/O} Vs​、VDDI/O​范围为1.6V-3.5V 1.1 引脚配…

第20天 多线程

多线程 cpu一次只能处理一条指令&#xff0c;所谓同时是因为人反应不过来 分为多个时间片段&#xff0c;尽可能平均分配给每一个线程 线程的创建 &#xff1a; 第1种方法&#xff1a;继承thread并重写run方法 psvm{ Thread t1 new MyThread1(); Thread t2 new MyThread2()…

u盘格式化后电脑读不出来怎么办?u盘格式化的东西还能恢复吗

随着科技的快速发展&#xff0c;U盘已成为我们日常生活和工作中不可或缺的数据存储工具。然而&#xff0c;有时我们可能会遇到U盘格式化后电脑无法读取的情况&#xff0c;或是误格式化导致重要数据丢失。面对这些问题&#xff0c;我们该如何应对&#xff1f;本文将为您详细解答…

Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 简单人脸检测/识别实战案例 之七 简单进行人脸检测并添加面具特效实现

Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 简单人脸检测/识别实战案例 之七 简单进行人脸检测并添加面具特效实现 目录

RISC-V异常处理相关内容

异常处理相关内容 异常处理相关内容异常处理准备工作异常处理函数Opensbi系统调用的注册异常处理相关内容 异常处理准备工作 这里需要特殊强调的是异常处理构建的相关内容: 这里会将a4寄存器中的值存储到CSR_MTVEC这个状态寄存器,也就是异常处理程序的的入口;如果遇到异常…

基于 Dockerfile 部署nginx服务(实现HTTPS功能)

目录 前言 1、任务要求 2、建立工作目录并上传nginx安装包 3、创建自签名证书 4、创建 nginx Dockerfile 文件 5、准备并编写 nginx.conf 配置文件 6、准备nginx页面文件 7、工作目录文件结构 8、生成镜像 8、启动容器并开启宿主机端口映射 9、浏览器测试 前言 Ngi…

电子电器架构刷写 --- Bootloader大揭秘

电子电器架构刷写 — Bootloader大揭秘 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何消耗你的人和事,多看一眼都是你的不对。非必要不费力证明自…

c语言刷题——输出图案

1.输出用“*”组成的X形图案 题目&#xff1a;请打印用“*”组成的X形图案 描述&#xff1a; 多组输入&#xff0c;一个整数&#xff08;2~20&#xff09;&#xff0c;表示输出的行数&#xff0c;也表示组成“X”的反斜线和正斜线的长度。 输出描述&#xff1a; 针对每行输…