VUE学习-监听事件
监听事件
事件处理方法可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。
<div id="app">
<button v-on:click="counter += 1">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>
</div>
<script>
new Vue({
el: '#app',
data: { counter: 0 }
})
</script>
有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法
<div id="app">
<button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit</button>
</div>
<script>
new Vue({
el:'#app',
methods:{
warn(msg,event){
if(event)event.preventDefault();
alert(msg);
}
}
})
</script>
事件修饰符
- .stop: 阻止冒泡。
- .prevent: 阻止默认事件。
- .capture: 捕捉冒泡。
- .self: 自身触发。
- .once: 只会触发一次。
- .native - 监听组件根元素的原生事件。
- .passive: 告诉浏览器你不想阻止事件的默认行为。
:scroll.passive = 'onScroll'
,滚动事件的默认行为 (即滚动行为) 将会立即触发
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发,而不会等待 `onScroll` 完成 -->
<!-- 不要把 .passive 和 .prevent 一起使用, -->
<div v-on:scroll.passive="onScroll">...</div>
按键修饰符
监听键盘事件时添加按键修饰符
<input type="submit" v-on:keyup.enter="submit">
按键码
按键码 | 键值 |
---|---|
.enter | |
.tab | |
.delete | “Del”和“Back Space” |
.esc | |
.space | |
.up,.down,.left,.right | 方向键 |
自定义按键
别名有一些按键 (.esc
以及所有的方向键) 在 IE9 中有不同的 key
值, 如果你想支持 IE9,这些内置的别名应该是首选。
//实例vm中可以用:keyup.f1="event"绑定按键f1的响应事件
vm.config.keyCodes.f1 = 112;
修饰键
修饰键与常规按键不同,在和 keyup 事件一起用时,事件触发时修饰键必须处于按下状态。
按键修饰符
按键修饰符 键值 .ctrl .alt .shift .meta "window" .exact 精准按键修饰符 <!-- 只有在按住 ctrl 的情况下释放按键C,才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。 -->
<input v-on:keyup.ctrl.67="clear">
<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>
鼠标修饰符
鼠标修饰符 键值 .left .right .middle
VUE学习-监听事件的更多相关文章
- vue v-on监听事件
在html或jsp页面中我们总能碰到监听DOM事件来触发javaScript代码,下面我们就简单聊聊Vue.js中的监听事件是怎么处理的. 在vue.js中监听事件是通过v-on指令来实现的,先看一下 ...
- vue(一)--监听事件
1.vue-on:监听事件: demo:点击按钮,number+1 v-on 还可以缩写为 @ 2.事件修饰符 .stop:等同于JavaScript中的event.stopPropagation() ...
- vue之监听事件
一.v-on 可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码. 简写形式 用@代替 v-on: <button v-on:click="co ...
- vue 键盘监听事件
<template> <div class="hello"> <input v-on:keyup.enter="submit" t ...
- Vue 为什么在 HTML 中监听事件?
为什么在 HTML 中监听事件? 你可能注意到这种事件监听的方式违背了关注点分离(separation of concern)传统理念.不必担心,因为所有的 Vue.js 事件处理方法和表达式都严格绑 ...
- Vue的watch监听事件
Vue的watch监听事件 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- Vue自定义事件,$on(eventName) 监听事件,$emit(eventName) 触发事件
<!--自定义事件 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件--> <div id="app15"> ...
- 安卓开发学习日记 DAY5——监听事件onClick的实现方法
今天主要学习了监听事件的是实现方法,就是说,做了某些动作后,怎么监听这个动作并作出相应反应. 方法主要有三种: 1.匿名内部类的方法 2.独立类的方法 3.类似实现接口的方法 以下分别分析: 1.匿名 ...
- JAVAscript学习笔记 js句柄监听事件 第四节 (原创) 参考js使用表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue子组件监听事件中传递参数的方法
在子组件中,我们可以通过以下方式监听事件: v-on:click="$emit('funcName',a)" 如果需要传多个参数,可以通过以下方式: v-on:click=&quo ...
随机推荐
- 1.【窗口组件】小部件-QWidgt
一.前言 QWidget翻译过来是小部件的意思,QWidgt 类是所有用户界面对象的基类. 窗口部件是用户界面的一个基本单元:它从窗 口系统接收鼠标.键盘和其它事件,并且在屏幕上绘制自己.每一个窗口部 ...
- Cocos Creator 打包原生 Android 包该如何选择 NDK 版本?
大家好,我是晓衡! 记得前段时间,在一些群里看到有小伙伴说 Cocos Creator 打包 Android 原生 APK 有问题:一种是构建失败,一种是运行起来报错. 晓衡也是有好长一段时间,没有碰 ...
- 【模板】网络最大流 Dinic(多路增广+当前弧优化)
复杂度上界为 \(\Theta(n^2m)\),实际效率远高于此. #include <bits/stdc++.h> using namespace std; const int N=5e ...
- Java基础1-1-3—java基础语法(条件控制语句)
3. 条件控制语句 3.1 流程控制语句-顺序结构 流程控制语句:通过一些语句,来控制程序的[执行流程] 流程控制语句分类: 顺序结构 分支结构(if,switch) 循环结构(for,while,d ...
- 注解_概念-注解_JDK内置注解
注解_概念 注解: 概念:说明程序的.给计算机看的 注释:用文字描述程序的.给程序员看的 定义︰注解(Annotation),也叫元数据.一种代码级别的说明.它是J0K1.5及以后版本引久的一个特性, ...
- Linux之ssh远程连接
Linux之ssh远程连接 一.下载远程连接工具Xshell Xshell是一种远程连接工具,可用来远程连接虚拟机. Xshell免费版下载地址 输入名字和邮箱,可以在邮箱看到下载Xshell的链接. ...
- vuluhub_jangow-01-1.0.1
前言 靶机:jangow-01-1.0.1 攻击机:kali linux2022.4 靶机描述 打靶ing 靶机探测 使用nmap扫描网段 点击查看代码 ┌──(root㉿kali)-[/home/k ...
- vue+element 返回数组或json数据自定义某列显示的处理--两种方法
本文是作者开发一个业务需求时,将返回数据列表的其中一个数据长度很长的字段处理成数组,并将其作为子表显示的过程,具体样式如下(数据做了马赛克处理) 返回的过长字段数据处理(用分号分隔的一个长字段): t ...
- JuiceFS 在火山引擎边缘计算的应用实践
火山引擎边缘云是以云计算基础技术和边缘异构算力结合网络为基础,构建在边缘大规模基础设施之上的云计算服务,形成以边缘位置的计算.网络.存储.安全.智能为核心能力的新一代分布式云计算解决方案. 01- 边 ...
- 使用VSCODE调试STM32的iar工程
1.打开vscode安装插件 主要用到IAR for visual studio code,没有使用IAR Embedded workbench,在编译的时候卡住,目前不知道什么原因,可能是IAR的版 ...