前端社招(一年经验)面经三_前端毕业半年社招_安安安安安沅的博客-程序员秘密

一、position

在这里插入图片描述
拓展：relative与absolute的主要区别

定位为relative的元素脱离正常的文本流中，但其在文本流中的位置依然存在；定位为absolute的层脱离正常文本流，但与relative的区别是其在正常流中的位置不再存在。
relative定位的层总是相对于其最近的父元素，无论其父元素是何种定位方式；对于absolute定位的层总是相对于其最近的定义为absolute或relative的父层，而这个父层并不一定是其直接父层。如果其父层中都未定义absolute或relative，则其将相对body进行定位。

二、上中下分左右布局怎么实现的

在这里插入图片描述

①上下部分就是普通处理，fixed固定布局

position: fixed;

②中间利用上下padding，留出上下部分的位置。
在这里插入图片描述
③左侧nav栏目，要固定也要用fixed。不过固定定位的元素要想高度百分百，可以使用top+bottom对应方位值的拉伸效果：（之所以top:60;bottom:60;是因为header和footer的高度均为60px）

section.fixedLeft nav {
    position: fixed;
    top: 60px;
    bottom: 60px;
}

④这里，section的flex布局可以不存在，因为右边内容区域使用margin-left边距值留出了左侧nav的位置，作为block布局流体自适应占满右侧剩余空间：

section.fixedLeft article {
    margin-left: 200px;
}

三、element ui怎么配置

①安装

npm i element-ui -S

②在main.js中进行引入：
在这里插入图片描述
③引入完成之后就可以直接使用了。

四、element ui table中的按钮怎么实现

<el-button>标签

五、vue项目搭建命令？搭建过程有哪些需要配置？

1.vue create 项目名
2.首先，会提示你选择一个preset（预设）：
① 除最后两个，其他选项都是你此前保存的预设配置（如下图第一个“ preset-config”是我之前保存的预设配置，如今便可以直接用了）：
在这里插入图片描述
如果没有配置保存过，则只有以下两个选项：
② default（babel，eslint）：
默认设置（直接enter）非常适合快速创建一个新项目的原型，没有带任何辅助功能的 npm包
③ Manually select features：
手动配置（按方向键 ↓）是我们所需要的面向生产的项目，提供可选功能的 npm 包
在这里插入图片描述
手动配置，根据你需要用方向键选择（按 “空格键”选择/取消选择，A键全选/取消全选）对应功能

选择完后直接enter，然后会提示你选择对应功能的具体工具包，选择自己擅长或者使用广泛的（方便遇到问题时百度），简介如下：
在这里插入图片描述

拓展：hash和history路由模式的区别

hash 路由：监听 url 中 hash 的变化，然后渲染不同的内容，这种路由不向服务器发送请求，不需要服务端的支持；history路由：监听 url 中的路径变化，需要客户端和服务端共同的支持。
hash
即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。
比如这个 URL：http://www.baidu.com/#/home，hash 的值为 #/home。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。
history 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState()
方法（需要特定浏览器支持），用来完成 URL
跳转而无须重新加载页面，不过这种模式还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，就需要配置404页面。

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '*', component: NotFoundComponent }
  ]
})

六、v-if和v-show

（1）区别：

手段：v-if是通过控制dom节点的存在与否来控制元素的显隐；v-show是通过设置DOM元素的display样式，block为显示，none为隐藏；
编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；
编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存后，然后再切换的时候进行局部卸载)；v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；
性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗。

（2）总结：

v-if判断是否加载，可以减轻服务器的压力，在需要时加载,但有更高的切换开销；v-show调整DOM元素的CSS的dispaly属性，可以使客户端操作更加流畅，但有更高的初始渲染开销。
如果需要非常频繁地切换，则使用v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

本文链接：https://blog.csdn.net/qq_37899622/article/details/115010744

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

在学习linux基础入门时的一些问题总结（1）_weixin_33937499的博客-程序员秘密

本周在实验楼完成了《linux基础入门》的21个实验，虽然之前已经学习过linux的相关课程，对linux下的命令也有一些了解和实践，但完成这21个实验以及35个练习题仍然遇到了许多的问题，主要有以下4个方面：useradd和adduser的区别crontab命令的使用vim编辑器的使用chmod命令的执行实际应用中的问题主要是从实验测试中所发现，在做以下2个测试中遇到了一些问题：挑...

写博客的使用说明_工业的血液的博客-程序员秘密

写博客的使用说明欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Mark...

Python 3.7.1 模块 urllib.request_python3.7 urllib_百年da孤独的博客-程序员秘密

目录1. 功能urllib.request.urlopen(url, data=None, [timeout, ]*, cafile=None, capath=None, cadefault=False, context=None)源代码： Lib / urllib / request.py此模块定义了有助于在现实环境中打开URL（主要是HTTP）的函数和类 - 基本和摘要式身份验证，重定向...

rootfs编译步骤2解析_编译rootfs_淡定的小龟的博客-程序员秘密

1 编译步骤make cleanmake image-nocheck获取image/output/images文件夹为期望文件2 过程解析2.1 调用 image/makefile$(MAKE) -C image clean$(MAKE) -C image all建立目录 image/output/images/boot2.2 调用 include configs/i2m/rootfs.mk$(MAKE) rootfs2.3 准备rootfs分区解压 rootfs 到

python数据分析案例教程(慕课版)-Python 数据分析通关攻略_weixin_39529302的博客-程序员秘密

你将收获掌握 Python 数据分析的基本技能一线数据分析工程师的实际工作经验指路打通数据分析理论到实战的关卡，先学知识后练技巧掌握可视化技术做出炫酷工作汇报，增加工作亮点掌握利用流行的 Pyecharts 工具绘制动态图表，提升工作效率讲师介绍讲师 Lemeng_study，浙江大学工学硕士，资深数据挖掘专家，一位在一线有着 8 年工作经验的技术老兵，热衷于知识的传播与分享。课程简介当人工智能的...

计算机操作系统-详细版_ITNXD的博客-程序员秘密

一、操作系统概述1、操作系统定义操作系统（Operating System，OS）：是指控制和管理整个计算机系统的硬件和软件资源，并合理地组织调度计算机的工作和资源的分配，以提供给用户和其他软件方便的接口和环境，它是计算机系统中最基本的系统软件。是系统最基本最核心的软件，属于系统软件控制和管理整个计算机的硬件和软件资源合理的组织、调度计算机的工作与资源的分配为用户和其它软件提供方便的接口和环境2、操作系统功能和目标作为系统资源的管理者处理机调度（管理）：在多道程序环境下，cpu的分配