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

Vue的模板语法（下）

news 2025/12/15 8:18:29

一.事件处理

事件修饰符

 Vue通过由点(.)表示的指令后缀来调用修饰符， .stop，  .prevent，.capture，.self，.once

  1. .stop：阻止事件冒泡。当一个元素触发了事件，并且该元素包含嵌套的父元素时，使用.stop修饰符可以防止事件被传递到祖先元素。

  2. .prevent：阻止默认事件。当一个元素上触发了某个事件，使用.prevent修饰符可以阻止浏览器执行默认的事件行为。

  3. .capture：使用事件捕获模式。默认情况下，Vue中的事件监听器是通过事件冒泡模式处理的，即从子元素冒泡到父元素。但是使用.capture修饰符可以将事件监听器绑定到捕获阶段，即从父元素捕获到子元素。

  4. .self：只当事件在指定元素自身触发时触发。当一个元素包含子元素，并且绑定了相同的事件处理函数时，使用.self修饰符可以确保事件只在元素自身触发时才执行处理函数。

  5. .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通过由点(.)表示的指令后缀来调用修饰符&#xff0c; .stop&#xff0c; .prevent&#xff0c;.capture&#xff0c;.self&#xff0c;.once .stop&#xff1a;阻止事件冒泡。当一个元素触发了事件&#xff0c;并且该元素包含嵌套的父元素时&#…...

编程日记 2023/9/20 11:38:33

Zookeeper客户端——I0Itec-zkClient

dubbo使用了zkClient而不是使用zookeeper本身的客户端与zookeeper进行交互&#xff0c;为什么呢&#xff1f; 先看看zookeeper本身自带的客户端的问题。 1&#xff09;ZooKeeper的Watcher是一次性的&#xff0c;用过了需要再注册&#xff1b; 2&#xff09; session的超时后…...

编程日记 2023/9/20 11:37:32

火山引擎 ByteHouse：ClickHouse 如何保证海量数据一致性

背景 ClickHouse是一个开源的OLAP引擎&#xff0c;不仅被全球开发者广泛使用&#xff0c;在字节各个应用场景中也可以看到它的身影。基于高性能、分布式特点&#xff0c;ClickHouse可以满足大规模数据的分析和查询需求&#xff0c;因此字节研发团队以开源ClickHouse为基础&…...

编程日记 2023/9/20 11:36:31

hashmap使用

hashmap作为dao对象存储数据库数据 list是把每一个数据库的字段都映射了&#xff0c;而hashmap则是唯一id:数据库字段作为key hashmap遍历方式 public class Main {//使用迭代器&#xff08;Iterator&#xff09;EntrySetpublic static void main(String[] args) {// 创建并赋…...

编程日记 2023/9/20 11:34:29

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…...

编程日记 2023/9/20 11:33:28

C#中async/await的线程ID变化情况

一、简单的起步 Console.WriteLine($"主线程开始ID&#xff1a;{Thread.CurrentThread.ManagedThreadId}");//aawait Task.Delay(100);//cConsole.WriteLine($"主线程结束ID&#xff1a;{Environment.CurrentManagedThreadId}");//b 结果&#xff1a; …...

编程日记 2023/9/20 11:31:26

网络安全—黑客技术—自学笔记

目录梗概 一、自学网络安全学习的误区和陷阱 二、学习网络安全的一些前期准备 三、网络安全学习路线 四、学习资料的推荐 想自学网络安全&#xff08;黑客技术&#xff09;首先你得了解什么是网络安全&#xff01;什么是黑客&#xff01; 网络安全可以基于攻击和防御视角来…...

编程日记 2023/9/20 11:29:24

功夫再高也怕菜刀。多年经验，会独立开发的机器视觉工程师，技术太强，但是找工作能力差劲

功夫再高也怕菜刀&#xff0c;专业的事情交给专业的人去做。 今年7月份中旬的时候&#xff0c;遇到一位老朋友&#xff0c;向我咨询某公司的信息&#xff0c;其实我根本不了解这家公司的情况与实力&#xff0c;向他说了&#xff0c;抱歉&#xff0c;我查下&#xff0c;等我晚上…...

编程日记 2023/9/20 11:26:20

numpy的多项式函数: `poly1d`

Python numpy.poly1d() numpy.poly1d()函数有助于定义一个多项式函数。它使得在多项式上应用 "自然操作 "变得容易。 语法: numpy.poly1d (arr, root, var) 参数 : arr : [array_like] 多项式系数按照幂的递减顺序给出。如果第二个参数&#xff08;根&#xff09;被…...

编程日记 2023/9/20 11:24:18

Python灰帽编程——错误异常处理和面向对象

文章目录 1. 错误和异常1.1 基本概念1.1.1 Python 异常 1.2 检测&#xff08;捕获&#xff09;异常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 安装…...

编程日记 2023/9/20 11:22:16

【20230919】win11无法删除Chrome注册表项

win11无法删除Chrome注册表项 删除以下注册表项发生错误&#xff1a; 计算机\HKEY_LOCAL_MACHINE\SOFTWAR\Google计算机\HKEY_CURRENT_USER\Software\Google 尝试了很多删除注册表方法&#xff08;例如&#xff1a;编辑remove.reg文件&#xff09;&#xff0c;都不行。 无法…...

编程日记 2023/9/20 11:21:14

TCP/IP客户端和服务器端建立通信过程

客户端和服务器端建立通信过程 使用Qt提供的类进行基于TCP的套接字通信需要用到两个类&#xff1a; QTcpServer&#xff1a;服务器类&#xff0c;用于监听客户端连接以及和客户端建立连接。 QTcpSocket&#xff1a;通信的套接字类&#xff0c;客户端、服务器端都需要使用。服务…...

编程日记 2023/9/20 11:19:12

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…...

编程日记 2023/9/20 11:17:08

09MyBatisX插件

MyBatisX插件 在真正开发过程中对于一些复杂的SQL和多表联查就需要我们自己去编写代码和SQL语句,这个时候可以使用MyBatisX插件帮助我们简化开发 安装MyBatisX插件: File -> Settings -> Plugins -> 搜索MyBatisx插件搜索安装然后重启IDEA 跳转文件功能 由于一个项…...

编程日记 2023/9/20 11:16:07

使用 Messenger 跨进程通信

什么是Messenger Messenger 也是IPC的方案之一&#xff0c;是基于消息的跨进程通信。基于消息是什么意思&#xff1f;Handler是我们最常用的消息机制&#xff0c;所以 Messenger 对于使用者来说就像是使用 Handler。实际上 Messenger 就是 AIDL 的上层封装而已&#xff0c;它们…...

编程日记 2023/9/20 11:12:01

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…...

编程日记 2023/9/20 11:09:59

JVM 优化技术

文章目录 JVM 优化技术概述方法内联优化说明优点内联条件 栈帧之间数据共享说明优点栈帧之间数据共享条件 JVM 优化技术 概述 JVM常见的优化技术&#xff1a; 方法内联优化。栈帧之间数据共享。 方法内联优化 说明 方法内联&#xff08;Method Inlining&#xff09;是JVM…...

编程日记 2023/9/20 11:08:58

【MySQL系列】- MySQL自动备份详解

【MySQL系列】- MySQL自动备份详解 文章目录 【MySQL系列】- MySQL自动备份详解一、需求背景二、Windows mysql自动备份方法2.1 复制date文件夹备份实验备份环境创建bat直接备份脚本 2 .2 mysqldump备份成sql文件创建mysqldump备份脚本 2 .3 利用WinRAR对MySQL数据库进行定时备…...

编程日记 2023/9/20 11:02:51

指针笔试题讲解-----让指针简单易懂（2）

目录 回顾上篇重点 &#xff1a; 一.笔试题 ( 1 ) 二.笔试题 ( 2 ) 科普进制知识点 (1) 二进制 (2) 八进制 (3)十六进制 三.笔试题&#xff08; 3 &#xff09; 四.笔试题&#xff08; 4 &#xff09; 五.笔试题&#xff08; 5 &#xff09; 六.笔试题&#xff08; …...

编程日记 2023/9/20 10:59:47

使用windbg分析dump文件的方法

https://zhuanlan.zhihu.com/p/613434365 一般操作如下&#xff1a; 准备工作。 打开dump文件。指定符号表文件的路径。指定可执行文件的路径。指定源码文件的路径。在windbg的命令行&#xff0c;输入并执行如下命令 .reload&#xff0c;重新加载前述数据文件。!analyze -v&a…...

编程日记 2023/9/20 10:58:47

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

编程新知 2025/12/12 2:46:30

江苏艾立泰跨国资源接力：废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下&#xff0c;江苏艾立泰以一场跨国资源接力的创新实践&#xff0c;重新定义了绿色供应链的边界。 跨国回收网络&#xff1a;废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点&#xff0c;将海外废弃包装箱通过标准…...

编程新知 2025/12/14 21:17:07

【Zephyr 系列 10】实战项目：打造一个蓝牙传感器终端 + 网关系统（完整架构与全栈实现）

🧠关键词：Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者：希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数：约 5200 字 ✨ 项目总览 在物联网实际项目中，**“终端 + 网关”**是…...

编程新知 2025/12/10 3:56:44

Java入门学习详细版（一）

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

编程新知 2025/12/14 14:47:02

Yolov8 目标检测蒸馏学习记录

yolov8系列模型蒸馏基本流程&#xff0c;代码下载&#xff1a;这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中&#xff0c;**知识蒸馏&#xff08;Knowledge Distillation&#xff09;**被广泛应用&#xff0c;作为提升模型…...

编程新知 2025/12/14 3:26:26

离线语音识别方案分析

随着人工智能技术的不断发展&#xff0c;语音识别技术也得到了广泛的应用&#xff0c;从智能家居到车载系统&#xff0c;语音识别正在改变我们与设备的交互方式。尤其是离线语音识别&#xff0c;由于其在没有网络连接的情况下仍然能提供稳定、准确的语音处理能力&#xff0c;广…...

编程新知 2025/9/22 13:00:25

Linux中《基础IO》详细介绍

目录 理解"文件"狭义理解广义理解文件操作的归类认知系统角度文件类别 回顾C文件接口打开文件写文件读文件稍作修改&#xff0c;实现简单cat命令 输出信息到显示器&#xff0c;你有哪些方法stdin & stdout & stderr打开文件的方式 系统⽂件I/O⼀种传递标志位…...

编程新知 2025/12/8 2:43:46

阿里云Ubuntu 22.04 64位搭建Flask流程（亲测）

cd /home 进入home盘 安装虚拟环境&#xff1a; 1、安装virtualenv pip install virtualenv 2.创建新的虚拟环境&#xff1a; virtualenv myenv 3、激活虚拟环境&#xff08;激活环境可以在当前环境下安装包&#xff09; source myenv/bin/activate 此时&#xff0c;终端…...

编程新知 2025/12/9 5:16:49

java高级——高阶函数、如何定义一个函数式接口类似stream流的filter

java高级——高阶函数、stream流 前情提要文章介绍一、函数伊始1.1 合格的函数1.2 有形的函数2. 函数对象2.1 函数对象——行为参数化2.2 函数对象——延迟执行 二、 函数编程语法1. 函数对象表现形式1.1 Lambda表达式1.2 方法引用&#xff08;Math::max&#xff09; 2 函数接口…...

编程新知 2025/12/5 8:12:50

pgsql：还原数据库后出现重复序列导致“more than one owned sequence found“报错问题的解决

问题&#xff1a; pgsql数据库通过备份数据库文件进行还原时&#xff0c;如果表中有自增序列&#xff0c;还原后可能会出现重复的序列&#xff0c;此时若向表中插入新行时会出现“more than one owned sequence found”的报错提示。 点击菜单“其它”-》“序列”&#xff0c;…...

编程新知 2025/12/9 22:41:45