<div id="example-2">
<button v-on:click="greet">Greet</button>
</div> var example2 = new Vue({
el: '#example-2',
data: {
name: 'Vue.js'
},
methods: {
greet: function (event) {
alert('Hello ' + this.name + '!')
if (event) {
alert(event.target.tagName)
}
}
}
})

在内联语句处理器中访问原生 DOM 事件

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
Submit
</button> methods: {
warn: function (message, event) {
if (event) event.preventDefault()
alert(message)
}
}

事件修饰符

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form> <!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div> <!-- 只当事件在该元素本身 (比如不是子元素) 触发时触发回调 -->
<div v-on:click.self="doThat">...</div> <!-- 只调用一次,.once 修饰符还能被用到自定义的组件事件上 -->
<div v-on:click.once="doThat">...</div> <!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a> <!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

键值修饰符

<!-- 只有在 keyCode 是  时调用 vm.submit() -->
<input v-on:keyup.="submit"> 按键别名:
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit"> 常用按键别名:
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
可以通过全局 config.keyCodes 对象自定义键值修饰符别名:
Vue.config.keyCodes.f1 =

修饰键

附加按键:
.ctrl
.alt
.shift
.meta
<!-- Alt + C -->
<input @keyup.alt.="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

鼠标按钮修饰键:

.left
.right
.middle

在html中监听事件优点:解耦,无须清理

vue-6-事件处理的更多相关文章

  1. vue基础——事件处理

    监听事件 可以用 v-on 指令监听dom事件,并在触发时运行一些JavaScript代码. 示例: <div id="example-1"> HTML <but ...

  2. 一起学Vue之事件处理

    在Vue进行前端开发中,事件监听是必不可少的功能,本文通过简单的小例子,简述v-on的简单用法,仅供学习分享使用,如有不足之处,还请指正. 监听事件 可以用 v-on 指令监听 DOM 事件,并在触发 ...

  3. Vue.js事件处理

    Vue.js事件处理 1.v-on指令 用法如下:使用v-on:指令指定其执行的具体内容或者方法名即可. <button v-on:click='num++'>giao</butto ...

  4. 前端框架之Vue(7)-事件处理

    监听事件 可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码. 示例: <div id="example-1"> <butt ...

  5. 【04】Vue 之 事件处理

    4.1. 监听事件的Vue处理 Vue提供了协助我们为标签绑定时间的方法,当然我们可以直接用dom原生的方式去绑定事件.Vue提供的指令进行绑定也是非常方便,而且能让ViewModel更简洁,逻辑更彻 ...

  6. vue基础---事件处理

    (1)事件监听 v-on 指令监听 DOM 事件,并在触发时运行JS代码 <div class="event_area"> {{message}} <button ...

  7. VUE:事件处理和表单输入绑定

    事件处理 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  8. 浅入深出Vue:事件处理

    上一篇的最后留下了一个 v-on的思考,也就是本章的主题:事件处理 为什么需要事件处理 在前端开发中,经常要面对各种表单.按钮.而这里面就住着一个事件:点击 (click). 前端童鞋们肯定不陌生它, ...

  9. vue之事件处理

    一.事件处理方法 1.格式 完整格式:v-on:事件名="函数名" 或 v-on:事件名="函数名(参数……)"  缩写格式:@事件名="函数名&qu ...

  10. vue的事件处理梳理

    一.事件函数 1.v-on绑定click,执行一个函数 <input type="button" v-on:click="test" value=&quo ...

随机推荐

  1. eclipse java项目转idea java项目Invalid bound statement (not found): com.mapper 报错问题

    再pom文件中加上 <build> <resources> <resource> <directory>src/main/java</direct ...

  2. Python 编程快速上手 第十八章 用 GUI 自动化控制键盘和鼠标

    前言 这一章节讲述了如何实现 GUI 自动化,首先讲了一些处理异常状况的方法,然后是关于 GUI 自动化的内容,主要有三个部分: 控制鼠标 图像识别 控制键盘 下面引用一段话: 请将 GUI 自动化看 ...

  3. Python 编程快速上手 第八章总结

    在下面函数中的()中,可为相对路径,也可为绝对路径. 获知当前目录,改变当前目录,查看当前目录 更改当前目录:os.getcwd() 改变当前目录:os.chdir() 查看当前目录:os.listd ...

  4. 【转】 g++编译时对'xxxx'未定义的引用问题(undefined reference to)

    转自:https://blog.csdn.net/killwho/article/details/53785910 引用:http://www.linuxdiyf.com/linux/16754.ht ...

  5. 1.2 面向对象 Object-oriented

    前导课程 1.UML(统一建模语言) 2.OOAD Concept(Object-oriented Analysis and Design 概念) 3.Design Pattern(设计模式) 4.面 ...

  6. Redis之下载安装及基本使用

    redis window系统的redis是微软团队根据官方的linux版本高仿的 官方原版: https://redis.io/ 中文官网:http://www.redis.cn 1.1 redis下 ...

  7. logmnr使用

    logminer 工具的使用 Oracle LogMiner 是Oracle公司从产品8i以后提供的一个实际非常有用的分析工具,使用该工具可以轻松获得Oracle 重作日志文件(归档日志文件)中的具体 ...

  8. zzw原创_根据某一文件复制出大量固定位数后缀名的递增的文件

    1.trre.sh   :根据某一文件复制出大量固定位数后后缀递增的文件.   如将 SPINFO_190516_20170109.001 复制成SPINFO_190516_20170109.002  ...

  9. NOSQL -- Mongodb的简单操作与使用(win10)

    NOSQL -- Mongodb的简单操作与使用(wins) MongoDB 创建集合: db.createCollection(name, options) use huhu db.createCo ...

  10. Linux -- 基于zookeeper的java api(一)

    Linux -- 基于zookeeper的java api 首先启动你所有的 zkService.sh 查看状态:检查是否启动正确 [root@hu-hadoop2 ~]# zkServer.sh s ...