Vue的模板语法（下）
一.事件处理
事件修饰符
Vue通过由点(.)表示的指令后缀来调用修饰符， .stop， .prevent，.capture，.self，.once
.stop：阻止事件冒泡。当一个元素触发了事件，并且该元素包含嵌套的父元素时，使用.stop修饰符可以防止事件被传递到祖先元素。
.prevent：阻止默认事件。当一个元素上触发了某个事件，使用.prevent修饰符可以阻止浏览器执行默认的事件行为。
.capture：使用事件捕获模式。默认情况下，Vue中的事件监听器是通过事件冒泡模式处理的，即从子元素冒泡到父元素。但是使用.capture修饰符可以将事件监听器绑定到捕获阶段，即从父元素捕获到子元素。
.self：只当事件在指定元素自身触发时触发。当一个元素包含子元素，并且绑定了相同的事件处理函数时，使用.self修饰符可以确保事件只在元素自身触发时才执行处理函数。
.once：只触发一次事件。当绑定了.once修饰符的事件被触发后，监听器将自动解绑，以确保处理函数只执行一次。
代码演示：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script><title>事件处理</title><style type="text/css">.one{background-color: red;height: 400px;width: 400px;} .two{background-color: yellow;height: 300px;width: 300px;} .three{background-color: pink;height: 200px;width: 200px;} .four{background-color: green;height: 100px;width: 100px;}</style></head><body><div id="app"><div class="one" @click="fun1"><div class="two" @click="fun2"><div class="three" @click="fun3"><div class="four" @click.stop="fun4"></div></div></div></div><input :value="msg"/><button @click="clickme">点我</button><form @submit.prevent="submitForm"><button type="submit">提交</button></form><div @click.capture="parentClick"><button @click="childClick">点击我</button></div><div @click.self="parentClick"><button @click="childClick">点击我</button></div></div><script type="text/javascript">new Vue({el:'#app',data(){return {msg:'你好'};},methods:{fun1(){alert("fun1")},fun2(){alert("fun2")},fun3(){alert("fun3")},fun4(){alert("fun4")},clickme(){console.log(this.msg)},submitForm() {console.log("表单提交事件");},parentClick() {console.log("父元素点击事件");},childClick() {console.log("子元素点击事件");}}})</script></body>
</html>效果：
二.表单的综合案例
相关文章：
Vue的模板语法（下）
一.事件处理 事件修饰符 Vue通过由点(.)表示的指令后缀来调用修饰符， .stop， .prevent，.capture，.self，.once .stop：阻止事件冒泡。当一个元素触发了事件，并且该元素包含嵌套的父元素时&#…...
Zookeeper客户端——I0Itec-zkClient
dubbo使用了zkClient而不是使用zookeeper本身的客户端与zookeeper进行交互，为什么呢？ 先看看zookeeper本身自带的客户端的问题。 1）ZooKeeper的Watcher是一次性的，用过了需要再注册； 2） session的超时后…...
火山引擎 ByteHouse：ClickHouse 如何保证海量数据一致性
背景 ClickHouse是一个开源的OLAP引擎，不仅被全球开发者广泛使用，在字节各个应用场景中也可以看到它的身影。基于高性能、分布式特点，ClickHouse可以满足大规模数据的分析和查询需求，因此字节研发团队以开源ClickHouse为基础&…...
hashmap使用
hashmap作为dao对象存储数据库数据 list是把每一个数据库的字段都映射了，而hashmap则是唯一id:数据库字段作为key hashmap遍历方式 public class Main {//使用迭代器（Iterator）EntrySetpublic static void main(String[] args) {// 创建并赋…...
Centos7配置国内yum源
目录 备份原系统中的repo文件配置国内开源镜像重新生成yum缓存 备份原系统中的repo文件 cd /etc/yum.repos.d/mkdir repo_bakmv *.repo repo_bak/配置国内开源镜像 到网易和阿里开源镜像站点下载系统对应版本的repo文件 curl -O http://mirrors.aliyun.com/repo/Centos-7.re…...
C#中async/await的线程ID变化情况
一、简单的起步 Console.WriteLine($"主线程开始ID：{Thread.CurrentThread.ManagedThreadId}");//aawait Task.Delay(100);//cConsole.WriteLine($"主线程结束ID：{Environment.CurrentManagedThreadId}");//b 结果： …...
网络安全—黑客技术—自学笔记
目录梗概 一、自学网络安全学习的误区和陷阱 二、学习网络安全的一些前期准备 三、网络安全学习路线 四、学习资料的推荐 想自学网络安全（黑客技术）首先你得了解什么是网络安全！什么是黑客！ 网络安全可以基于攻击和防御视角来…...
功夫再高也怕菜刀。多年经验，会独立开发的机器视觉工程师，技术太强，但是找工作能力差劲
功夫再高也怕菜刀，专业的事情交给专业的人去做。 今年7月份中旬的时候，遇到一位老朋友，向我咨询某公司的信息，其实我根本不了解这家公司的情况与实力，向他说了，抱歉，我查下，等我晚上…...
numpy的多项式函数: `poly1d`
Python numpy.poly1d() numpy.poly1d()函数有助于定义一个多项式函数。它使得在多项式上应用 "自然操作 "变得容易。 语法: numpy.poly1d (arr, root, var) 参数 : arr : [array_like] 多项式系数按照幂的递减顺序给出。如果第二个参数（根）被…...
Python灰帽编程——错误异常处理和面向对象
文章目录 1. 错误和异常1.1 基本概念1.1.1 Python 异常 1.2 检测（捕获）异常1.2.1 try except 语句1.2.2 捕获多种异常1.2.3 捕获所有异常 1.3 处理异常1.4 特殊场景1.4.1 with 语句 2. 内网主机存活检测程序2.1 scapy 模块2.1.1 主要功能2.1.2 scapy 安装…...
【20230919】win11无法删除Chrome注册表项
win11无法删除Chrome注册表项 删除以下注册表项发生错误： 计算机\HKEY_LOCAL_MACHINE\SOFTWAR\Google计算机\HKEY_CURRENT_USER\Software\Google 尝试了很多删除注册表方法（例如：编辑remove.reg文件），都不行。 无法…...
TCP/IP客户端和服务器端建立通信过程
客户端和服务器端建立通信过程 使用Qt提供的类进行基于TCP的套接字通信需要用到两个类： QTcpServer：服务器类，用于监听客户端连接以及和客户端建立连接。 QTcpSocket：通信的套接字类，客户端、服务器端都需要使用。服务…...
Python ---使用Fake库向clickhouse造数据小案例
每次insert太麻烦了 先在clickhosue中建表 test_user表 CREATE TABLE dwh.test_user (name String,age Int32,address String,phone String,email String ) ENGINE MergeTree() ORDER BY name; 此时表中暂无数据 用Python脚本来造一些数据 from faker import Faker from c…...
09MyBatisX插件
MyBatisX插件 在真正开发过程中对于一些复杂的SQL和多表联查就需要我们自己去编写代码和SQL语句,这个时候可以使用MyBatisX插件帮助我们简化开发 安装MyBatisX插件: File -> Settings -> Plugins -> 搜索MyBatisx插件搜索安装然后重启IDEA 跳转文件功能 由于一个项…...
使用 Messenger 跨进程通信
什么是Messenger Messenger 也是IPC的方案之一，是基于消息的跨进程通信。基于消息是什么意思？Handler是我们最常用的消息机制，所以 Messenger 对于使用者来说就像是使用 Handler。实际上 Messenger 就是 AIDL 的上层封装而已，它们…...
Spring Cloud Gateway
路由谓词工厂 Route Predicate Factory 1. The After Route Predicate Factory spring:cloud:gateway:routes:- id: after_routeuri: https://example.orgpredicates:- After2017-01-20T17:42:47.789-07:00[America/Denver]# 用日期时间匹配 2. The Before Route Pr…...
JVM 优化技术
文章目录 JVM 优化技术概述方法内联优化说明优点内联条件 栈帧之间数据共享说明优点栈帧之间数据共享条件 JVM 优化技术 概述 JVM常见的优化技术： 方法内联优化。栈帧之间数据共享。 方法内联优化 说明 方法内联（Method Inlining）是JVM…...
【MySQL系列】- MySQL自动备份详解
【MySQL系列】- MySQL自动备份详解 文章目录 【MySQL系列】- MySQL自动备份详解一、需求背景二、Windows mysql自动备份方法2.1 复制date文件夹备份实验备份环境创建bat直接备份脚本 2 .2 mysqldump备份成sql文件创建mysqldump备份脚本 2 .3 利用WinRAR对MySQL数据库进行定时备…...
指针笔试题讲解-----让指针简单易懂（2）
目录 回顾上篇重点 ： 一.笔试题 ( 1 ) 二.笔试题 ( 2 ) 科普进制知识点 (1) 二进制 (2) 八进制 (3)十六进制 三.笔试题（ 3 ） 四.笔试题（ 4 ） 五.笔试题（ 5 ） 六.笔试题（ …...
使用windbg分析dump文件的方法
https://zhuanlan.zhihu.com/p/613434365 一般操作如下： 准备工作。 打开dump文件。指定符号表文件的路径。指定可执行文件的路径。指定源码文件的路径。在windbg的命令行，输入并执行如下命令 .reload，重新加载前述数据文件。!analyze -v&a…...
【论文阅读 07】Anomaly region detection and localization in metal surface inspection
比较老的一篇论文，金属表面检测中的异常区域检测与定位 总结：提出了一个找模板图的方法，使用SIFT做特征提取，姿态估计看差异有哪些，Hough聚类做描述符筛选，仿射变换可视化匹配图之间的关系…...
SSM - Springboot - MyBatis-Plus 全栈体系（十一）
第二章 SpringFramework 五、Spring AOP 面向切面编程 6. Spring AOP 基于 XML 方式实现（了解） 6.1 准备工作 加入依赖和基于注解的 AOP 时一样。准备代码把测试基于注解功能时的 Java 类复制到新 module 中，去除所有注解。 6.2 配置 Sp…...
深度剖析贪心算法：原理、优势与实战
概述 贪心算法是一种通过每一步的局部最优选择来寻找整体最优解的方法。在每个步骤中，贪心算法选择当前状态下的最佳选项，而不考虑未来可能的影响。尽管它不能保证一定能找到全局最优解，但贪心算法通常简单且高效，适用于许多实际…...
Docker搭建DNS服务器--use
前言 DNS服务器是(Domain Name System或者Domain Name Service)域名系统或者域名服务,域名系统为Internet上的主机分配域名地址和IP地址。 安装 2.1 实验环境 IP 系统版本 角色 192.168.40.121 Ubuntu 22.10 DNS服务器 192.168.40.122 Ubuntu 22.10 测试机器 2.2 …...
“顽固”——C语言用栈实现队列
解题图解： 1、 先用stack1存储push来的数据 2、每当要pop数据时，从stack2中取，如果 stack2为空，就先从stack1中“倒”数据到stack2。 这就是用栈实现队列的基本操作 这道题看起来比较容易，但是！如果你用C语…...
linux内网渗透
一、信息收集 主机发现： nmap -sP 192.168.16.0/24 端口探测 masscan -p 1-65535 192.168.16.168 --rate1000 开放端口如下 nmap端口详细信息获取 nmap -sC -p 8888,3306,888,21,80 -A 192.168.16.168 -oA ddd4-port目录扫描 gobuster dir…...
还没用熟 TypeScript 社区已经开始抛弃了
根据 rich-harris-talks-sveltekit-and-whats-next-for-svelte 这篇文章的报道， Svelte 计划要把代码从 TS 换到 JS 了。 The team is switching the underlying code from TypeScript to JavaScript. That and the update will then allow the team to incorporate…...
2023年9月19日
2> 完成文本编辑器的保存工作 头文件 #ifndef MAINWINDOW_H #define MAINWINDOW_H#include <QFontDialog> #include <QMainWindow> #include <QFont> #include <QMessageBox> #include <QDebug> #include <QColorDialog> #include &l…...
PowerDesigner 与 mysql 同步数据
PowerDesigner 连接上数据库 创建数据库表 table_5 选择： 点击确认后弹出 点击run执行 刷新数据库表，已创建成功 修改测试表1，新增一个字段 取消全选 选择数据库，勾选修改的表，如果全部勾选的话，就…...
[python 刷题] 271 Encode and Decode Strings
[python 刷题] 271 Encode and Decode Strings 题目： Design an algorithm to encode a list of strings to a string. The encoded string is then sent over the network and is decoded back to the original list of strings. Machine 1 (sender) has the func…...
找谁做网站比较好/汕头网站建设优化
Php 3.x与4.x中关于对象编程的不兼容问题之一 构造器说 (转)[more]3.x与4.x中关于的不兼容问题“面向对象”听起来是个很流行的词汇，似乎到了如果你还没有，那不如回家种白菜的地步。Php从版本3.x开始支持对象编程，虽然它的Class从一开始就饱受…...
怎么在一起做网站上拿货/竞价托管是啥意思
我一直坚持在Linux下钻研计算机软件的相关知识，三个半月前学完了《数据库系统概论》这本书。在学习中我使用了MySQL作为练兵场，但当我学到书的后半部分的时候，发现MySQL有一些问题： 1、MySQL没有角色权限控制功能，也就…...
源码做网站教程/百度推广优化技巧
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼最近学习CUDA C的编程，在并行运行一个简单的解调算法的时候，统计时间后发现运行速度越来越慢(但还是运算结果正确的)，后来简化到只运行其中一个核函数的时候，就算复杂度下降了&#x…...
北京网站定制设计开发公司/网络广告营销策略
无论服务端或客户端启动时都用到了NioEventLoopGroup，从名字就可以看出来它是NioEventLoop的组合，是Netty多线程的基石。 类结构 NioEventLoopGroup继承自MultithreadEventLoopGroup，多提供了两个方法setIoRatio和rebuildSelectors࿰…...
黑龙江省建设安全协会网站/seo需要掌握哪些技术
pomelo(五) Tutorial 2 Treasures #Tutorial 2 -- Treasures ##描述 Treasures 游戏是从 LordOfPomelo 中抽取出来，去掉了大量的游戏逻辑，用以更好的展示 Pomelo 框架的用法以及运作机制。 Treasures 很简单，输入一个用户名后，会…...
网站建设包括哪些方面/推广之家
适合计算机专业毕业生参考的英文范文。Dear Sir or Madam,Having read your internship position ad from qzzjx.cn, I decide to send you my resume because I know I will learn from you as well as bring values to your company.I am going to graduate at June this yea…...