当前位置: 首页 > news >正文

Vue学习笔记(四)

在这里插入图片描述

事件处理

我们可以使用 v-on 指令 (通常缩写为 @ 符号) 来监听 DOM 事件,并在触发事件时执行一些 JavaScript。用法为 v-on:click="methodName" 或使用快捷方式 @click="methodName"

事件处理器的值可以是:

  1. 内联事件处理器:事件被触发时执行的内联JavaScript语句(与onclick类似)
  2. 方法事件处理器:一个指向组件上定义的方法的属性名或是路径。

内联事件处理器

内联事件处理器通常用于简单场景

<script>export default {data() {return {count: 0}}}
</script><template><h3>内联事件处理器</h3><button @click="count++">Add</button><p>{{ count }}</p>
</template>

方法事件处理器(重)

<script>export default {data() {return {count: 0}},methods: {addCount() {console.log('addCount');// 读取data中的count值,然后加1,使用thisthis.count++;}}}
</script><template><h3>方法事件处理器</h3><button @click="addCount">Add</button><p>Count is: {{ count }}</p>
</template>

事件参数

事件参数可以获取event对象和通过事件传递数据

获取event对象

<script>export default {data() {return {names: ['Tom', 'Jerry', 'Mickey'],}},methods: {getNameHander(name){console.log(name)}}}
</script>

事件传参

<script>export default {data() {return {names: ['Tom', 'Jerry', 'Mickey'],}},methods: {getNameHander(e){console.log(e)}}}
</script><template><h3>事件传参</h3><p @click="getNameHander(item)" v-for="(item,index) in names" :key="index">{{ item }}</p></template>

传递参数过程中获取event

<script>export default {data() {return {names: ['Tom', 'Jerry', 'Mickey'],}},methods: {getNameHander(name,e){console.log(name),console.log(e)}}}
</script><template><h3>事件传参</h3><p @click="getNameHander(item,$event)" v-for="(item,index) in names" :key="index">{{ item }}</p></template>

注意$event

事件修饰符

在处理事件时调用event.preventDefault()event.stopPropagation()是很常见的。尽管我们可以直接在方法内调用,但如果方法能更专注于数据逻辑而不用去处理DOM事件的细节会更好
为解决这一问题,Vue为v-on提供了事件修饰符,常用有以下几个:

  1. .stop 阻止冒泡
  2. .prevent 阻止默认行为
  3. .once
  4. .enter
<script>export default {data() {return {}},methods: {clickHandle(e) {// 阻止默认行为// e.preventDefault()console.log('clickHandle')},clickDiv() {console.log('clickDiv')},ClickP(e) {// 阻止冒泡// e.stopPropagation()console.log('ClickP')}}}
</script><template><h3>事件修饰符</h3><a @click.prevent="clickHandle" href="https://baidu.com">百度一下</a><div @click="clickDiv"><p @click.stop="ClickP">测试冒泡</p></div>
</template>

数组变化侦测

<script>export default {data() {return {names: ['张三', '李四', '王五']}},methods: {addListHandle() {//引起UI自动更新// this.names.push('赵六')this.names.concat(['赵六']) //不会引起UI自动更新//可以this.names = this.names.concat(['赵六']) }}}
</script><template><h3>数组变化侦测</h3><button @click="addListHandle">添加数据</button><ul><li v-for="(item, index) in names" :key="index">{{item}}</li></ul>
</template>

变更方法

Vue能够侦听响应式数组的变更方法,并在它们被调用时触发相关的更新。这些变更方法包括:

  1. push()
  2. pop()
  3. shift()
  4. unshift()
  5. splice()
  6. sort()
  7. reverse()

替换一个数组

变更方法,顾名思义,就是会对调用它们的原数组进行变更。相对地,也有一些不可变(immutable)方法,例如filter(),concat()slice(),这些都不会更改原数组,而总是返回一个新数组。当遇到的是非变更方法时,我们需要将旧的数组替换为新的。

例子

<script>export default {data() {return {names: ['张三', '李四', '王五'],Numbers1: [1, 2, 3, 4, 5],Numbers2: [6, 7, 8, 9, 10],}},methods: {addListHandle() {//引起UI自动更新// this.names.push('赵六')this.names = this.names.concat(['赵六']) //不会引起UI自动更新},concatHandle() {this.Numbers1 = this.Numbers1.concat(this.Numbers2)}}}
</script><template><h3>数组变化侦测</h3><button @click="addListHandle">添加数据</button><ul><li v-for="(item, index) in names" :key="index">{{item}}</li></ul><button @click="concatHandle">合并数组</button><h3>数组1</h3><p v-for="(item, index) in Numbers1" :key="index">{{item}}</p><h3>数组2</h3><p v-for="(item, index) in Numbers2" :key="index">{{item}}</p>
</template>

计算属性

模板中的表达式虽然方便,但也只能用来做简单的操作。如果在模板中写太多逻辑,会让模板变得臃肿,难以维护。因此我们推荐使用计算属性来描述依赖响应式状态的复杂逻辑。

<script>export default {data() {return {itbaizhan: {name: "百战程序员",content: ["前端", "后端", "全栈"]}}},//计算属性computed: {itbaizhanContent() {return this.itbaizhan.content.length > 0 ? 'Yes' : 'No'}},//放函数或者方法methods: {itbaizhanContents() {return this.itbaizhan.content.length > 0 ? 'Yes' : 'No'}}}
</script><template><h3>计算属性</h3><h3>{{ itbaizhan.name }}</h3><p>{{ itbaizhanContent }}</p><p>{{  itbaizhanContents() }}</p>
</template>

计算属性缓存跟方法的比较

在表达式中调用函数会得到跟计算属性相同的结果
计算属性会有缓存,如果运行5次,使用计算属性只会1次,如果使用方法会运行5次

相关文章:

Vue学习笔记(四)

事件处理 我们可以使用 v-on 指令 (通常缩写为 符号) 来监听 DOM 事件&#xff0c;并在触发事件时执行一些 JavaScript。用法为 v-on:click"methodName" 或使用快捷方式 click"methodName" 事件处理器的值可以是&#xff1a; 内联事件处理器&#xff1…...

发送短信,验证码

短信 注册阿里云的账号 开通短信服务 测试短信服务是否可用 导入jar <!-- 短信相关 --><dependency><groupId>com.aliyun</groupId><artifactId>aliyun-java-sdk-core</artifactId><version>4.6.0</version><…...

国内大语言模型哪家更好用?

大家好&#xff0c;我是袁庭新。 过去一年&#xff0c;AI大语言模型在爆发式增长&#xff0c;呈现百家争鸣之态。国内外相关厂商积极布局&#xff0c;并相继推出自家研发的智能化产品。 我在工作中已习惯借助AI来辅助完成些编码、创作、文生图等任务&#xff0c;甚至对它们产…...

OTP一次性密码、多因子认证笔记

文章目录 双因子认证(多因子认证)otp算法(ONE-TIME PASSWORD)otp算法大概分为几部 otp的机制服务端客户端(app端)两种主流算法otp流程图 otp是通用的吗 手机验证码天天在用&#xff0c;但是居然不知道这个是otp&#xff0c;伤自尊了&#xff0c;必须弄清原理。 先要知道几个概念…...

玉米生长阶段检测系统源码&数据集全套:改进yolo11-dysample

改进yolo11-DLKA等200全套创新点大全&#xff1a;玉米生长阶段检测系统源码&#xff06;数据集全套 1.图片效果展示 项目来源 人工智能促进会 2024.10.24 注意&#xff1a;由于项目一直在更新迭代&#xff0c;上面“1.图片效果展示”和“2.视频效果展示”展示的系统图片或者视…...

【机器学习】决策树算法

目录 一、决策树算法的基本原理 二、决策树算法的关键概念 三、决策树算法的应用场景 四、决策树算法的优化策略 五、代码实现 代码解释&#xff1a; 在机器学习领域&#xff0c;决策树算法是一种简单直观且易于理解的分类和回归方法。它通过学习数据特征和决策规则&#…...

P2818 天使的起誓

天使的起誓 题目描述 Tenshi 非常幸运地被选为掌管智慧之匙的天使。在正式任职之前&#xff0c;她必须和其他新当选的天使一样要宣誓。 宣誓仪式是每位天使各自表述自己的使命&#xff0c;他们的发言稿放在 n n n 个呈圆形排列的宝盒中。这些宝盒按顺时针方向被编上号码 1…...

数字信号处理实验简介

数字信号处理(Digital Signal Processing,简称DSP)是电子工程、通信、计算机科学等领域中的一个重要分支,它涉及到对离散时间信号进行分析、处理和合成的理论和方法。数字信号处理课程的实验环节通常旨在帮助学生将理论知识应用于实际问题中,通过实践加深对DSP概念和技术的…...

Flask-SQLAlchemy 组件

一、ORM 要了解 ORM 首先了解以下概念。 什么是持久化 持久化 (Persistence)&#xff0c;即把数据&#xff08;如内存中的对象&#xff09;保存到可永久保存的存储设备中&#xff08;如磁盘&#xff09;。持久化的主要应用是将内存中的数据存储在关系型的数据库中&#xff0c;…...

Could not retrieve mirrorlist http://mirrorlist.centos.org错误解决方法

文章目录 背景解决方法 背景 今天在一台新服务器上安装nginx&#xff0c;在这个过程中需要安装相关依赖&#xff0c;在使用yum install命令时&#xff0c;发生了以下报错内容&#xff1a; Could not retrieve mirrorlist http://mirrorlist.centos.org/?release7&archx8…...

最新PHP网盘搜索引擎系统源码 附教程

最新PHP网盘搜索引擎系统源码 附教程&#xff0c;这是一个基于thinkphp5.1MySQL开发的网盘搜索引擎&#xff0c;可以批量导入各大网盘链接&#xff0c;例如百度网盘、阿里云盘、夸克网盘等。 功能特点&#xff1a;网盘失效检测&#xff0c;后台管理功能&#xff0c;网盘链接管…...

SpringBoot面试热题

1.Spring IOC(控制反转)和AOP(面相切面编程)的理解 控制反转意味着将对象的控制权从代码中转移到Spring IOC容器。 本来是我们自己手动new出来的对象&#xff0c;现在则把对象交给Spring的IOC容器管理&#xff0c;IOC容器作为一个对象工厂&#xff0c;管理对象的创建和依赖关系…...

ASP.NET Core8.0学习笔记(二十三)——EF Core自引用

一、什么是自引用 1.在常见的树状目录中&#xff0c;其结构如下&#xff1a; 每一个菜单可能有父级菜单&#xff0c;也可能有子菜单。但是无论是哪一级菜单&#xff0c;他们都是同属于菜单对象。将这个菜单对象使用代码进行描述&#xff1a; 在上面的代码中&#xff0c;主…...

springboot童装销售管理系统-计算机毕业设计源码92685

摘 要 童装销售管理系统是为童装店商家提供的在线销售管理系统&#xff0c;本系统的研发设计能够增加童装店商家的童装宣传和推广&#xff0c;提升客流量和订单量&#xff0c;增加商家的营业收益。原有的童装品销售系统管理采用手工管理的方式&#xff0c;各种童装品宣传和订单…...

OpenCV中的图像通道合并

在计算机视觉和图像处理领域&#xff0c;OpenCV是一个强大的工具库&#xff0c;它提供了从基本操作到复杂算法的广泛功能。今天&#xff0c;我们将通过一个简单的示例来探索OpenCV中的图像通道处理&#xff0c;特别是如何操作和理解BGR与RGB颜色空间的差异。 Lena图像&#xf…...

Flutter TextField和Button组件开发登录页面案例

In this section, we’ll go through building a basic login screen using the Button and TextField widgets. We’ll follow a step-bystep approach, allowing you to code along and understand each part of the process. Let’s get started! 在本节中&#xff0c;我们…...

【vue + mockjs】Mockjs——数据接口模拟

一、mockjs 根据规则生成随机数据&#xff0c;通过拦截 ajax 请求来实现"模拟前端数据接口“的作用。 二、安装 // yarn yarn add mockjs// npm npm install mockjs --save-dev 三、主要模块 mock 根据数据模板生成对应的随机数据Random 工具函数, 调用具体的类型函数…...

ssm订餐系统-计算机毕业设计源码26763

摘 要 本文提出了基于SSM框架的订餐系统的设计与实现。该系统通过前后端分离的方式&#xff0c;采用SpringMVCSpringMyBatis&#xff08;SSM&#xff09;框架进行开发&#xff0c;实现了用户注册、登录、点餐、购物车、订单管理等功能。系统设计了用户注册模块&#xff0c;用户…...

4.2-7 运行MR应用:词频统计

文章目录 1. 准备数据文件2. 文件上传到HDFS指定目录2.1 创建HDFS目录2.2 上传文件到HDFS2.3 查看上传的文件 3. 运行词频统计程序的jar包3.1 查看Hadoop自带示例jar包3.2 运行示例jar包里的词频统计 4. 查看词频统计结果5. 在HDFS集群UI界面查看结果文件6. 在YARN集群UI界面查…...

查看Chrome安装路

谷歌Google浏览器查看安装路径&#xff0c;浏览器Google Chrome浏览器查看安装路径 chrome://version/ 来源&#xff1a;笔记云...

深入剖析Canvas的getBoundingClientRect:精准定位与交互事件实现

软考鸭微信小程序 过软考,来软考鸭! 提供软考免费软考讲解视频、题库、软考试题、软考模考、软考查分、软考咨询等服务 在前端开发中&#xff0c;Canvas是一个强大的绘图工具&#xff0c;它允许开发者在网页上动态地绘制图形、图像和动画。然而&#xff0c;仅仅能够绘制图形是不…...

SQL SERVER 2005/2008/2012/2016/2020 数据库状态为“可疑”的解决方法(亲测可用)

当数据库发生这种操作故障时&#xff0c;可以按如下操作步骤可解决此方法&#xff0c;打开数据库里的Sql 查询编辑器窗口&#xff0c;运行以下的命令。 1、修改数据库为紧急模式 ALTER DATABASE demo SET EMERGENCY 2、使数据库变为单用户模式 ALTER DATABASE demo SET SINGL…...

Linux: network: wireshark IO图的一个问题

今天遇到一个问题&#xff0c;发现wireshark画的IO图&#xff0c;前几秒没有数据&#xff0c;但是根据Raw的pcap看&#xff0c;是有包的&#xff0c;这就迷惑了。 经同事提醒&#xff0c;这个IO在设置了多个画图filter的时候&#xff0c;可能导致开始前几秒没有输出。如下图 这…...

TMGM平台可靠么?交易是否安全?

在选择外汇交易平台时&#xff0c;安全性与可靠性是投资者最关注的要素之一。作为全球知名的外汇及差价合约交易平台&#xff0c;TMGM&#xff08;tmgm-pt.com&#xff09;的安全性与可靠性可以从多个方面进行评估&#xff0c;包括监管环境、资金安全、客户服务、交易技术与服务…...

软工毕设开题建议

文章目录 &#x1f6a9; 1 前言1.1 选题注意事项1.1.1 难度怎么把控&#xff1f;1.1.2 题目名称怎么取&#xff1f; 1.2 开题选题推荐1.2.1 起因1.2.2 核心- 如何避坑(重中之重)1.2.3 怎么办呢&#xff1f; &#x1f6a9;2 选题概览&#x1f6a9; 3 项目概览题目1 : 深度学习社…...

Python自动化发票处理:使用Pytesseract和Pandas从图像中提取信息并保存到Excel

1. 引言 在财务部门&#xff0c;处理大量的纸质或扫描版发票是一项既耗时又容易出错的任务。通过使用Python中的pytesseract&#xff08;一个OCR工具&#xff09;和pandas库&#xff0c;我们可以自动化这一过程&#xff0c;从而提高工作效率并减少错误。 2. 安装所需库 首先…...

新手直播方案

简介 新手直播方案 &#xff0c;低成本方案 手机/电脑 直接直播手机软件电脑直播手机采集卡麦电脑直播多摄像机 机位多路采集卡 多路麦加电脑&#xff08;高成本方案&#xff09; 直播推流方案 需要摄像头 方案一 &#xff1a;手机 电脑同步下载 网络摄像头 软件&#xff08…...

【大模型理论篇】主流大模型的分词器选择及讨论(BPE/BBPE/WordPiece/Unigram)

1. 背景分析 分词是将输入和输出文本拆分成更小单位的过程&#xff0c;使得大模型能够处理。token可以是单词、字符、子词或符号&#xff0c;取决于模型的类型和大小。分词可以帮助模型处理不同的语言、词汇和格式&#xff0c;并降低计算和内存成本。分词还可以通过影响token的…...

入侵检测算法平台部署LiteAIServer视频智能分析平台行人入侵检测算法

在当今科技日新月异的时代&#xff0c;行人入侵检测技术作为安全防护的重要组成部分&#xff0c;正经历着前所未有的发展。入侵检测算法平台部署LiteAIServer作为这一领域的佼佼者&#xff0c;凭借其卓越的技术实力与广泛的应用价值&#xff0c;正逐步成为守护公共安全的新利器…...

000010 - Mapreduce框架原理

Mapreduce框架原理 1. InputFormat 数据输入1.1 切片与 MapTask 并行度决定机制1.2 Job 提交流程源码和切片源码详解1.2.1 Job 提交流程源码详解1.2.2 FileInputFormat 切片源码解析&#xff08;input.getSplits(job)&#xff09; 1.3 FileInputFormat 切片机制1.3.1 切片机制1…...

北京网站手机站建设公司电话/seo销售是做什么的

1、写代码时用Alt-Insert&#xff08;Code|Generate…&#xff09;可以创建类里面任何字段的getter与setter方法。 mac版 是ctrlenter 2、CodeCompletion&#xff08;代码完成&#xff09;属性里的一个特殊的变量是&#xff0c;激活Ctrl-Alt-Space可以完成在或不在当前文件里的…...

便宜虚拟主机做网站备份/公司网站设计的内容有哪些

公司电脑监控软件怎么样&#xff1f;哪家好&#xff1f;目前&#xff0c;许多公司都需要配置电脑监控软件来监控公司电脑&#xff0c;尤其现在公司电脑监控软件在行业内是非常多的&#xff0c;功能也非常强大。超级眼公司电脑监控软件&#xff0c;在监控软件内&#xff0c;企业…...

怎让做淘宝网站/如何推广外贸型网站

栅栏屏障&#xff0c;让一组线程到达一个屏障&#xff08;也可以叫同步点&#xff09;时被阻塞&#xff0c;直到最后一个线程到达屏障时&#xff0c;屏障才会开门&#xff0c;所有被屏障拦截的线程才会继续运行。 CyclicBarrier默认的构造方法是CyclicBarrier&#xff08;int …...

湖南网站建设多少钱/销售

大家知道Java代码是要运行在虚拟机上的&#xff0c;而虚拟机在执行Java程序的过程中会把所管理的内存划分为若干个不同的数据区域&#xff0c;这些区域都有各自的用途。其中有些区域随着虚拟机进程的启动而存在&#xff0c;而有些区域则依赖用户线程的启动和结束而建立和销毁。…...

网站开发制作公司/怎么找到精准客户资源

这几天主要是狂看源程序&#xff0c;在弥补了一些曾经知识空白的同一时候&#xff0c;也学会了不少新的知识(比方 NIO)。或者称为新技术吧。线程池就是当中之中的一个&#xff0c;一提到线程。我们会想到曾经《操作系统》的生产者与消费者。信号量&#xff0c;同步控制等等。一…...

电销如何介绍网站建设/做销售有什么技巧和方法

全自动无人值守安装&#xff0c;采用万能GHOST技术&#xff0c;安装系统过程只需5-8分钟&#xff0c;适合新旧各种机型。集成DX9.0c最新版、双核补丁。集成常用VB/VC2005、2008、2010、2012、2013/运行库、万能驱动助理稳定版安装过程会自动删除各分区下可能存在的AUTORUN病毒T…...