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. ...
随机推荐
- mybatis-plus分页失效原因
mybatis-plus分页失效解决方法 方法一.在启动类添加如下配置 @SpringBootApplication @MapperScan("com.**.mapper") pu ...
- Vue2 到 Vue3，重温这 5 个常用的 API
距离Vue3发布已经过去一年多时间了,从Vue2到Vue3是一个不小的升级,包括周边生态等.虽然目前大多数开发者们在使用的仍旧以Vue2为准,但Vue3显然是Vue开发者们未来必须面对的,而且前不久V ...
- K8S之prometheus-operator监控
prometheus-operator 1. Prometheus Operator介绍 介绍文章:http://t.zoukankan.com/twobrother-p-11164391.html ...
- EdgeCore初学习
### 前提 初学edgeCore,有不足之处,欢迎指正 ### 大纲 1. 日志查看2. 重启3. 在线编译4. sftp同步代码5. 整体架构6. 通信协议7. 模拟实现(待实现) ### 步骤 ...
- JS图片放大镜功能实现
JS图片放大镜功能实现 技术关键点 1.左侧和上侧距离,在一个水平位置和垂直位置中有我们可以挪动的区域,就是原图片区域,鼠标挪动位置是一个块状位置,他的左侧和上侧距离浏览器上侧和左侧分别有一个长度,我 ...
- ARM MMU架构 -- CPU如何访问MMU及DRAM
<ARM Architecture Reference Manual ARMv8-A>里面有Memory层级框架图,从中可以看出L1.L2.DRAM.Disk.MMU之间的关系,以及他们在 ...
- day22-web开发会话技术04
WEB开发会话技术04 14.Session生命周期 14.1生命周期说明 public void setMaxInactiveInterval(int interval):设置session的超时时 ...
- GitHub 开源了多款字体「GitHub 热点速览 v.22.48」
本期 News 快读有 GitHub 官方大动作一下子开源了两款字体,同样大动作的还有 OpenAI 发布的对话模型 ChatGPT,引燃了一波人机对话. 项目这块,也许会成为新的 Web 开发生产力 ...
- python连接MySQL数据库实现(用户登录测试功能)pymysql
pymysql PyMySQL 是一个纯 Python 实现的 MySQL 客户端操作库,支持事务.存取过程.批量执行,实现增删改查等 # 注册 def register(cursor): usern ...
- SQLMap入门——判断是否存在注入
假设目标注入点是http://127.0.0.1/sqli-labs-master/Less-1/?id=1,判断其是否存在注入的命令如下: python sqlmap.py -u http://12 ...