1、事件处理

1.1、 事件的基本使用

1.1.1 、基础知识

  • 事件的基本使用:
    1、使用v-on:xxx 或 @xxx 绑定事件,其中xxx是事件名;
    2、事件的回调需要配置在methods对象中,最终会在vm上;
    3、methods中配置的函数,不要用箭头函数!否则this就不是vm了;
    4、methods中配置的函数,都是被Vue所管理的函数,this的指向是vm 或 组件实例对象;
    5、@click=“demo” 和 @click=“demo($event)” 效果一致,但后者可以传参;

1.1.2、 代码实例

<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8" />
<title>标题</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head> <body>
<div id="App"> <h1>欢迎 {{name}}</h1>
<button v-on:click="showInfo">点我提示信息</button>
<button @click="showInfo1">点我提示信息1(不传参)</button>
<button @click="showInfo2($event,666)">点我提示信息2(传参)</button> </div>
<script type="text/javascript">
Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示 //创建Vue实例
new Vue({
el: '#App',
data: {
name: "Vue"
},
methods: {
showInfo() {
console.log("提示信息")
},
showInfo1(event) {
console.log(this)//此处的this是vm
console.log("提示信息1")
},
showInfo2(event, number) {
console.log(event, number)
console.log(this)//此处的this是vm
console.log("提示信息2")
} }
})
</script> </body> </html>

1.1.3、测试效果

1.2、事件修饰符

1.2.1、 基础知识

Vue中的事件修饰符:

  • 1、prevent:阻止默认事件(常用);
  • 2、stop:阻止事件冒泡(常用);
  • 3、once:事件只触发一次(常用);
  • 4、capture:使用事件的捕获模式;
  • 5、self:只有event.target是当前操作的元素时才触发事件;
  • 6、passive:事件的默认行为立即执行,无需等待事件回调执行完毕;

1.2.2 、代码实例

<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8" />
<title>标题</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
<style>
* {
margin-top: 20px;
} .demo1 {
height: 80px;
width: 240px;
background-color: pink;
} .box1 {
padding: 5px;
width: 400px;
height: 400px;
background-color: skyblue;
} .box2 {
padding: 5px;
width: 200px;
height: 200px;
background-color: orange;
} .list {
width: 200px;
height: 200px;
background-color: peru;
overflow: auto;
} li {
height: 100px;
}
</style>
</head> <body>
<div id="App">
<h1>欢迎,{{name}}</h1>
<!-- 阻止默认事件(常用) -->
<a href="http://www.baidu.com" @click.prevent="showInfo">百度</a> <!-- 阻止事件冒泡(常用) -->
<div class="demo1" @click="showInfo1">
<button @click.stop="showInfo1">点我提示信息1</button>
<!-- 修饰符可以连续写 -->
<a href="http://www.baidu.com" @click.prevent.stop="showInfo3">百度哦</a>
</div> <!-- 事件只触发一次(常用) -->
<button @click.once="showInfo4">点我提示信息4</button> <!-- 使用事件的捕获模式 -->
<div class="box1" @click.capture="showMsg(1)">
div1
<div class="box2" @click="showMsg(2)">
div2
</div>
</div> <!-- 只有event.target是当前操作的元素时才触发事件; -->
<div class="demo1" @click.self="showInfo">
<button @click="showInfo">点我提示信息</button>
</div> <!-- 事件的默认行为立即执行,无需等待事件回调执行完毕; -->
<ul @wheel.passive="demo" class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul> </div>
<script type="text/javascript">
Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示 //创建Vue实例
new Vue({
el: '#App',
data: {
name: "ZYZ"
},
methods: {
showInfo() {
console.log("阻止页面跳转")
}, showInfo1() {
console.log("阻止冒泡")
},
showInfo3() {
console.log("阻止百度冒泡跳转")
},
showInfo4() {
console.log("只触发一次")
},
showMsg(msg) {
console.log(msg)
},
demo() {
for (let i = 0; i < 100000; i++) {
console.log('#')
}
console.log('累坏了')
}
}
})
</script> </body> </html>

1.2.3 、测试效果

1.3、键盘事件

1.3.1、基础知识

1、Vue中常用的按键别名:

  • 回车 => enter
  • 删除 => delete (捕获“删除”和“退格”键)
  • 退出 => esc
  • 空格 => space
  • 换行 => tab (特殊,必须配合keydown去使用)
  • 上 => up
  • 下 => down
  • 左 => left
  • 右 => right

2、Vue未提供别名的按键,可以使用按键原始的key值去绑定,但注意要转为kebab-case(短横线命名)

3、系统修饰键(用法特殊):ctrl、alt、shift、meta

  • (1)、配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发。
  • (2)、配合keydown使用:正常触发事件。

4、也可以使用keyCode去指定具体的按键(不推荐)

5、Vue.config.keyCodes.自定义键名 = 键码,可以去定制按键别名

1.3.2、代码实例

<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8" />
<title>标题</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head> <body>
<div id="App">
<h2>欢迎,{{name}}</h2>
<input type="text" placeholder="按下回车提示输入(enter)" @keydown.enter="showInfo"><br><br>
<input type="text" placeholder="按下回车提示输入(delete)" @keydown.delete="showInfo"><br><br>
<input type="text" placeholder="按下回车提示输入(tab)" @keydown.tab="showInfo"><br><br>
<input type="text" placeholder="按下回车提示输入(huiche)" @keydown.huiche="showInfo">
</div>
<script type="text/javascript">
Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
Vue.config.keyCodes.huiche = 13 //定义了一个别名按键 //创建Vue实例
new Vue({
el: '#App',
data: {
name: "ZYZ"
},
methods: {
showInfo(e) {
console.log(e.key,e.keyCode)
console.log(e.target.value)
}
}
})
</script> </body> </html>

1.3.3 、测试效果


Vue学习之--------事件的基本使用、事件修饰符、键盘事件(2022/7/7)的更多相关文章

  1. Vue学习笔记(二)动态绑定、计算属性和事件监听

    目录 一.为属性绑定变量 1. v-bind的基本使用 2. v-bind动态绑定class(对象语法) 3. v-bind动态绑定class(数组语法) 4. v-bind动态绑定style(对象语 ...

  2. Vue学习之--------深入理解Vuex之多组件共享数据(2022/9/4)

    在上篇文章的基础上:Vue学习之--------深入理解Vuex之getters.mapState.mapGetters 1.在state中新增用户数组 2.新增Person.vue组件 提示:这里使 ...

  3. 从零开始学 Web 之 Vue.js(二)过滤器,按键修饰符,自定义指令

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  4. 42.VUE学习之--组件之子组件使用$on与$emit事件触发父组件实现购物车功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. python学习day20 面向对象(二)类成员&成员修饰符

    1.成员 类成员 类变量 绑定方法 类方法 静态方法 属性 实例成员(对象) 实例变量 1.1实例变量 类实例化后的对象内部的变量 1.2类变量 类中的变量,写在类的下一级和方法同一级. 访问方法: ...

  6. java学习笔记12(final ,static修饰符)

    final: 意思是最终的,是一个修饰符,有时候一个功能类被开发好了,不想被子类重写就用final定义, 用final修饰的最终数据成员:如果一个类的数据成员用final修饰符修饰,则这个数据成员就被 ...

  7. Java学习笔记(4)----Public,Protected,Package,Private修饰符可见性

    Java修饰符类型(public,protected,private,friendly) public的类.类属变量及方法,包内及包外的任何类均可以访问:protected的类.类属变量及方法,包内的 ...

  8. angularjs学习笔记3-directive中scope的绑定修饰符

    在angularjs中,一个directive返回一个对象,对象存在很多属性,并且可以在directive中自定义自己的scope,而使用自己的scope是为了防止一个directive被使用在多个地 ...

  9. Java学习笔记:04面向对象-内部类_访问修饰符_final

    04面向对象-内部类/访问修饰符/final 1.static的介绍 static:关键字,静态的 static的作用是用来修饰类中的成员 2.访问一个类中的某一个成员变量 方法一: _1.创建对象 ...

  10. Vue中键盘事件

    Vue中监听 键盘事件及修饰符 键盘事件: keyCode 实际值 48到57     0 - 9 65到90           a - z ( A-Z ) 112到135       F1 - F ...

随机推荐

  1. Auto.js pro 开发环境配置

    本文仅供学习交流使用,如侵立删!demo下载见文末 Auto.js pro 开发环境配置 准备: 1.Auto.js Pro Auto.js 已暂停维护 -下载链接放在了文章底部,有需要自行下载 2. ...

  2. 最新30系显卡搭建paddle飞浆环境|含CUDA下载安装

    下载CUDA 通过这个链接可以下载任意CUDA版本:CUDA Toolkit Archive | NVIDIA Developer 我下载的是这一个:https://developer.downloa ...

  3. Apache DolphinScheduler 如何从 1.2.1 升级到 1.3.4

    关于 Apache DolphinScheduler Apache DolphinScheduler(incubator) 于 17 年在易观数科立项, 19 年 8 月进入 Apache 孵化器,已 ...

  4. 一文带你弄懂 JVM 三色标记算法!

    大家好,我是树哥. 最近和一个朋友聊天,他问了我 JVM 的三色标记算法.我脑袋一愣发现竟然完全不知道!于是我带着疑问去网上看了几天的资料,终于搞清楚啥事三色标记算法,它是用来干嘛的,以及它和 CMS ...

  5. HC32L110 在 Ubuntu 下使用 J-Link 烧录

    目录 HC32L110(一) HC32L110芯片介绍和Win10下的烧录 HC32L110(二) HC32L110在Ubuntu下的烧录 HC32L110 在 Ubuntu 下使用 J-Link 烧 ...

  6. ENSP 与VMware workstation 同时安装会出现AR40 或者VMware蓝屏

    前言: 你已经安装了VMware workstation,ENSP,Virtualbox,并且关闭了hyper-v,还会出现报错或者VMware蓝屏. #此处补充一条命令systeminfo 如果你看 ...

  7. Dart 异步编程(一):初步认识

    由于 Dart 是单线程编程语言,对于进行网络请求和I/O操作,线程将发生阻塞,严重影响依赖于此任务的下一步操作. 通常,在一个阻塞任务之后还有许许多多的任务等待被执行.下一步任务需要上一步任务的结果 ...

  8. 快速掌握 Base 64 | 学 Java 密码系列

    Java 密码系列 - Java 和 JS Base 64 Base 64 不属于密码技术,仅是编码方式.但由于在 Java.JavaScript.区块链等出现的频率较高,故在本系列文章中首先分享 B ...

  9. Python自学教程5-字符串有哪些常用操作

    任何编程语言,不管是Python.Java 还是 Golang, 字符串都是最重要的一种数据类型. 但是字符串的操作又很多,初学者经常毫无头绪,不知道从哪儿学起,也不知道哪些操作用得多,今天九柄就和你 ...

  10. 状态 :睡眠中,进程ID:13431,yum提示Another app is currently holding the yum lock; waiting for it to exit...

    问题描述: 今天想在虚拟机上重新安装docker然后使用到yum命令报错: 解决办法: [root@localhost ~]# rm -f /var/run/yum.pid 然后重新运行刚才的yum命 ...