vue-6-事件处理
<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-事件处理的更多相关文章
- vue基础——事件处理
监听事件 可以用 v-on 指令监听dom事件,并在触发时运行一些JavaScript代码. 示例: <div id="example-1"> HTML <but ...
- 一起学Vue之事件处理
在Vue进行前端开发中,事件监听是必不可少的功能,本文通过简单的小例子,简述v-on的简单用法,仅供学习分享使用,如有不足之处,还请指正. 监听事件 可以用 v-on 指令监听 DOM 事件,并在触发 ...
- Vue.js事件处理
Vue.js事件处理 1.v-on指令 用法如下:使用v-on:指令指定其执行的具体内容或者方法名即可. <button v-on:click='num++'>giao</butto ...
- 前端框架之Vue(7)-事件处理
监听事件 可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码. 示例: <div id="example-1"> <butt ...
- 【04】Vue 之 事件处理
4.1. 监听事件的Vue处理 Vue提供了协助我们为标签绑定时间的方法,当然我们可以直接用dom原生的方式去绑定事件.Vue提供的指令进行绑定也是非常方便,而且能让ViewModel更简洁,逻辑更彻 ...
- vue基础---事件处理
(1)事件监听 v-on 指令监听 DOM 事件,并在触发时运行JS代码 <div class="event_area"> {{message}} <button ...
- VUE:事件处理和表单输入绑定
事件处理 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
- 浅入深出Vue:事件处理
上一篇的最后留下了一个 v-on的思考,也就是本章的主题:事件处理 为什么需要事件处理 在前端开发中,经常要面对各种表单.按钮.而这里面就住着一个事件:点击 (click). 前端童鞋们肯定不陌生它, ...
- vue之事件处理
一.事件处理方法 1.格式 完整格式:v-on:事件名="函数名" 或 v-on:事件名="函数名(参数……)" 缩写格式:@事件名="函数名&qu ...
- vue的事件处理梳理
一.事件函数 1.v-on绑定click,执行一个函数 <input type="button" v-on:click="test" value=&quo ...
随机推荐
- eclipse java项目转idea java项目Invalid bound statement (not found): com.mapper 报错问题
再pom文件中加上 <build> <resources> <resource> <directory>src/main/java</direct ...
- Python 编程快速上手 第十八章 用 GUI 自动化控制键盘和鼠标
前言 这一章节讲述了如何实现 GUI 自动化,首先讲了一些处理异常状况的方法,然后是关于 GUI 自动化的内容,主要有三个部分: 控制鼠标 图像识别 控制键盘 下面引用一段话: 请将 GUI 自动化看 ...
- Python 编程快速上手 第八章总结
在下面函数中的()中,可为相对路径,也可为绝对路径. 获知当前目录,改变当前目录,查看当前目录 更改当前目录:os.getcwd() 改变当前目录:os.chdir() 查看当前目录:os.listd ...
- 【转】 g++编译时对'xxxx'未定义的引用问题(undefined reference to)
转自:https://blog.csdn.net/killwho/article/details/53785910 引用:http://www.linuxdiyf.com/linux/16754.ht ...
- 1.2 面向对象 Object-oriented
前导课程 1.UML(统一建模语言) 2.OOAD Concept(Object-oriented Analysis and Design 概念) 3.Design Pattern(设计模式) 4.面 ...
- Redis之下载安装及基本使用
redis window系统的redis是微软团队根据官方的linux版本高仿的 官方原版: https://redis.io/ 中文官网:http://www.redis.cn 1.1 redis下 ...
- logmnr使用
logminer 工具的使用 Oracle LogMiner 是Oracle公司从产品8i以后提供的一个实际非常有用的分析工具,使用该工具可以轻松获得Oracle 重作日志文件(归档日志文件)中的具体 ...
- zzw原创_根据某一文件复制出大量固定位数后缀名的递增的文件
1.trre.sh :根据某一文件复制出大量固定位数后后缀递增的文件. 如将 SPINFO_190516_20170109.001 复制成SPINFO_190516_20170109.002 ...
- NOSQL -- Mongodb的简单操作与使用(win10)
NOSQL -- Mongodb的简单操作与使用(wins) MongoDB 创建集合: db.createCollection(name, options) use huhu db.createCo ...
- Linux -- 基于zookeeper的java api(一)
Linux -- 基于zookeeper的java api 首先启动你所有的 zkService.sh 查看状态:检查是否启动正确 [root@hu-hadoop2 ~]# zkServer.sh s ...