vue事件绑定详解
来源:互联网 发布:威锋网 mac office 编辑:程序博客网 时间:2024/05/01 20:48
在上篇中,我们说到了Vue时间绑定用v-on,今天我们就来详细说说。
缩写:@
修饰符:
.stop - 调用 event.stopPropagation()。.prevent - 调用 event.preventDefault()。.capture - 添加事件侦听器时使用 capture 模式。.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。.native - 监听组件根元素的原生事件。.once - 只触发一次回调。.left - (2.2.0) 只当点击鼠标左键时触发。.right - (2.2.0) 只当点击鼠标右键时触发。.middle - (2.2.0) 只当点击鼠标中键时触发。.passive - (2.3.0) 以 { passive: true } 模式添加侦听器
用法:
- 绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句,如果没有修饰符也可以省略。
- 用在普通元素上时,只能监听 原生 DOM 事件。用在自定义元素组件上时,也可以监听子组件触发的自定义事件。
- 在监听原生 DOM 事件时,方法以事件为唯一的参数。如果使用内联语句,语句可以访问一个
$event
属性:v-on:click="handle('ok', $event)"
。
示例:
<!-- 方法处理器 --><button v-on:click="doThis"></button><!-- 内联语句 --><button v-on:click="doThat('hello', $event)"></button><!-- 缩写 --><button @click="doThis"></button><!-- 停止冒泡 --><button @click.stop="doThis"></button><!-- 阻止默认行为 --><button @click.prevent="doThis"></button><!-- 阻止默认行为,没有表达式 --><form @submit.prevent></form><!-- 串联修饰符 --><button @click.stop.prevent="doThis"></button><!-- 键修饰符,键别名 --><input @keyup.enter="onEnter"><!-- 键修饰符,键代码 --><input @keyup.13="onEnter"><!-- 点击回调只会触发一次 --><button v-on:click.once="doThis"></button>
在子组件上监听自定义事件(当子组件触发 “my-event” 时将调用事件处理器):
<my-component @my-event="handleThis"></my-component><!-- 内联语句 --><my-component @my-event="handleThis(123, $event)"></my-component><!-- 组件中的原生事件 --><my-component @click.native="onClick"></my-component>
阅读全文
0 0
- vue事件绑定详解
- vue绑定点击事件
- vue绑定click事件
- vue表单事件绑定
- vue 事件绑定 处理-
- vue绑定keyup,input事件
- vue事件绑定和表单
- Vue——事件绑定
- js绑定事件详解
- jquery事件绑定详解
- vue绑定的点击事件阻止冒泡
- 04、vue.js 之绑定事件
- vue element-ui 绑定@keyup事件无效
- vue的键盘事件直接绑定无效?
- Vue 事件修饰符 详解
- Vue组件绑定自定义事件(子向父传递事件)
- 使用VUE框架后,绑定事件失效了
- Vue.js之事件的绑定(v-on: 或者 @ )
- vs打包
- 区分正向代理和反向代理(forward proxy, reverse proxy)
- 【设计模式】观察者模式
- 2017计蒜之道 第三场 腾讯狼人杀(简单)
- k.计软联谊 「游族杯」上海市高校程序设计邀请赛(数论)
- vue事件绑定详解
- android fragment懒加载细致解析
- TensorFlow 学习
- 【swift】点击textfield弹出日历等
- 跳跃的数字
- python 基础知识回顾篇之简单迭代和列表生成
- 使用Google Cartographer算法在Turtlebot等移动平台上跑SLAM
- Android架构那些事之第三方库的隔离(转)
- python网络编程基础socket模块