跳槽是每个人的职业生涯中都要经历的过程，不论你是搜索到的这篇文章还是无意中浏览到的这篇文章，希望你没有白白浪费停留在这里的时间，能给你接下来或者以后的笔试面试带来一些帮助。
也许是互联网未来10年中最好的一年。WINTER IS COMING。但是如果你不真正的自己去尝试尝试，你永远不知道市面上的行情如何。这次找工作下来，我自身感觉市场并没有那么可怕，也拿到了几个大厂的offer。在此进行一个总结，给自己，也希望能帮助到需要的同学。
面试准备
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
面试准备根据每个人掌握的知识不同，准备的时间也不一样。现在对于前端岗位，以前也许不是很重视算法这块，但是现在很多公司也都会考。建议大家平时有空的时候多刷刷leetcode。算法的准备时间比较长，是一个长期的过程。需要在掌握了大部分前端基础知识的情况下，再有针对性的去复习算法。面试的时候算法能做出来肯定加分，但做不出来也不会一票否决，面试官也会给你提供一些思路。
<div>{{ rawHtml }}</div>
<div v-html="rawHtml"></div>
data(){
return{
rawHtml:“百度”
}
}
**例子**
##### 属性Atribute
Mustache 语法不能在HTML属性中使用，然而人，可以使用v-bind指令
data(){
return{
cId:1001
}
}
**例子**
>
> **温馨提示：**
> v-bind 可以简写成 :
>
>
>
##### 使用JavaScript表达式
在我们的模块中，我们一直都只绑定简单的propetry键值，vue.js都提供了完全的JavaScript表达式支持
{{number+1}}
{{ok?‘yes’:‘‘no}}
{{}message.split(’’).reverse().join(‘’)}
这些表达式会在当前活动实例的数据作用域下作为JavaScript被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面这些例子都不会生效
{{var a=1}}
{{if(ok){return message}}}
**例子**
## 四、Vue条件渲染
##### v-if
v-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回true值的时候被渲染。
我是要成为海贼王的男人--路飞
data(){
return{
flag:true
}
}
**例子**
##### v-else
你可以使用v-else来表示v-if的else块
<p v-if="flag">我是要成为海贼王的男人--路飞</p>
<p v-else>路飞</p>
data(){
return{
flag:false
}
}
**例子**
##### v-show
另一个用于条件性展示元素的选项式v-show指令
我是要成为海贼王的男人--路飞
data(){
return{
flag:true
}
}
##### v-if和v-show的区别
**也是经典的面试题**
* v-if是真正的渲染，因为它会确保在切换过程中，条件块内的事件监听器和子组件适当地被销毁和重建
* v-if也是**惰性的**，如果在初始渲染时条件为假，则什么也不做–一直到条件第一次变为真时，才会开始渲染条件块。
* 相比之下，v-show就简单得多–不管初始条件是什么，条件总是会被渲染，并且只是简单地基于CSS进行切换。=>display=>none和block之间切换。
* 一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此如果需要非常频繁地切换，则使用v-show较好。如果在运行条件很好改变，则使用v-if较好。
## 五、Vue列表渲染
##### v-for
用v-for把一个数组映射为一组元素
>
> 我们可以用v-for指令基于一个数组来渲染一个列表。v-for指令需要使用item in items形式的特殊语法，其中items是原数据数组，而item则是被迭代的数组元素的**别名**
>
>
>
- {{ item.title }}
data(){
return{
newsList:[
{
id:1001,
title:‘新闻头条1’
},
{
id:1002,
title:‘新闻头条2’
},
{
id:1003,
title:‘新闻头条3’
},
]
}
}
**例子**
##### 维护状态
* 当vue正在更新使用v-for渲染的元素列表时，它默认使用’就地更新’的策略。如果数据项的顺序被改变，vue将不会移动DOM元素来匹配数据项的顺序，而是就地更新每个元素，并且确保他们在没个索引位置正确渲染。
* 为了给vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一的key attribute:
<ul>
<li v-for="item in newsList" :key="item.id">{{ item.title }}</li>
</ul>
<ul>
<li v-for="{item,index} in newsList" :key="index">{{ item.title }}</li>
//数据没有id，可以用index下面绑定key
</ul>
## 五、Vue事件处理
##### 监听事件
我们可以使用v-on指令(通常缩写为@符号)来监听DOM事件，并在触发事件时执行一些JavaScript。用法为v-on:click='methodName’或使用快捷方式@click=“methodName”
<button v-on:click="num+=1">点击:{{ num }}</button>
<button @click="num+=1">点击:{{ num }}</button>
data(){
return{
num:0
}
}
**例子**
##### 事件处理方法
然而许多事件处理逻辑会更为复杂，所以直接把JavaScript代码写在v-on指令中是不可行的。因此v-on还可以接收一个需要调用的方法名称。
<button @click="clickHandle">按钮</button>
<p>{{ message }}</p>
data(){
return{
num:0,
message:‘消息通知’
}
},
methods:{
clickHandle(e){
//在事件中，读取data中的属性，是需要通过this.属性
this.message=‘消息被撤回了’
console.log(e)
// e是原生DOM event
e.target.innerHTML=‘点击之后’
}
}
**例子**
##### 内联处理器中的方法
这是官方的翻译称呼，其实我们可以直接叫他“事件传递函数”
<button @click="say('hi')">say hi</button>
<button @click="say('what')">say what</button>
methods:{
say(data){
console.log(data)
}
}
}
**例子**
**例子2**
<ul>
<li v-for="item in names
" @click=“clickItemHandle(item)”>{{ item }}
data(){
return{
names:[‘路飞’,‘索隆’,‘乔巴’]
}
},
methods:{
clickItemHandle(item){
console.log(item)
}
}
## 六、Vue表单输入绑定
##### v-model
你可以用v-model指令在表单input、textarea及select元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。它负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特殊处理。
{{ useName }},{{ password }}
data(){
return{
useName:“”,
password:“”
}
},
methods:{
clickGetUserName(){
console.log(this.useName)
}
}
**例子**
##### 修饰符
**lazy：** 在默认情况下，v-model在每次input事件触发后将输入框的值与数据进行同步，你可以添加lazy修饰符，从而转为change事件之后进行同步=>或者或失去焦点时=>减少性能消耗
**.trim:**
如果要自动过滤用户输入的首尾空白符，可以给v-model添加trim修饰符
## 七、Vue组件基础
##### 单文件组件
vue单文件组件(又名==.vue文件==,缩写SFC)是一种特殊的文件格式，它允许将vue组件的 teplate => 模板、 script =>逻辑与 style => 样式封装在单个文件中
单文件组件
##### 加载组件
* 第一步:引入组件=>import HelloWorld from ‘./components/HelloWorld.vue’
* 第二步:挂载组件=>components: {HelloWorld}
* 第三步:显示组件=>
`<HelloWorld/>`
##### 组件的组织
通常一个应用以一颗嵌套的组件树的形式来组织
## 八、Vue中Props组件交互
##### Props
组件与组件之间是需要存在交互的，否则完全没关系，组件的意义就很小了
prop是你可以在组件上注册的一些自定义attribute
**从父组件传递**
data(){
return{
title:‘我是一个标题’,
age:20,
names:[‘路飞’,‘索隆’]
}
},
**从子组件接收**
{{ title }}
{{ age }}
- {{ item }}
export default{
name:‘pop1’,
props:{
title:{
type:String,
// 接收值的类型
default:‘’
// 默认值
},
age:{
type:Number,
default:‘’
},
names:{
type:Array,
// 数组和对象必须使用函数进行返回
default:function(){
return []
}
}
}
}
##### Props类型
Props传递参数其实是没有类型限制的
>
> **温馨提示**
> 数据类型为数组或者对象的时候，默认值是需要返回工厂模式（工厂模式=>函数模式）
>
>
>
Props:{
title:String,
likes:Number,
isPublished:Boolean,
commentIds:Array,
author:Object,
callback:Function
}
**例子**
## 九、Vue中自定义事件组件交互
自定义事件可以在组件中反向传递数据，prop可以将数据从父组件传递到子组件，那么反向如何操作呢，就可以利用自定义事件实现 $emit
**从子组件通过自定义事件向父组件传递数据**
<button @click=“sendClickHandle”>点击向父组件传递数据
data(){
return{
message:‘我是emits组件数据’
}
},
methods:{
sendClickHandle(){
// 参数1:字符串:理论上是随便的，但是需要具有意义
// 参数2:传递的数据
this.$emit(‘onEvent’,this.message)
}
**父组件接收数据**
<emits @onEvent=“getDateHandle” />
{{ message }}
data(){
return{
//先定义一个接收数据的字段
message:‘’,
}
},
methods:{
//自定义的事件
getDateHandle(data){
console.log(data)
this.message=data
}
}
**例子**
## 十、Vue组件生命周期
每个组件在被创建时都要经历一系列的初始化1过程一一例如，需要设置数据监听，编译模板、将实例挂载到DOM并在数据变化时更新DOM等，同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会
**下方是vue官方生命周期图示=>所有红色框都输入vue的生命周期**
一定要记住，这也是面试和前端必须掌握的
**为了方便记忆，我将它们进行了一下分类：**
* 创建时 :beforeCreate创建之前、created创建完成
* 渲染时: beforeMount渲染之前、mounted渲染完成
* 更新时: beforeUpdate更新之前、updated更新完成
* 卸载时: beforeUnmount卸载之前、unmounted卸载完成
export default {
data() {
return {
message: ‘’
}
},
// 创建时
beforeCreate() {
console.log(‘beforeCreate:组件创建之前’);
},
created() {
console.log(‘created:组件创建完成’);
},
// 渲染时
beforeMount() {
console.log(‘beforeMount:组件渲染之前’);
},
mounted() {
console.log(‘mounted:组件渲染完成’);
//把网络请求放到这里
},
// 更新时
beforeUpdate(){
console.log(‘beforeUpdate:组件更新之前’);
},
updated(){
console.log(‘updated:组件更新完成’);
},
// 销毁时
beforeUnmount(){
console.log(‘beforeUnmount:组件卸载之前’);
//卸载之前，把消耗性能的处理都干掉
//比如定时器
},
unmounted(){
console.log(‘unmounted:组件卸载完成’);
}
}
**运行顺序**
组件创建完成就会执行这四个声明周期=>如控制台打印所示：
页面发生变化执行的生命周期=>如控制台打印所示：
组件销毁时执行的生命周期，这里就先不给大家测试了，等后续用到我会写在文档中，总而言之，这些生命周期大家日后根据自己项目的业务逻辑进行熟悉，这里先做一些简单的了解
// 销毁时
beforeUnmount(){
console.log(‘beforeUnmount:组件卸载之前’);
},
unmounted(){
console.log(‘unmounted:组件卸载完成’);
}
## 十一、Vue之引入第三方插件
关于大家在日常开发中有一些需求，可以在github上搜和vue官网推的
>
> **温馨提示**
> [GitHub](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)
>
>
>
根据点星数进行筛选
另外一个就是vue官网整合的一些比较好的第三方
>
> **温馨提示**
> [Vue2官网](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)
> 注意一定要注意自己使用vue的版本，并不是每个都可以用的，一定要找版本对应的
>
>
>
##### Swiper轮播图插件
>
> **温馨提示**
> [Swiper官方文档](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)
> [在vue中使用Swiper官方文档](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)
>
>
>
* Swiper开源、免费、强大的触摸滑动插件
* Swiper是JavaScript打造的滑动特效插件，面向手机、平板、平板电脑等移动终端
* Swiper能实现触屏焦点图、触屏Tab切换、触屏轮播切换等常用效果
npm i swiper–save
//在终端安装
npm i swiper–save@8.16
//安装指定版本
**例子**
##### Swiper添加指示器
**例子**
## 十二、Axios网络请求
☞[Axios官方API](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)
☞[看云–Axios文档](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)
Axios是一个基于Promise的网络请求库
##### Axios安装
Axios的应用是需要单独安装的
npm install --save axios
##### Axios引入
组件中引入:
import axios from “axios”
##### Axios网络请求基本实例
###### get请求
<p>{{ chengpin.title }}</p>
import axios from ‘axios’
// 引入axios
export default{
name:‘axiosob’,
mounted(){
console.log(‘mounted:组件渲染完成’);
//把网络请求放到这里
// get请求方式
axios({
method:‘get’,
// 请求方式
url:‘http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php’
// 请求地址
}).then(res=>{
console.log(res.data)
this.chengpin=res.data.chengpinDetails[0]
// 取数据
})
},
data(){
return{
chengpin:{}
//用来接受请求的数据
}
}
}
###### get请求快捷方案
axios.get('http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php').then(res=>{
console.log(res.data)
this.chengpin=res.data.chengpinDetails[0]
// 取数据
})
**例子**
###### post请求
import axios from ‘axios’
// 引入axios
export default{
name:‘axiosob’,
mounted(){
console.log(‘mounted:组件渲染完成’);
//把网络请求放到这里
// post请求方式
axios({
method:‘post’,
// 请求方式
url:‘http://iwenwiki.com/api/blueberrypai/login.php’,
// 请求地址
data:{
user_id:‘iwen@qq.com’,
password:‘iwen123’,
verification_code:‘crfvw’
}
// data是向后端接口传递的数据,可以数据实际工作中一定要根据后端给的文档规范传
}).then(res=>{
// 取数据
console.log(res.data)
})
},
data(){
return{
}
}
}
**但是遇到了一个问题**
post请求向后端传递数据时，可能会遇到格式的问题，转字符串可以用以下第三方插件,可能已经过时了，这种第三方有很多，像qs等等
>
> **温馨提示**
> post请求参数需要额外处理的
>
>
> 1. 转依赖：npm install --save querystring
> 2. 转换参数格式：querystring.stringify({})
>
>
>
npm install --save querystring
安装完成，在组件中引用
import querystring from ‘querystring’
使用querystring
// post请求方式
axios({
method:'post',
// 请求方式
url:'http://iwenwiki.com/api/blueberrypai/login.php',
// 请求地址
data:querystring.stringify({
user\_id:'iwen@qq.com',
password:'iwen123',
verification\_code:'crfvw'
})
// data是向后端接口传递的数据,可以数据实际工作中一定要根据后端给的文档规范传
}).then(res=>{
// 取数据
console.log(res.data)
})
使用后这样就没问题了
**例子**
###### post请求快捷方案
axios.post('http://iwenwiki.com/api/blueberrypai/login.php',querystring.stringify({
user\_id: 'iwen@qq.com',
password: 'iwen123',
verification\_code: 'crfvw'
})).then(res=>{
console.log(res.data)
})
},
##### 全局引用axios:
在main.js主入口文件引入
import { createApp } from ‘vue’
import App from ‘./App.vue’
import ‘./registerServiceWorker’
import axios from ‘axios’
// 全局引入axios
const app=createApp(App)
app.config.globalProperties.$axios = axios
//axios挂载到全局
app.mount(‘#app’)
在组件中使用就要变一下，例如
this.$axios.get('http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php').then(res => {
console.log(res.data)
this.chengpin = res.data.chengpinDetails[0]
// 取数据
})
**例子**
## 十三、Axios网络请求封装
☞[Axios官方API](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)
☞[看云–Axios文档](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)
在日常开发过程中，一个项目中的请求会很多，此时一般采取的方案是网络请求封装起来
##### request.js封装Axios网络请求代码
在src目录下创建文件夹utils，并创建文件request.js，用来存储网络请求对象axios
import axios from “axios”;
// 引入axios
import querystring from “querystring”;
// 引入querystring
const errorHandle = (status, info) => {
// errorHandle错误函数
switch (status) {
case 400:
console.log(“400–语义错误”);
break;
case 401:
console.log(“401–服务器认证失败”);
break;
case 403:
console.log(“403–服务器拒绝访问”);
break;
case 404:
console.log(“404–地址错误”);
break;
case 500:
console.log(“500–服务器遇到意外”);
break;
case 502:
console.log(“502–服务器无响应”);
break;
default:
console.log(info);
break;
}
};
const instance = axios.create({
// 网络请求的公共配置
timeout: 5000,
// 请求超时时间最长5秒
});
// 这里最常用的=>拦截器
// 发送数据之前
instance.interceptors.request.use(
(config) => {
// config=>发送数据成功的函数
if (config.method === “post”) {
config.data = querystring.stringify(config.data);
// 格式化post传递参数的格式
}
// config:包含着网络请求的所有信息
return config;
},
(error) => {
// error=>发送数据失败的函数
return Promise.reject(error);
// 把失败的信息返回出去
}
);
// 获取之前
instance.interceptors.response.use(
(response) => {
// response=>获取成功的函数
return response.status === 200
? Promise.resolve(response)
: Promise.reject(response);
// response.status=>状态码
},
(error) => {
// error=>获取数据失败的函数,错误的处理才是需要关注的
const { response } = error;
// response这里指错误的信息
errorHandle(response.status,response.info)
}
文末
我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。
首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。
更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。
前端面试题汇总
JavaScript
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
性能
linux
前端资料汇总
1206
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
