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. ...
随机推荐
- Go语言核心36讲39
在上一篇文章中,我介绍了Go语言与Unicode编码规范.UTF-8编码格式的渊源及运用. Go语言不但拥有可以独立代表Unicode字符的类型rune,而且还有可以对字符串值进行Unicode字符拆 ...
- Go语言核心36讲26
你好,我是郝林.今天我分享的主题是测试的基本规则和流程的(下)篇. Go语言是一门很重视程序测试的编程语言,所以在上一篇中,我与你再三强调了程序测试的重要性,同时,也介绍了关于go test命令的基本 ...
- SpringDataJpa源码理解
SpringDataJpa源码理解 上一篇讲解了SpringDataJpa的基本使用,下面简单说一下源码 我们以其中的一个test为案例进行分析: 我们可以发现resumeDao它是一个代理对象,类型 ...
- github及git入门笔记
1 github https://github.com/ 1.1 github注册 进入官方 https://github.com/ 首页,点击如下图片中sign up按钮,按照提示信息注册即可. 注 ...
- 【每日一题】【链表.next.next判空条件】141. 环形链表/NC4 判断链表中是否有环-211120/220123
给你一个链表的头节点 head ,判断链表中是否有环. 如果链表中有某个节点,可以通过连续跟踪 next 指针再次到达,则链表中存在环. 为了表示给定链表中的环,评测系统内部使用整数 pos 来表示链 ...
- Jmeter 之跨线程传参
其他线程使用某个线程中提取的值,比如场景:客户端一直与服务端保持连接的同时进行其他业务操作 1.建立以下两个线程组,并添加相应业务接口 2.发送心跳时,需要token,在用户登录接口下添加提取器提取t ...
- Mapper的动态代理
可以自动生产接口的实现类 ,所以就不需要再写daoImpl这个实现类了, 直接使用sqlSession.getMapper自动生成实现类 @Before 此注解的目的是为了将@Befoe 作为首先执行 ...
- Hello 2023 A-D
比赛链接 A 题意 给一个字符串每个物品对应的灯的照明方向,L/R 能照亮它左侧/右侧的所有物品(不包括自己对应的物品),现在能交换相邻两个灯一次(不改变照明方向),问能否找亮所有物品. 题解 知识点 ...
- Hadoop详解(06) - Yarn平台架构和资源调度器
Hadoop详解(06) - Yarn平台架构和资源调度器 Yarn平台架构 Yarn是一个资源调度平台,负责为运算程序提供服务器运算资源,相当于一个分布式的操作系统平台,而MapReduce等运算程 ...
- Java正则表达式全局匹配
今天想用Java的正则在字符串中匹配特定内容,但是当我代码写好运行后却发现正则表达式并没有起作用 试了很多方法,也去Js里试了正则表达式可以走通,就是Java不行 很纳闷 (:′⌒`) Java里正则 ...