跳槽是每个人的职业生涯中都要经历的过程,不论你是搜索到的这篇文章还是无意中浏览到的这篇文章,希望你没有白白浪费停留在这里的时间,能给你接下来或者以后的笔试面试带来一些帮助。
也许是互联网未来10年中最好的一年。WINTER IS COMING。但是如果你不真正的自己去尝试尝试,你永远不知道市面上的行情如何。这次找工作下来,我自身感觉市场并没有那么可怕,也拿到了几个大厂的offer。在此进行一个总结,给自己,也希望能帮助到需要的同学。
面试准备
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
面试准备根据每个人掌握的知识不同,准备的时间也不一样。现在对于前端岗位,以前也许不是很重视算法这块,但是现在很多公司也都会考。建议大家平时有空的时候多刷刷leetcode。算法的准备时间比较长,是一个长期的过程。需要在掌握了大部分前端基础知识的情况下,再有针对性的去复习算法。面试的时候算法能做出来肯定加分,但做不出来也不会一票否决,面试官也会给你提供一些思路。
一、前言
在前期博文《Vue进阶(幺贰柒):Vue插槽》中主要讲解了Vue
插槽的基础用法,此篇博文接下来讲解高版本下通过v-slot
指令如何应用Vue
插槽及与slot
、slot-scope
的用法区别。
二、不具名插槽
<body>
<div id="app">
<Test>
<div>slot插槽占位内容</div>
</Test>
</div>
<template id="test">
<div>
<slot></slot>//定义插槽
<h3>这里是test组件</h3>
</div>
</template>
</body>
<script>
Vue.component('Test',{
template:"#test"
});
new Vue({
el:"#app",
})
</script>
三、具名插槽
<body>
<div id="app">
<Test>
<div slot="header">这里是头部</div>//具名插槽使用
<div slot="footer">这里是尾部</div>
</Test>
</div>
<template id="test">
<div>
<slot name="header"></slot>//具名插槽
<h3>这里是Test组件</h3>
<slot name="footer"></slot>
</div>
</template>
</body>
<script>
Vue.component(
'Test',{
template:"#test"
});
new Vue({
el:"#app"
})
</script>
四、v-slot
v-slot
在组件中使用slot
进行占位时,也是在slot
标签内使用name
属性给slot
插槽定义一个名字。但是在html
内使用时就有些不同了。需要使用template
模板标签,template
标签内,使用v-slot
指令绑定插槽名,标签内写入需要添加的内容。
<body>
<div id="app">
<Test>
<template v-slot:header>//v-slot指令使用插槽
<h2>slot头部内容</h2>
</template>
<p>直接插入组件的内容</p>
<template v-slot:footer>
<h2>slot尾部内容</h2>
</template>
</Test>
</div>
<template id ='test'>
<div class="container">
<header>
<!-- 我们希望把页头放这里 -->
<slot name = "header"></slot>//具名插槽
</header>
<section>
主体内容部分
</section>
<footer>
<!-- 我们希望把页脚放这里 -->
<slot name = 'footer'></slot>
</footer>
</div>
</template>
</body>
<script>
Vue.component('Test',{
template:"#test"
});
new Vue({
el:"#app"
})
</script>
五、slot-scope 与 v-slot
5.1 slot-scope
- 在组件模板中书写所需
slot
插槽,并将当前组件的数据通过v-bind
绑定在slot
标签上。- 在组件使用时,通过
slot-scope=“scope”
,接收组件中slot
标签上绑定的数据。- 通过
scope.xxx
就可以使用绑定数据了
<body>
<div id="app">
<Test>
<div slot="default" slot-scope="scope">//作用域插槽的用法(slot-scope)
{{ scope.msg }}
</div>
</Test>
</div>
**这里分享一份由字节前端面试官整理的「2021大厂前端面试手册」,内容囊括Html、CSS、Javascript、Vue、HTTP、浏览器面试题、数据结构与算法。全部整理在下方文档中,共计111道**
### HTML
* HTML5有哪些新特性?
* Doctype作⽤? 严格模式与混杂模式如何区分?它们有何意义?
* 如何实现浏览器内多个标签页之间的通信?
* ⾏内元素有哪些?块级元素有哪些? 空(void)元素有那些?⾏内元 素和块级元素有什么区别?
* 简述⼀下src与href的区别?
* cookies,sessionStorage,localStorage 的区别?
* HTML5 的离线储存的使用和原理?
* 怎样处理 移动端 1px 被 渲染成 2px 问题?
* iframe 的优缺点?
* Canvas 和 SVG 图形的区别是什么?
![](https://img-blog.csdnimg.cn/img_convert/476288e164f5711c5c11e55a79185bd8.png)
### JavaScript
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**
* 问:0.1 + 0.2 === 0.3 嘛?为什么?
* JS 数据类型
* 写代码:实现函数能够深度克隆基本类型
* 事件流
* 事件是如何实现的?
* new 一个函数发生了什么
* 什么是作用域?
* JS 隐式转换,显示转换
* 了解 this 嘛,bind,call,apply 具体指什么
* 手写 bind、apply、call
* setTimeout(fn, 0)多久才执行,Event Loop
* 手写题:Promise 原理
* 说一下原型链和原型链的继承吧
* 数组能够调用的函数有那些?
* PWA使用过吗?serviceWorker的使用原理是啥?
* ES6 之前使用 prototype 实现继承
* 箭头函数和普通函数有啥区别?箭头函数能当构造函数吗?
* 事件循环机制 (Event Loop)
![](https://img-blog.csdnimg.cn/img_convert/0ba8bcdea9cbbc7373d2fa90b1951a07.png)