Vue09 事件
1 事件语法
Vue 中的事件绑定可以使用 v-on 指令进行处理，可以把 v-on 绑定事件简写为 @。
<div id="root">
<button @click="showinfo($event,123)">点我</button>
<button v-on:click="showinfo($event,123)">点我2</button>
</div>
2 事件方法
2.1 Vue示例对象里面有个属性，methods，所有事件方法都放到里面
<script type="text/javascript" >
const v = new Vue({
data(){
console.log('调用者：' , this)
return {
name:'123',
url:'www.baidu.com',
phone:'15874859687'
}
},
methods: {
showinfo(event,number){
console.log(number)
}
},
})
v.$mount('#root')
</script>
2.2 注意事项
methods里面写函数，不要用箭头函数。否则在里面使用this就不是vm实例了。正常的函数，里面this是指向vm或组件实例对象的
普通函数中的this指向 它的直接调用者
箭头函数中的this指向 它的外层调用者
2.2.1 使用一般函数，this是vm对象
<script type="text/javascript" >
const v = new Vue({
methods: {
showinfo(event){
console.log(this)
}
},
})
v.$mount('#root')
</script>
2.2.2 使用箭头函数，this是window对象
<script type="text/javascript" >
const v = new Vue({
methods: {
showinfo:(event)=>{
console.log(this)
}
},
})
v.$mount('#root')
</script>
3 关于事件方法的参数说明
3.1 当没有参数需要传时
@click="方法名"
虽然我们没有传参数，但是默认会传一个事件实例对象，在事件方法处可以接收到，当然也可以不接收
3.2 需要传参数时
@click="方法名(参数值，参数值)"
注意，这个时候，如果需要event实例对象，需要加到方法参数列表里面，采用$event
3.3 示例
<div id="root">
<button @click="showinfo">点我</button>
<button @click="showinfo2($event,123)">点我2</button>
</div> <script type="text/javascript" > const v = new Vue({
methods: {
showinfo(event){
console.log(event.target)
},
showinfo2(event,number){
console.log(number)
}
},
}) v.$mount('#root') </script>
4 事件修饰符
4.1 Vue官网介绍
https://cn.vuejs.org/v2/api/#v-on
4.2 事件的处理过程
事件流分为三个阶段：捕获、触发、冒泡(事件方法执行)，默认行为执行。触发是从DOM 树的外层向里捕获，从DOM 树的里层向外冒泡。
关于默认行为补充说明：
比如一个a标签，里面一个网址，点击它的默认行为就是跳转。我给他一个点击事件，那么点它的时候，会先执行点击事件，执行完成后，执行默认行为，也就是跳转
<style>
.d1{
height: 200px;
background-color: aqua;
}
.d2{
height: 100px;
background-color:brown;
}
</style>
<div id="root" >
<div @click="showinfo(123)" class="d1">
<div @click="showinfo(456)" class="d2"> </div>
</div>
</div> <script type="text/javascript" > const v = new Vue({
methods: {
showinfo(number){
console.log(number)
}
},
}) v.$mount('#root') </script>
点击红色区域，发现先打印456，再打印123，说明冒泡是从里往外。
5 键盘事件
5.1 简介
事件触发不仅仅只有鼠标，Vue 同样提供了一系列的修饰符来方便键盘事件的编写。
键盘事件的绑定同样支持 v-on 指令和 @ 快捷写法，Vue 内部提供了键别名和按键码来绑定不同的键
5.2 官网介绍
https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E7%A0%81
5.3 两个事件
@keyup ：按下键松开后触发(通常使用)
@keydown：按下键立即触发
5.4 格式
@keyup.按键名.按键名="函数"
可以是一个按键和多个按键。多个按键表示多个按键配合使用时触发
<body>
<div class="container">
<form>
<label for="user_name">姓名 <!-- 当按下 shift+delete 时清空内容 -->
<input type="text" v-model="uname" @keyup.enter.shift.delete="clear" name="user_name">
</label><br>
<label for="password">密码
<!-- 为该元素绑定事件，事件为键盘上的回车键 -->
<input type="password" v-model="upwd" @keyup.enter="submit" name="password">
</label><br>
<input type="button" @click.prevent="submit" value="提交">
</form>
</div> <script src="../lib/vue.js"></script>
<script>
let vm = new Vue({
el: '.container',
data: { uname: '', upwd: '' },
methods: {
submit: function () { console.log(this.uname, this.upwd) },
clear: function () { this.uname = '' }
}
})
</script>
</body>
如第 7 行代码所示，当多个按键一起按才触发时，链式调用即可。
5.5 按键名和按键编码
https://www.cnblogs.com/yiven/p/7118056.html
@keyup后面写的.xxx，这个xxx是键盘名，但是却不全是电脑上面标的文字。
可以通过e.key来获取按键的名称,也可以通过e.keyCode获取键盘编码
<body>
<div class="container">
<form>
<label for="user_name">姓名 <!-- 当按下 shift+delete 时清空内容 -->
<input type="text" v-model="uname" @keyup="show" name="user_name">
</label><br>
</form>
</div> <script>
let vm = new Vue({
el: '.container',
data: { uname: '', upwd: '' },
methods: {
show: function (e) {
console.log(e.key,",",e.keyCode)
}
}
})
</script>
</body>
5.6 按键别名
5.6.1 Vue设置的别名
为了我们编写方便，vue为常用按键起了别名，直接使用别名即可
5.6.2 自定义别名
1） 格式
Vue.config.keyCodes.别名=按键编码
2）示例
Backspace的编码是8
给它取别名为bs
Vue.config.keyCodes.bs = 8
<body>
<div class="container">
<form>
<label for="user_name">姓名 <!-- 当按下 shift+delete 时清空内容 -->
<input type="text" v-model="uname" @keyup.bs="show" name="user_name">
</label><br>
</form>
</div> <script> Vue.config.keyCodes.bs = 8 let vm = new Vue({
el: '.container',
data: { uname: '', upwd: '' },
methods: {
show: function (e) {
console.log("按下了Backspace")
}
}
})
</script>
</body>
Vue09 事件的更多相关文章
- JNI详解---从不懂到理解
转载:https://blog.csdn.net/hui12581/article/details/44832651 Chap1:JNI完全手册... 3 Chap2:JNI-百度百科... 11 C ...
- 【vue-09】axios
[vue-09]axios 文档:Axios中文文档 官网 为什么要使用axios 功能特点: 支持发送ajax异步 支持在NodeJs中发送ajax请求. 支持Promise 支持拦截器请求和响应 ...
- Jquery的点击事件，三句代码完成全选事件
先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- 关于 Chrome 浏览器中 onresize 事件的 Bug
我在写插件时用到了 onresize 事件,在反复地测试后发现该事件在 Chrome 及 Opera(内核基本与 Chrome 相同,以下统称 Chrome)浏览器打开时就会执行,这种情况也许不能算作 ...
- MVVM设计模式和WPF中的实现（四）事件绑定
MVVM设计模式和在WPF中的实现(四) 事件绑定 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在WPF中 ...
- C++中的事件分发
本文意在展现一个C++实现的通用事件分发系统,能够灵活的处理各种事件.对于事件处理函数的注册,希望既能注册到普通函数,注册到事件处理类,也能注册到任意类的成员函数.这样在游戏客户端的逻辑处理中,可以非 ...
- 移动端IOS点击事件失效解决方案
解决方案 解决办法有 4 种可供选择: 1 将 click 事件直接绑定到目标元素(即 .target)上 2 将目标元素换成 <a> 或者 button 等可点击的元素 3 将 clic ...
- Android笔记——Button点击事件几种写法
Button点击事件:大概可以分为以下几种: 匿名内部类 定义内部类,实现OnClickListener接口 定义的构造方法 用Activity实现OnClickListener接口 指定Button ...
- HTML 事件(一) 事件的介绍
本篇主要介绍HTML中的事件知识:事件相关术语.DOM事件规范.事件对象. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三 ...
- HTML 事件(二) 事件的注册与注销
本篇主要介绍HTML元素事件的注册.注销的方式. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三) 事件流.事件委托 4. ...
随机推荐
- Java安全之CC3
前言 上一篇文章学习了Java中加载字节码的⼀些⽅法,其中介绍了TemplatesImpl,TemplatesImpl 是⼀个可以加载字节码的类,通过调⽤其newTransformer()⽅法,即可执 ...
- [CS61A] Lecture 4. Higher-Order Functions & Project 1: The Game of Hog
[CS61A] Lecture 4. Higher-Order Functions & Project 1: The Game of Hog Lecture Lecture 4. Higher ...
- 嵌入式-C语言基础：指针函数
指针函数:返回指针的函数,即函数返回一个地址.例如:int * a(int x,int y);由于()的优先级比*高,因此a先与()结合,a(int x,int y)显然是一个函数,函数前面带一个in ...
- UBOOT编译--- UBOOT的顶层config.mk(五)
1. 前言 UBOOT版本:uboot2018.03,开发板myimx8mmek240. 2. 概述 此文件包含在 ./Makefile 和 spl/Makefile 中. 清理状态以避免添加两次相同 ...
- servlet包找不到，webservlet注解无效
把tomcat/lib/ 中的annotations-api.jar和servlet-api.jar复制到jdk/jre/lib/ext/目录中就行了 mine:C:\environment\apa ...
- ArrayList中的ConcurrentModificationException,并发修改异常,fail-fast机制。
一:什么时候出现? 当我们用迭代器循环list的时候,在其中用list的方法新增/删除元素,就会出现这个错误. package com.sinitek.aml; import java.util.Ar ...
- day13 I/O流——字节输入输出流、字符输入输出流 & File常用类 & （字节）复制大文件
day13 I/O流 定义:数据在两设备传输称为流,流是一组有顺序的,有起点和终点的字节集合 I 是input的缩写,表示输入流 O是output缩写,表示输出流 字节流(视频等) 输入InputSt ...
- 漫谈计算机网络：应用层 ----- 从DNS域名解析到WWW万维网再到P2P应用
2022-12-04 18:31:01 纪念一下博主的<漫谈计算机网络>连载博客 浏览量破500了! 今天更新完结篇! 面试答不上?计网很枯燥? 听说你学习 计网 每次记了都会忘? 不妨抽 ...
- Kubernetes-基于容器云构建devops平台
1.基于kubernetes devops的整体方案 本文以Kubernetes为基础,为基于java语言研发团队提供一套完整的devops解决方案.在此方案中,开发人员基于eclipse集成开发环境 ...
- 编译安装nmon
nmon 是什么? nmon(Nigel's performance Monitor for Linux)是一种Linux性能监视工具,当前它支持 Power/x86/x86_64/Mainframe ...