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…...
【大模型RAG】拍照搜题技术架构速览：三层管道、两级检索、兜底大模型
摘要 拍照搜题系统采用“三层管道（多模态 OCR → 语义检索 → 答案渲染）、两级检索（倒排 BM25 向量 HNSW）并以大语言模型兜底”的整体框架： 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后，分别用…...
web vue 项目 Docker化部署
Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段： 构建阶段（Build Stage）：…...
FFmpeg 低延迟同屏方案
引言 在实时互动需求激增的当下，无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作，还是游戏直播的画面实时传输，低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架，凭借其灵活的编解码、数据…...
java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别
UnsatisfiedLinkError 在对接硬件设备中，我们会遇到使用 java 调用 dll文件 的情况，此时大概率出现UnsatisfiedLinkError链接错误，原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用，结果 dll 未实现 JNI 协…...
蓝桥杯 2024 15届国赛 A组 儿童节快乐
P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡，轻快的音乐在耳边持续回荡，小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下，六一来了。 今天是六一儿童节，小蓝老师为了让大家在节…...
2.Vue编写一个app
1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...
【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力
引言： 在人工智能快速发展的浪潮中，快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型（LLM）。该模型代表着该领域的重大突破，通过独特方式融合思考与非思考…...
EtherNet/IP转DeviceNet协议网关详解
一，设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络，本网关连接到EtherNet/IP总线中做为从站使用，连接到DeviceNet总线中做为从站使用。 在自动…...
今日学习：Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存
文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...
在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的？
uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件，用于在原生应用中加载 HTML 页面： 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...