vue之监听事件
2024-08-30 09:55:33
一、v-on
可以用 v-on
指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。
简写形式 用@代替 v-on:
<button v-on:click="counter += 1">Add 1</button>
<button @click="counter += 1">Add 1</button>
<button v-on:click="greet">Greet</button>
//此处需注意,greet()加括号与否均可,如果要传参,当然需要括号。但如果直接在双花括号内获取函数,必须含有括号,即{{ greet() }}
<button @click="greet">Greet</button>
点击事件 v-on:click、双击事件v-on:dbclick、鼠标事件v-on:mousemove
二、事件修饰符
Vue.js 为 v-on
提供了事件修饰符。Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation()。修饰符是由点开头的指令后缀来表示的。使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 v-on:click.prevent.self
会阻止所有的点击,而 v-on:click.self.prevent
只会阻止对元素自身的点击。
.stop
.prevent
.capture
.self
.once
.passive
1、.stop阻止冒泡事件
今天在<li>里加了一个button,结果点击button,触发了li上的点击事件。使用.stop阻止事件冒泡
<ul>
<li v-for="(task,index) in list" @click="add(task)" :class="{'complated':task.finished}">
{{task.id}}-{{task.name}}
<button @click.stop="deltask(task)">del</button>
</li>
</ul>
最新文章
- require() 源码解读
- 添加APNS通知
- VS2008简体中文正式版序列号-试用到期解决
- .Net程序员安卓学习之路3:Post数据给网络API
- [重点翻译] ASP.NET 4.6的更新 -- 本文只摘录 Web Forms的部分
- centos 7访问windows共享文件夹
- Mvc controller单元测试 Mock Url对象
- 查看Linux操作系统版本
- Centos6 安全防护设置指南
- Major and minor numbers
- node.js 模板 ejs 转
- 关于MySQL-python-1.2.3.tar.gz安装失败的解决方案
- Sentry快速开始并集成钉钉群机器人
- Boot Hill 布特山
- python语法之函数1
- 【学习总结】Git学习-参考廖雪峰老师教程五-远程仓库
- Umbraco 7 特点
- falsk_蓝图(blueprint)
- pd.concat/merge/join
- 【redis】redis的雪崩和穿透
热门文章
- 什么是二维数组?二维遍历?Java二维数组制作图片迷宫 使用如鹏游戏引擎制作窗口界面 附带压缩包下载,解压后双击start.bat启动
- LeetCode 买卖股票的最佳时机
- perl学习之:subs函数
- Objective-C 正则表达式使用(1)
- LeetCode(121) Best Time to Buy and Sell Stock
- nrf52810学习笔记——三
- f-Strings:一种改进Python格式字符串的新方法
- 利用visual studio 搜索替换功能清除项目中javascript文件的debugger;
- cf898d Alarm Clock
- android 之 菜单