Vue新手村(二)

news2024/11/20 3:27:54

目录

1、计算属性

2、事件修饰符

2.1、stop事件修饰符

2.2、prevent事件修饰符

2.3、self事件修饰符

2.4、once事件修饰符

3、按键修饰符

3.1、enter回车键


1、计算属性

计算属性:

  • computed:vue官方提供一个计算属性
  • 作用:在完成某种业务时,往往页面结果需要经过多次计算才能获取,computed属性就是用来完成页面结果多次计算
  • 好处:在完成计算同时也会将计算结果进行缓存,如果数据没有发生变化,在页面中多次使用,计算方法仅执行一次
  • 使用:{{ }},在里面填写方法名即可

代码举例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>{{count}}</h1>
        <h2>总数:{{test2}}</h2>
        <h2>总数:{{test2}}</h2>
        <h2>总数:{{test2}}</h2>
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue ({
        el:"#app",
        data:{
            count:1
        },
        methods:{
            test() {

            }
        },
        computed:{
            test2() {
                console.log("调用了computed方法")
                return 3*this.count
            }
        }
    })
</script>

重点代码:

效果:


2、事件修饰符

修饰符:用来和事件连用,用来决定事件触发条件或者是阻止事件的触发机制~

2.1、stop事件修饰符

.stop:用来阻止事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 对冒泡事件不处理 -->
        <div style="width: 200px;;height: 200px;background-color:red;" @click="parent">
            <div style="width: 100px;;height: 100px;background-color:blue;" @click="child"></div>
        </div>
        <hr>
        <!-- 阻止事件冒泡了 -->
        <div style="width: 200px;;height: 200px;background-color:red;" @click="parent">
            <div style="width: 100px;;height: 100px;background-color:blue;" @click.stop="child"></div>
        </div>
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{

        },
        methods:{
            parent() {
                alert('parent')
            },
            child() {
                alert('child')
            }
        }
    })
</script>

主要代码:

 效果:

  • 当你点击第一个父div下的子div时,会连续有两个alert弹框,这就叫做冒泡
  • 当你点击第二个父div下的子div时,只会有一个alert弹框,这就是阻止了冒泡

2.2、prevent事件修饰符

.prevent:用来阻止标签的默认行为

主要代码:

        没有添加.prevent时,点击后,会有alert弹框,然后跳转至百度。当我们不想让他执行默认行为(跳转)时,就可以使用.prenvent来控制

2.3、self事件修饰符

.self:用来针对当前标签的事件触发——只触发自己标签上的特定动作,只关心自己标签上触发的事件,不监听事件冒泡

主要代码:

        此时,我们点击子div,也不会触发父div的alert,因为添加了.self,他只关心自己标签上的事件

2.4、once事件修饰符

.once:一次作用——就是让指定事件只触发一次

主要代码:

        不管是点击子div,冒泡触发的,还是点击父div自己触发的,一共只触发一次~


3、按键修饰符

作用:用来与键盘中按键事件绑定在一起,用来修饰特定的按键事件的修饰符

例如下面的例子【其他:.tab  .delete   .esc   .space  .up   .down   .left   .right】

3.1、enter回车键

enter回车回车键修饰符,用来在触发回车按键之后触发的事件

主要代码:

如上述,我们enter后就会触发提交函数

好啦,我们先学到这里哦,下期继续

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

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

相关文章

【AI视野·今日NLP 自然语言处理论文速览 第七十三期】Tue, 9 Jan 2024

AI视野今日CS.NLP 自然语言处理论文速览 Tue, 9 Jan 2024 Totally 80 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Computation and Language Papers FFSplit: Split Feed-Forward Network For Optimizing Accuracy-Efficiency Trade-off in Language Model Infe…

浏览器输入一个域名的解析过程

目录 从输入一个域名的解析过程 以www.baidu.com为例子 本地缓存和hosts文件 mDNS和LLMNR NBT-NS 路由器广播 Root域名服务器 顶级域名服务器 目标域名服务器 DNS解析完成 操作系统发起TCP连接&#xff1a; TCP三次握手&#xff1a; TCP连接的建立采用经典的三次握手过程&#…

129基于matlab的粒子群算法、遗传算法、鲸鱼算法、改进鲸鱼算法优化最小二乘支持向量机(lssvm)的gam正则化参数和sig2RBF函数的参数

基于matlab的粒子群算法、遗传算法、鲸鱼算法、改进鲸鱼算法优化最小二乘支持向量机&#xff08;lssvm&#xff09;的gam正则化参数和sig2RBF函数的参数。输出适应度曲线&#xff0c;测试机和训练集准确率。程序已调通&#xff0c;可直接运行。 129 matlabLSSVM优化算法 (xiaoh…

10款强大的iPhone微信恢复软件:轻松恢复丢失的微信数据

微信已成为近年来最受欢迎的消息和社交媒体平台之一。它在全球拥有数百万用户&#xff0c;让人们能够联系、分享时刻并进行各种交易。随着微信的普及&#xff0c;对全面恢复解决方案的需求从未如此之大。本文探讨了专为 iPhone 用户设计的十款顶级微信恢复软件选项。每个软件都…

Copy of 一喷就能清新口气,更简单的漱口伴侣

平时日常维护口腔健康&#xff0c;除了要按时刷牙之外&#xff0c;每日清洁漱口也很有必要&#xff0c;这时使用专业漱口水效果更佳。平时我都是使用超市里常见的传统液体漱口水&#xff0c;偶然听牙医朋友说起市面上还有一款新的漱口云泡也很好用。就是目前我正在使用的这款清…

向数据库添加数据出现java.lang.NullPointerException

问题描述 向数据库中新增一条数据&#xff0c;出现 controller&#xff1a; Autowiredprivate ArticleService articleService;PostMappingpublic Result add(RequestBody Article article){articleService.add(article);return Result.success();} Service&#xff1a; Ser…

【STM32】HAL库的STOP低功耗模式UART串口唤醒BUG,第一个接收字节出错的问题(尚未解决,疑难杂症)

【STM32】HAL库的STOP低功耗模式UART串口唤醒BUG&#xff0c;第一个接收字节出错的问题&#xff08;尚未解决&#xff0c;疑难杂症&#xff09; 文章目录 BUG复现调试代码推测原因及改进方案尝试中断时钟供电外设唤醒方式校验码硬件问题 切换到STOP0模式尝试最终结论和猜想附录…

计算机网络-2019期末考试解析

【前言】 从内容上看比较像计算机网络课程了&#xff0c;先做了。 一&#xff0e;填空选择题&#xff08;共 20 分&#xff0c;每空 1 分&#xff09; 1 、双绞线由两根相互绝缘的、绞合成均匀的螺纹状的导线组成&#xff0c;下列关于双绞线的叙述&#xff0c;不正确的是___ __…

【SAP-PP】生产订单导入问题--完成日期向前推了一天

问题描述&#xff1a; 在执行BAPI_PRODORD_CREATE生产订单导入的时候&#xff0c;发现填写入模板中的基本完成日期是12月31日&#xff0c;但是到具体工单时变成了12月30日 截图说明&#xff1a; 感觉很神奇&#xff0c;咋一看&#xff0c;真的是日期提前了一天&#xff0c;de…

Next.js 学习笔记(六)——缓存

缓存 Next.js 可通过缓存渲染工作和数据请求来提高应用程序的性能并降低成本。本页将深入介绍 Next.js 缓存机制、可用于配置这些机制的 API 以及它们之间的交互方式。 需要知道&#xff1a;本页将帮助你了解 Next.js 的工作原理&#xff0c;但这并不是使用 Next.js 提高工作效…

1 月 21 日,三件事儿,线上不见不散丨社区活动

1 月 21 日&#xff0c;三件事儿&#xff0c;线上不见不散&#xff1a; RTE 开发者社区&#xff0c;三位联合主理人正式亮相&#xff0c;分享对于行业、社区与开发者人才发展的思考&#xff1b;「实时互动行业人才洞察2024」正式发布&#xff0c;关于行业、人才与生态的分析与…

【Python学习】Python学习13-日期和时间

目录 【Python学习】Python学习13-日期和时间 前言通过time 获取时间戳时间元组获取当前时间&#xff0c;格式化时间格式化时间转换python中时间日期格式化符号获取日历Time 模块日历&#xff08;Calendar&#xff09;模块其他模块参考 文章所属专区 Python学习 前言 本章节主…

Macos下修改Python版本

MacOS下修改Python版本 安装 查看本机已安装的Python版本&#xff1a;where python3 ~ where python3 /usr/bin/python3 /usr/local/bin/python3 /Library/Frameworks/Python.framework/Versions/3.12/bin/python3如果没有你想要的版本&#xff0c;去python官网下载安装包。…

【金猿案例展】黑龙江省粮食质量安全监测和技术中心——荣联助力黑龙江粮食仓储智能化升级...

‍ 荣联科技集团案例 本项目案例由荣联科技集团投递并参与“数据猿年度金猿策划活动——2023大数据产业年度创新服务企业榜单/奖项”评选。 大数据产业创新服务媒体 ——聚焦数据 改变商业 近年来&#xff0c;国家粮食和物资储备信息化工作取得了长足发展&#xff0c;但与新时…

C++ Primer 6.1 函数基础

函数的形参列表 int func(int v,int v2) {int v,v2;//&#xff01;错误 } 函数返回类型 不能是数组和函数&#xff08;两者都不接受对拷&#xff09;&#xff0c;但可以是指针 局部对象 形参和函数体内部的变量称为局部变量&#xff0c;仅在函数内部可见&#xff0c;隐藏外部…

行为型设计模式——策略模式

策略模式 策略模式非常简单&#xff0c;只需要将策略或者某个算法定义成一个类&#xff0c;然后传给需要使用的对象即可。**定义&#xff1a;**该模式定义了一系列算法&#xff0c;并将每个算法封装起来&#xff0c;使它们可以相互替换&#xff0c;且算法的变化不会影响使用算…

【c++】list迭代器失效问题

目录 一、list iterator的使用 二、list的迭代器失效 一、list iterator的使用 对于list的迭代器的用法&#xff0c;可以将它看做一个指针&#xff08;实际要更加复杂&#xff09;来使用&#xff0c;该指针指向list中的一个节点。 【注意】 (1)begin和end为正向迭代器&#x…

【C语言刷题每日一题#牛客网HJ73】——计算日期到天数转换(给定日期,计算是该年的第几天)

目录 问题描述 思路分析 数据结构构建部分 计算部分 代码实现 结果测试 此问题解决方法不唯一&#xff0c;这里介绍的是一种使用数组和循环实现的简单办法 问题描述 思路分析 问题的要求是输入一个日期&#xff0c;计算这是当年的第几天——要解决这个问题&#xff0c;逻…

记录汇川:H5U与Fctory IO测试8

主程序&#xff1a; 子程序&#xff1a; IO映射 子程序&#xff1a; 出料程序 子程序&#xff1a; 重量程序 子程序&#xff1a; 自动程序 Fctory IO配置&#xff1a; HMI配置 实际动作如下&#xff1a; Fctory IO测试8

SPI接口协议

SPI接口协议 SPI(Serial Peripheral Interface)是由Motorola公司定义的接口协议标准&#xff0c;串行外设接口(SPI)是微控制器和外围IC&#xff08;如传感器、 ADC、 DAC、移位寄存器、 SRAM等&#xff09;之间使用最广泛的接口之一。SPI是一种同步、全双工、主从式接口&#x…