当前位置: 首页 > 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…...

四川泸州做网站的公司有哪些/数字营销策划

1. 加载DOM $(document).ready(function(){ //code }); //简写 $(function(){ }) 与window.onload的区别&#xff1a;jquery的ready函数在DOM树加载完后即可执行&#xff0c;而window.onload则必须等待网页中所有元素加载完后才执行。window.onload只能执行一次&#xff0c;而r…...

山石网站超市/ui设计公司

我有一个场景,当我点击按钮时,我想要弹出AlertDialog. AlertDialog是一个自定义警报对话框,因为它具有自定义Listview.我使用以下代码分配AlertDialog OnClick按钮top.setOnClickListener(new OnClickListener() {Context mcontext;Overridepublic void onClick(View arg0) {//…...

网络建设设计方案/免费seo课程

我在我的PHP脚本(PHP 5.6,Apache 2.2)中间歇性地遇到了这个问题&#xff1a;Warning: Cannot modify header information – headers already sent in /path/to/index.PHP on line 55这个警告没有我在其他问题中看过的“发送者”部分,所以我在违规的header()和setcookie()调用之…...

网站建设联系方式/自有品牌如何推广

液晶显示多功能电力仪表PD800G-B43电能监测型作为一种智能化&#xff0c;数字化的电量搜集设备&#xff0c;多功用电力表面现已被广泛的运用在各类控制系统&#xff0c;例如SCADA&#xff0c;EMS&#xff0c;BA等系统中&#xff0c;多功用电力表面是一种十分适协作为电能质量监…...

wordpress 访问限制/域名批量查询工具

下面有这样一个场景&#xff1a; 数据库的某些字段是自增产生的&#xff08;比如说mysql&#xff0c;他就有自增的功能&#xff09; 我在插入数据的时候就没插入自增的那一段数据&#xff0c;但在插入数据后&#xff0c;我想看看自增的这条数据是什么&#xff08;回写操作&…...

wordpress插件功能/如何提高自己的营销能力

大数据技术与架构点击右侧关注&#xff0c;大数据开发领域最强公众号&#xff01;暴走大数据点击右侧关注&#xff0c;暴走大数据&#xff01;NoSQL运动自从上世纪80年代以降&#xff0c;关系型数据库&#xff08;即传统的OLTP和OLAP数据库&#xff09;一直都是后端业务系统的主…...