Vue——认识day03_事件

news2024/11/13 16:34:54

此处接上一篇文章Vue——认识day2开始,欢迎大家。

目录

1.事件处理 

2.事件修饰符

3.键盘事件

总结


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)" 的效果是一样的,但后者可以传递事件对象作为参数。

代码案例如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>

    <script type="text/javascript" src="../js/vue.js"></script>
</head>
</head>
<body>

    <div id="root">
        <h2>欢迎业主{{name}}回家</h2>
        <button v-on:click="showInfo1">点点我解锁(不传参)</button>
        <button v-on:click="showInfo2(66,$event)">点点我锁门(传参)</button>
    </div>
    
</body>

<script type="text/javascript">
    Vue.config.productionTip=false

    new Vue({
        el:'#root',
        data:{
            name:'WWJ'
        },
        methods: {
            // 这里的方法写在data中也行
            // 但是会降低vue的性能,因为在data中的东西
            // 会被做数据代理和数据劫持,getter和setter方法根本就用不到
            showInfo1(event){
                alert('欢迎业主回家!!!')
            },
            showInfo2(number){
                console.log(number,event)
                alert('门已上锁!!!')
            }
        },
    });
</script>


</html>


2.事件修饰符

Vue中的事件修饰符:

        1. prevent:阻止默认事件(常用);

        2.stop:阻止事件冒泡(常用);

        3.once:事件只触发一次(常用);

        4.capture:使用事件的捕获模式;

        5.self:只有event.target是当前操作的元素是才触发事件;

        6.passive:事件的默认行为立即执行,无需等待事件回调执行完毕;

示例代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>

    <script type="text/javascript" src="../js/vue.js"></script>

    <style>
        *{
            margin-top: 20px;
        }

        .demo1{
            height: 50px;
            background-color: skyblue;
        }

        .box1{
            padding: 5px;
            background-color: skyblue;
        }

        .box2{
            padding: 5px;
            background-color: orchid;
        }

        .list{
            width: 200px;
            height: 200px;
            background-color: blueviolet;
            overflow: auto;
        }

        li{
            height: 100px;
        }


    </style>

</head>
</head>
<body>
    <body>

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


    <div id="root">
        <h2>欢迎来到{{name}}上班</h2>
        <!-- @click.prevent这里的prevent就是这里的事件修饰符,阻止本来的默认事件 -->
        <a href="https://blog.csdn.net/DDDDWJDDDD/article/details/138379882" @click.prevent="showInfo">
            点我提示信息
        </a>

        
        <div class="demo1" @click="showInfo">
            <!-- stop:阻止事件冒泡 -->
            <button @click.stop="showInfo">点我提示信息</button>
            <br>
            <!-- 事件修饰符支持链式编程 -->
            <a href="https://blog.csdn.net/DDDDWJDDDD/article/details/138379882" @click.prevent.stop="showInfo">
                点我提示信息
            </a>
        </div>

        <!-- 事件只触发一次 -->
        <button @click.once="showInfo">事件只触发一次</button>

        <!-- 使用事件的捕获形式 :capture加了之后该事件在捕获阶段就会被触发-->
        <div class="box1" @click.capture="showMsg(1)">
            capture1
            <div class="box2" @click="showMsg(2)">
                capture2
            </div>
        </div>

        <!-- 只有event.target是当前操作的元素是才触发事件 -->
        <div class="demo1" @click.self="showInfo">
            <button @click="showInfo">target</button>
        </div>

        <!-- passive:事件的默认行为立即执行,无需等待事件回调执行完毕 -->
        <!-- <ul @scroll="demo2" class="list"> 这个是只要滚动就会被触发--> 
        <ul @wheel.passive="demo2" class="list"> <!-- 这个是只有使用鼠标滚轮才会触发 -->
           <li>1</li> 
           <li>2</li> 
           <li>3</li> 
           <li>4</li> 
        </ul>

    </div>
    
</body>

<script type="text/javascript">
    Vue.config.productionTip=false
    const vm = new Vue({
        el:'#root',
        data:{
            name:'迈首科技集团有限公司'
        },
        methods: {
            showInfo(e){
                // <!-- stop:阻止事件冒泡 -->
                // e.stopPropagation()
                
                alert("同学你好")
                // console.log(e.target)
            },
            showMsg(msg){
            console.log(msg)
            // alert('同事你好:')
            },
            demo2(){
                for(let index=0;index < 100000;index++){
                    console.log('for')
                }
                console.log('学不动了')
            }
        },

    });
</script>
</html>

3.键盘事件

Vue中常用的按键别名有:

  • 回车:enter
  • 删除:delete(捕获删除和退格键)
  • 退出:esc
  • 空格:space
  • 换行:tab(由于tab键在按下之后会自动失去对当前元素的焦点,所以建议配合keydown使用而不是keyup)
  • 上:up
  • 下:down
  • 左:left
  • 右:right

如果Vue未提供别名的按键,可以使用按键的原始key值去绑定,但需要将其转为kebab-case(短横线命名)。

系统修饰键包括ctrl、alt、shift、meta。配合keyup使用时,需要按下修饰键同时再按下其他键,然后释放其他键,事件才会被触发。配合keydown使用时,事件会正常触发。

也可以使用keyCode来指定具体的按键,但不推荐使用。

可以通过Vue.config.keyCodes来自定义键名和键码,来定制按键别名。

代码示例如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>键盘事件</title>

    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<!-- 
    1.Vue中常用的按键别名:
        回车=> enter
        删除=>delete(捕获删除”和“退格”键)退出=>esc
        空格=>space
        换行=> tab
        上=> up
        下=>down
        左=>left
        右=> right
    2.Vue未提供别名的按键,可以使用按键原始的key值去绑定,但注意要转为kebab-case(短横线命名)
    
    3.系统修饰键(用法特殊): ctrl、alt、 shift、meta(win键)
        (1).配合keyup使用:按下修饰键的同时,再按下任意其他健,随后释放其他键,事件才被触发。
        (2).配合keydown使用:正常触发事件。
    
        4.也可以使用keyCode去指定具体的按键(不推荐)
        
        5.Vue.config.keyCodes.自定义键名=键码,可以去定制按键别名
 -->

</head>
<body>

    <div id="root">
        <h2>欢迎业主{{name}}回家</h2>
        <!-- enter:表示当输入回车才会执行 -->
        <input type="text" placeholder="按下回车输入" @keyup.enter="showInfo">
        <!-- 这里也可以链式编程,并且编程组合键的形式了 -->
        <input type="text" placeholder="按下回车输入" @keyup.ctrl.y="showInfo">
        <!-- 由于tab键在按下之后会自动失去对当前元素的焦点
         所以建议配合keydown使用而不是keyup -->
    </div>
    
</body>

<script type="text/javascript">
    Vue.config.productionTip = false

    // 定义了一个别名按键
    Vue.config.Vue.config.keyCodes.huiche = 13

    new Vue({
        el:'#root',
        data:{
            name:'wwj'
        },
        methods: {
            showInfo(e){
                // console.log(e.target.value)

                // console.log(e.key,e.keyCode) 得出回车的按键编码是13
                /* if(e.keyCode !== 13){
                    return
                } */

                console.log(e.target.value)
            }
        },
    })


</script>
</html>

总结

大家加油

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2086510.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Java巅峰之路---进阶篇---面向对象(三)

Java巅峰之路---进阶篇---面向对象&#xff08;三&#xff09; 抽象类和抽象方法抽象类和方法的介绍抽象类和抽象方法的注意事项小练习 接口接口的介绍接口的注意事项&#xff1a;小练习成员特点与接口的各类关系接口中成员的特点补充&#xff1a;JDK8与JDK9新特性 接口与类之间…

esp32 驱动st7735s 显示数字

图片 下一步把ascii 8*8点阵输入程序&#xff0c;屏幕就可以显示ascii字符了&#xff0c;最终把此显示程序写成函数&#xff0c;输入参数为要显示字符的数组&#xff0c;这样就是st7735的显示驱动程序了。当然还要加入显示自动换行功能。 至于怎样显示ascii&#xff0c;我想到…

美羊羊今天给你讲Python类、对象(包听懂)

在Python中&#xff0c;我们都知道class用于创建类&#xff0c;这都知道吧。有谁不知道&#xff0c;举手&#xff01;&#xff01;&#xff01; 好的&#xff0c;感谢各位的点赞和关注。 一.类是什么东西 类包含两个东西&#xff0c;一个是成员变量&#xff0c;一个是成员方法…

Java、python、php版 美发美甲预约服务平台 美容院管理系统(源码、调试、LW、开题、PPT)

&#x1f495;&#x1f495;作者&#xff1a;计算机源码社 &#x1f495;&#x1f495;个人简介&#xff1a;本人 八年开发经验&#xff0c;擅长Java、Python、PHP、.NET、Node.js、Android、微信小程序、爬虫、大数据、机器学习等&#xff0c;大家有这一块的问题可以一起交流&…

微信小程序引入unocss

今天刚新建一个微信小程序&#xff0c;之前写过一篇《原子化CSS&#xff1a;Unocss的使用》&#xff0c;想着“偷懒”不想定义各种css样式类&#xff0c;于是准备把unocss引入进来使用。 安装与配置 1.安装依赖 npm add -D unocss unocss-preset-weapp2.配置unocss.config.t…

必看!查快递接口怎么选?

历经十四年的技术沉淀与迭代&#xff0c;百递云API开放平台目前提供四种高效、稳定同时各具特点的快递信息查询API服务&#xff0c;以满足广大B端客户在不同业务场景下的物流信息查询需求。 对于新客户来说&#xff0c;可能会感到困惑&#xff0c;日常销售和运营团队也会遇到客…

数字化转型升级探索(二)

在数字化转型升级的探索中&#xff0c;我们计划通过整合前沿技术如人工智能、物联网和大数据&#xff0c;全面改造传统业务流程&#xff0c;打造智能化、数据驱动的业务架构&#xff0c;实现从数据采集、处理到分析的全链条数字化&#xff0c;以提升决策效率、优化运营管理&…

echarts组件——折线统计图

echarts组件——折线统计图 折线图&折线渐变图 组件代码 <template><div :class"classname" :style"{height:height,width:width}" /> </template><script> // 折线图&折线渐变图 import * as echarts from echarts re…

2024最全网络安全工程师面试题(附答案),金九银十找工作必看!

吉祥知识星球http://mp.weixin.qq.com/s?__bizMzkwNjY1Mzc0Nw&mid2247485367&idx1&sn837891059c360ad60db7e9ac980a3321&chksmc0e47eebf793f7fdb8fcd7eed8ce29160cf79ba303b59858ba3a6660c6dac536774afb2a6330#rd 《网安面试指南》http://mp.weixin.qq.com/s…

版本控制工具git

版本控制工具 git 数据库 > 有代码历史版本 > 仓库 每个文件都是不同的历史版本&#xff0c;以便恢复 集中式版本控制系统 例如&#xff1a;SVN 缺陷&#xff1a; 1.依赖于中心服务器 分布式的版本管理系统 只有程序员用 git 只有需要在同步代码的时候需要联网 程…

Python运行时环境

1.1概念 程序运行只有栈帧不够&#xff0c;还要有进程与线程 Python在初始化时会创建一个主线程&#xff0c;所以其运行时环境中存在一个主线程&#xff0c;可以有多个线程 Python实现了对多线程的支持&#xff0c;而且一个线程就是操作系统上的一个原生线程 Python中所有线…

#Datawhale X 李宏毅苹果书 AI夏令营#1.2了解线性模型

1.2线性模型 什么是线性模型&#xff1f; 初始模型&#xff1a;, 其中y表示观看人数&#xff0c;x1表示前一天的观看人数&#xff0c;这个模型就是在用前一天的观看人数来预测当前的观看人数。 模型改进&#xff1a; 然而真实的数据是有周期性的&#xff0c;每隔7天&#…

向量数据库Milvus源码开发贡献实践

Milvus 是一款云原生的开源向量数据库&#xff0c;广泛应用于高维向量数据的管理和人工智能驱动的相似性搜索。无论是在构建智能搜索引擎还是开发数据驱动的应用&#xff0c;Milvus 都能提供强大的支持。我们将一起从头开始实践 Milvus 的标准开发流程&#xff0c;包括如何搭建…

企业画册在线版是怎么制作的?

随着互联网技术的飞速发展&#xff0c;传统的纸质企业画册已经逐渐无法满足现代企业的需求。为了让画册更加环保、便捷&#xff0c;同时提升企业形象和品牌影响力&#xff0c;企业画册在线版应运而生。那么&#xff0c;企业画册在线版究竟是如何制作出来的呢&#xff1f;今天&a…

嵌入式学习(数据库)

数据库的定义&#xff1a; 可以理解为数据库是用来存放数据的一个容器。有了数据库后&#xff0c;我们可以直接查找数据。或者可以对数据库进行读写删除等操作。 Sqlite 小型数据库 . Sqlite特点: 可以实现大数据量的管理 读写速度慢 最常见的数据库类型是关系型数据库管理…

QLU-AI助手初次微调Qwen2-7B-Instruct总结

一、微调代码 from datasets import Dataset import pandas as pd from transformers import (AutoTokenizer,AutoModelForCausalLM,DataCollatorForSeq2Seq,TrainingArguments,Trainer,GenerationConfig) import torch from peft import LoraConfig, TaskType, get_peft_mode…

探索待办事项管理新世界:10款工具带你告别杂乱无章

国内外主流的10款免费待办事项app对比&#xff1a;1.PingCode&#xff1b;2.Worktile&#xff1b;3.Todoist&#xff1b;4.Trello&#xff1b;5.Habitica&#xff1b;6.Forest&#xff1b;7.Teambition&#xff1b;8.Asana&#xff1b;9.嘀嗒清单&#xff08;TickTick&#xff…

poe供电原理以及应用

1,根据IEEE802.3af标准,一个完整的PoE系统包括供电端设备PSE和受电端设备PD两部分; 供电设备PSE是整个系统的电源提供者,为PD设备提供直流电源,其可分为M

[动态规划]---背包问题

前言 作者&#xff1a;小蜗牛向前冲 专栏&#xff1a;小蜗牛算法之路 专栏介绍&#xff1a;"蜗牛之道&#xff0c;攀登大厂高峰&#xff0c;让我们携手学习算法。在这个专栏中&#xff0c;将涵盖动态规划、贪心算法、回溯等高阶技巧&#xff0c;不定期为你奉上基础数据结构…

如何让ChatGPT说话更像人类

ChatGPT在多个领域展现了卓越的能力&#xff0c;但对话中仍不可避免地带有一定的机械感。幸运的是&#xff0c;OpenAI推出的GPTs功能可以让用户自定义prompt。最近&#xff0c;我发现了其中一个GPTs&#xff0c;它能让ChatGPT的对话更加贴近真人&#xff0c;现在就来与大家分享…