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. ...
随机推荐
- 嵌入式-Linux基础操作
Crtl+Alt+T:调出命令窗口 xrandr:列出分辨率列表 设置窗口的分辨率大小为1280x960:xrandr -s 1280x960 通过命令窗口来执行一段C语言程序: VI工具的使用: ( ...
- Ubuntu环境下LLVM 15.0 完全编译 附windows编译LLVM master
1. 预先安装 sudo apt install ninja-build sudo apt install llvm clang # 第一次编译需要 sudo apt-get install libn ...
- NavBarControl 通过代码添加
看到网上很多都是直接在控件上面添加的 而我的是保存在数据库读取后添加的. 后来自己摸索了一下. 通过代码添加 navBarControl1.Groups.Add(new NavBarGroup( st ...
- 【Datawhale】动手学数据分析
动手学数据分析 第一章:数据载入及初步观察 载入数据 任务一:导入numpy和pandas import numpy as np import pandas as pd 任务二:载入数据 train_ ...
- oracle第二步创建表空间、用户、授权
Windows+r→键入sqlplus,输入已安装好的oracle数据库超级管理员账号密码登录.显示: 成功. 创建表空间: 创建用户并默认表空间: 授权该创建用户对数据库的操作: 代码: SQL&g ...
- 【Shell案例】【wc记录单词长度、for循环和if、awk文本分析工具】7、打印字母数小于8的单词
描述写一个 bash脚本以统计一个文本文件 nowcoder.txt中字母数小于8的单词. 示例:假设 nowcoder.txt 内容如下:how they are implemented and a ...
- ChatGPT 加图数据库 NebulaGraph 预测 2022 世界杯冠军球队
一次利用 ChatGPT 给出数据抓取代码,借助 NebulaGraph 图数据库与图算法预测体坛赛事的尝试. 作者:古思为 蹭 ChatGPT 热度 最近因为世界杯正在进行,我受到这篇 Cambri ...
- socet网络编程
一. 网络模型 应用层 ----- HTTP协议 传输层 ----- TCP协议 网络层 ----- IP协议 链路层 ----- 以太网协议 二. ...
- easygui 之integerbox()、enterbox()、multenterbox() 三种输入函数的使用
1.integerbox()函数:只可输入整数的输入框,默认输入范围为0-99 integerbox(msg="", title=" ", default=No ...
- uniapp(vue)实现点击左侧菜单，右侧显示对应的内容
<template> <view class="container"> <view class="fication-search" ...