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. ...
随机推荐
- 字符编码 XUTF
/* * Copyright (c) Huawei Technologies Co., Ltd. 2019-2020. All rights reserved. * Description: 上机编程 ...
- Go语言核心36讲26
你好,我是郝林.今天我分享的主题是测试的基本规则和流程的(下)篇. Go语言是一门很重视程序测试的编程语言,所以在上一篇中,我与你再三强调了程序测试的重要性,同时,也介绍了关于go test命令的基本 ...
- xshell登陆，查看中文日志出现乱码
看到乱码,首先想到的是编码问题 linux默认编码格式是utf-8,windows默认gbk [root@backup]# echo $LANGen.US.UTF-8 使用fie命令可以查看到文件信息 ...
- Day20.1：关于this、super的解析
this.super详解 当我们在外部程序调用一个类的方法,如果这个类的方法与其父类的方法重载,我们需要用this.super进行区分 this在Java中是一个复杂的关键字,this的使用形式体现了 ...
- NLP实践！文本语法纠错模型实战，搭建你的贴身语法修改小助手 ⛵
作者:韩信子@ShowMeAI 深度学习实战系列:https://www.showmeai.tech/tutorials/42 自然语言处理实战系列:https://www.showmeai.tech ...
- 零基础入门数据挖掘——二手车交易价格预测：baseline
零基础入门数据挖掘 - 二手车交易价格预测 赛题理解 比赛要求参赛选手根据给定的数据集,建立模型,二手汽车的交易价格. 赛题以预测二手车的交易价格为任务,数据集报名后可见并可下载,该数据来自某交易平台 ...
- 笔试面试--Java基础知识
一.基本概念 1.Java的优点 纯面向对象 平台无关性,"一次编译,到处运行(JVM上)",跨平台,可移植性 丰富类库:多线程.网络通信.垃圾回收 安全性(数组边界检测.byte ...
- 【Java EE】Day08 HTML&CSS
一.表单 1.概述 采集数据,与服务器交互包括 form表单,需要提交则必须设置name属性,action方式主要包 get:参数会在地址栏显示(请求行),长度有限 post:参数被封装在请求体,参数 ...
- gulp报错The following tasks did not complete
代码如下: //引用gulp模块 const gulp = require('gulp'); //使用gulp.task()建立任务 gulp.task('first', () => { con ...
- vulnhub靶场渗透实战13-driftingblues3
靶机下载地址:https://download.vulnhub.com/driftingblues/driftingblues3.ova vbox导入,网络模式桥接,靶机模式为简单. 一:信息收集 ...