2024年前端最新4，Web前端中高级岗面试为何越来越难

最新推荐文章于 2024-07-10 17:14:52 发布

2401_84434442

最新推荐文章于 2024-07-10 17:14:52 发布

阅读量890

点赞数 20

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

本文链接：https://blog.csdn.net/2401_84434442/article/details/138797905

版权

程序员专栏收录该内容

189 篇文章 0 订阅

订阅专栏

文末

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

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

推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；
大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。

1.键盘事件

Vue中常用的按键别名:

回车 => enter

删除 => delete (删除和退格)

退出 => esc

空格 => space

换行 => tab(特殊,必须必须配合keydown)

上 => up

下 => down

左 => left

右 => right

系统修饰符(用法特殊):ctrl,alt,shift,meta(window)

1.配合keydown使用

2.使用keyup得按下其他键,然后再松那个键才行

举一个按下回车的事件

<body>
    <div id="root">
        <h2>Welcome to {{name}}</h2>
        <input type="text" placeholder="按下回车提示输入" @keyup.enter='showInfo'>
    </div>
    <script>
        Vue.config.productionTip = false
        var vm = new Vue({
            el: "#root",
            data: {
                name: '爱打羽毛球的程序员的CSDN',
            },
            methods: {
                showInfo(e) {

                    console.log(e.target.value)
                }
            }
        })
    </script>
</body>

按下回车弹出提示

2.事件处理

事件的基本使用

1.使用v-on:xxx or @xxx 绑定事件,其中xxx是事件名

2.事件的回调需要配置在methods对象中,最终会在vm中

3.method中配置的函数不能用箭头函数

4.method中配置的函数,都是被Vue所管理的函数,this指向vm或者组件实例对象

⭐事件也可以配置在data当中,但是这样会加重Vue的负担,data中的数据会进行数据代理和数据劫持

如果把函数放在data中,会对函数也进行代理,但是函数并不需要进行数据代理


<body>
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <button @click="showInfo">click me</button>
        <!--@click = v-on:click-->
        <button @click="showInfo2(66)">click me</button>
        <button @click="showInfo2(66,$event)">click me</button>

        <!--
            上面的showInfo,showInfo(66),
            一个有括号,一个没有,这里如果不传参数,可以不加,传参数的话,就需要加       
        -->
    </div>

    <script>
        Vue.config.productionTip = false

        new Vue({
            el: '#root',
            data: {
                name: 'CSDN',
            },
            methods: {
                showInfo() {
                    console.log(this)//此处是vm
                },
                showInfo2(number, event) {
                    console.log(number)
                }
            },

        })
    </script>
</body>