2024年Web前端最全vue-事件处理_vue页面刷新后,导致keydown时间不可用(1)，2024年最新前端页面的信息展示主要包括哪三个层面

2401_84617731

于 2024-05-11 06:10:33 发布

阅读量559

点赞数 7

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84617731/article/details/138694647

版权

程序员专栏收录该内容

106 篇文章 0 订阅

订阅专栏

最后

推荐一些系统学习的途径和方法。

路线图

每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

HTML 和 CSS：

html5知识

css基础知识

self，event.target是当前操作元素时才会触发事件，即event.target ==
event.currentTarget返回true时。
passive，事件的默认行为会立即执行，无需等待事件回调执行完毕。

滚轮事件（不加修饰符passive）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo1</title>
    <script src="../js/vue.js"></script>
    <style>
        .list{
            width: 200px;
            height: 200px;
            background: peru;
            overflow: scroll;

        }
        .item{
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="root">
        <ul class="list" @wheel="showInfo">
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
        </ul>
    </div>
    <script>
        Vue.config.productionTip = false;

        const vm = new Vue({
            el:"#root",
            methods:{
                showInfo(){
                    for (let index = 0; index < 100000; index++) {
                        console.log("#");
                    }
                }
            }
        });        
    </script>
</body>
</html>

向下滚动滚轮触发事件，执行回调showInfo，showInfo执行完后，滚动条才会往下滑动。
滚轮事件（加修饰符passive）

<div id="root">
    <ul class="list" @wheel.passive="showInfo">
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
    </ul>
</div>

@wheel.passive时，滚动滚轮触发事件，滚动条会立即滑动，不用等回调showInfo执行完。
键盘修饰符

enter。如 @keyup.enter，键盘事件keyup发生且按键是回车键shagn（Enter）时，执行回调。
.delete。如@keyup.delete，键盘事件keyup发生且按键是删除键（Delete或Backspace）时，执行回调
.esc。如@keyup.esc，键盘事件keyup发生且按键是退出键（Esc）时，执行回调。
.space。如@keyup.space，键盘事件keyup发生且按键是空格键时，执行回调。
.up。如 @keyup.up，键盘事件keyup发生且按键是向上键（↑）时，执行回调。
.down。如@keyup.down，键盘事件keyup发生且按键是向下键（↓）时，执行回调。
.left。如@keyup.left，键盘事件keyup发生且按键是向左键（←）时，执行回调。
.right。如@keyup.right，键盘事件keyup发生且按键是向右键（→）时，执行回调。
.tab。如@keydown.tab，键盘事件keydown发生且按键是tab键时，执行回调。
系统修饰符
ctrl。如，@keydown.ctrl，键盘事件keydown发生且按键是ctrl键（Ctrl）时，执行回调。
shift。如，@keydown.shift，键盘事件keydown发生且按键是Shift键（Shift）时，执行回调。
alt。如，@keydown.alt，键盘事件keydown发生且按键是alt键（Alt时，执行回调。
meta。如，@keydown.meta，键盘事件keydown发生且按键是meta键（⊞）时，执行回调。
多个修饰符
.stop.prevent，先阻止冒泡，再阻止默认行为。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo1</title>
    <script src="../js/vue.js"></script>
    <style>
        .container{
            background-color: skyblue;
            width: 200px;
            height: 100px;
        }
        .content{
            padding-top: 50px;
        }
    </style>
</head>
<body>
<div id="root">
    <div class="container" @click="showInfo">
        <div class="content">
            <a href="http://www.baidu.com" @click.stop.prevent="showInfo">点我提示信息</a>
        </div>
        
#### 总结

*   对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

*   算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈...（最好多刷一刷，不然影响你的工资和成功率????）

*   在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。



*   要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！



![](https://img-blog.csdnimg.cn/img_convert/41a409bca685b4ea0e0aa1a5589c3e09.png)



第一次跳槽十分忐忑不安，和没毕业的时候开始找工作是一样的感受，真的要相信自己，有条不紊的进行。**如果有我能帮忙的地方欢迎随时找我，比如简历修改、内推、最起码，可以把烦心事说一说**，人嘛都会有苦恼的～

祝大家都有美好的未来，拿下满意的 offer。

2401_84617731

关注

7
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
2024年Web前端最全vue-事件处理_vue页面刷新后,导致keydown时间不可用(1)，2024年最新前端页面的信息展示主要包括哪三个层面

推荐一些系统学习的途径和方法。每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】self，event.target是当前操作元素时才会触发事件，即event.target ==event.currentTarget返回true时。
复制链接

扫一扫