Web前端最全4(9)，最新Web前端高级面试题汇总-优快云博客

自学几个月前端，为什么感觉什么都没学到？？

这种现象在很多的初学者和自学前端的同学中是比较的常见的。

因为自学走的弯路是比较的多的，会踩很多的坑，学习的过程中是比较的迷茫的。

最重要的是，在学习的过程中，不知道每个部分该学哪些知识点，学到什么程度才算好，学了能做什么。

很多自学的朋友往往都是自己去找资料学习的，资料上有的或许就学到了，资料上没有的或许就没有学到。

这就会给人一个错误的信息就是，我把资料上的学完了，估计也-就差不多的了。

但是真的是这样的吗？非也，因为很多人找的资料就是很基础的。学完了也就是掌握一点基础的东西。分享给你一份前端分析路线，你可以参考。

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

还有很多的同学在学习的过程中一味的追求学的速度，很快速的刷视频，写了后面忘了前面，最后什么都没有学到，什么都知道，但是什么都不懂，要具体说，也说不出个所以然。

所以学习编程一定要注重实践操作，练习敲代码的时间一定要多余看视频的时间。

空格 => 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: '爱打羽毛球的程序员的优快云',
            },
            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: '优快云',
            },
            methods: {
                showInfo() {
                    console.log(this)//此处是vm
                },
                showInfo2(number, event) {
                    console.log(number)
                }
            },

        })
    </script>
</body>

3.事件修饰符

Vue中的事件修饰符：

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

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

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

4.capture:使用事件的捕获模式,（点击子元素，会发生冒泡事件的逆过程）

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

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

⭐事件修饰符可以连用