前端社招(一年经验)面经三

一、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中的按钮怎么实现

标签

五、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 较好。