Vue事件处理器

方法事件处理器
<button v-on:click="greet"></button>
greet:function(event){
    alert(this.name) //this方法在这里指当前vue实例
    alert(event.target.tagName); //event 是原生DOM 事件
}

访问原生DOM事件
用$event获取

事件修饰符
<button @click.stop=""></button> //阻止单击事件冒泡
@click.prevent //提交事件不再重载页面
.stop.prevent //阻止冒泡 和提交事件不再重载页面
.capture //添加事件侦听器时使用
.self //只当事件在该元素本身(而不是子元素)触发时回调
@keyup.13 //只在keycode是13时调用
.once //点击事件将只会触发一次

按键修饰符
.enter 回车
.tab
.deleter(删除和退格)
.esc
.up
.down
.left
.right

@keyup.alt.67 //Alt+c

@click.ctrl //ctrl+'click'

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1)v-on:click="greet"可以简写成@click="greet" 2)click事件的一些属性 v-...
    puxiaotaoc阅读 234评论 0 0
  • 也就是关于如何利用vue为元素绑定事件。如下利用v-on为元素绑定事件。之后紧跟事件,再之后就是一个方法名,或者直...
    鸭梨山大哎阅读 328评论 0 1
  • 事件监听:v-on PS.v-on的简写语法是@ 1、一般情况下,会使用一个方法来调用JavaScript方法,然...
    猪儿打滚阅读 167评论 0 0
  • 1. 事件绑定 v-on v-on:事件名=“执行内容” v-on:click=“num=1”简写方法: @事件名...
    Daeeman阅读 439评论 1 1
  • 小红书的创始人毛文超曾在媒体面前说过:“未来小红书也许不会再是现在的样子,但它一定会取得成功”。尽管是一句“毫无意...
    企鹅家的老幺阅读 371评论 0 0