VUE大神的成长之路--事件处理器

监听事件
可以用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码。
v-on:click="counter += 1">

方法事件处理器
v-on:click="greet"

事件修饰符
methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。


<a v-on:click.stop="doThis"></a>


<form v-on:submit.prevent="onSubmit"></form>


<a v-on:click.stop.prevent="doThat"></a>


<form v-on:submit.prevent></form>


<div v-on:click.capture="doThis">...</div>


<div v-on:click.self="doThat">...</div>


<a v-on:click.once="doThis"></a>

按键修饰符
在监听键盘事件时,我们经常需要监测常见的键值。
Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:

<input v-on:keyup.13="submit">


<input @keyup.enter="submit">
.enter
.tab
.delete (捕获 “删除” 和 “退格” 键)
.esc
.space
.up
.down
.left
.right

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

推荐阅读更多精彩内容

  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,082评论 0 29
  • 1.安装 可以简单地在页面引入Vue.js作为独立版本,Vue即被注册为全局变量,可以在页面使用了。 如果希望搭建...
    Awey阅读 11,109评论 4 129
  • 以下文章为转载,对理解JavaScript中的事件处理机制很有帮助,浅显易懂,特分享于此。 什么是事件? 事件(E...
    jxyjxy阅读 3,076评论 1 10
  • 原文地址 前言 这段时间赶项目,需要用到多文件上传,用Vue进行前端项目开发。在网上找了不少插件,都不是十分满意,...
    xiaoxiao昱阅读 4,257评论 2 10
  • 当你的才华,还撑不起你的野心的时候,你就应该静下心来学习; 当你的能力,还驾驭不了你的目标时,就应该沉下心来历...
    许东玲阅读 173评论 0 0