css
1,盒模型
2,如何实现一个最大的正方形
3,一行水平居中,多行居左
4,水平垂直居中
5,两栏布局,左边固定,右边自适应,左右不重叠
6,如何实现左右等高布局
7,画三角形
8,link @import导入css
9,BFC理解
js
1,判断 js 类型的方式
2,ES5 和 ES6 分别几种方式声明变量
3,闭包的概念?优缺点?
4,浅拷贝和深拷贝
5,数组去重的方法
6,DOM 事件有哪些阶段?谈谈对事件代理的理解
7,js 执行机制、事件循环
8,介绍下 promise.all
9,async 和 await,
10,ES6 的 class 和构造函数的区别
11,transform、translate、transition 分别是什么属性?CSS 中常用的实现动画方式,
12,介绍一下rAF(requestAnimationFrame)
13,javascript 的垃圾回收机制讲一下,
14,对前端性能优化有什么了解?一般都通过那几个方面去优化的?
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
常见情景1**:**在VUE中使用img显示图片的时候,通过传参的方式传入图片的路径和名称,VUE不加载本地资源而是通过http://localhost:8080/…的地址去加载网络资源,从而出现了图片无法显示的情况。
常见情景2**:**针对上述的问题,我们有些人会使用require函数去设置程序,告诉VUE你加载资源的时候加载本地资源,这个时候回报错:VUE使用require报错:Uncaught Error: cannot module ‘asstes/logo.png’
2、常规的使用图片方式
1、
2、<img src=…%2F%2F2.png%E2%80%9D&pos_id=img-BnvRHLqn-1715833125665) />
这种直接通过相对路径获取项目下的图片或者直接使用或传入网络资源是没有问题的。
3、期望使用动态的图片地址
案例说明:在vue中通过ref创建了一个响应式的参数imgUrl,图片的路径是asstes/logo.png,在template中img通过:src绑定使用了imgUrl,这个时候图片是无法显示的。
原因:vue没有将当前的图片信息当成是本地的静态资源处理,而是当成了网络资源处理,所以报错404找不到资源。
<template>
<div>
<img :src="imgUrl" alt="">
</div>
</template>
<script>
import { ref } from 'vue'
export default {
name: 'App',
setup(){
//简单数据的响应
const imgUrl=ref('asstes/logo.png')
return {imgUrl}
}
}
</script>
4、通过require解决上述问题
我们对上面的代码进行改造,告诉VUE你要加载本地的静态资源而不是网络资源
我们在img中的:src中加入了require,这个函数可以实现加载本地资源而给网络资源
但是这个有报错。
VUE使用require报错:Uncaught Error: cannot module ‘asstes/logo.png’
<template>
<div>
<img :src="require(imgUrl)" alt="">
</div>
</template>
<script>
import { ref } from 'vue'
export default {
name: 'App',
setup(){
//简单数据的响应
const imgUrl=ref('asstes/logo.png')
return {imgUrl}
}
}
</script>
最后
我可以将最近整理的前端面试题分享出来,其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等,还在持续整理更新中,希望大家都能找到心仪的工作。
篇幅有限,仅展示部分截图: