2021-3-26面试真题
css做三角形–CSS做三角形
思路：border属性是一个个三角形构成的，把一个box的width和height设置为0，border设置为较大的值
#out{
width: 0px;
height: 0px;
border-width: 100px;
border-style: solid;
border-color: red magenta blue yellow;
/* position: relative; */
}
效果
只需要把其他三个边框宽度设置为透明–transparent，即可实现三角形
#out{
width: 0px;
height: 0px;
border-width: 100px;
border-style: solid;
border-color: transparent transparent yellow;
/* position: relative; */
}
效果
如果实现一个带边框的三角形呢，思路是三角形的重叠，即一个大三角形里面装一个稍小的三角形
#out{
width: 0px;
height: 0px;
border-width: 100px;
border-style: solid;
border-color: transparent transparent blue ;
position: relative;
}
#in{
width: 0px;
height: 0px;
border-width: 0 90px 90px;
border-style: solid;
border-color: transparent transparent orange;
position: absolute;
top: 6px;
left: -90px;
}
效果
那么要 实现一个三角形箭头呢，思路是把里面的三角形继续往下移，再把里面三角形的颜色设置为白色(PS:白色不等于透明)
#out{
width: 0px;
height: 0px;
border-width: 100px;
border-style: solid;
border-color: transparent transparent blue ;
position: relative;
}
#in{
width: 0px;
height: 0px;
border-width: 0 90px 90px;
border-style: solid;
border-color: transparent transparent white;
position: absolute;
top: 15px;
left: -90px;
}
效果
若要绘制其他角度的三角形
#out{
width: 0px;
height: 0px;
border-width: 100px 100px 100px 0;
border-style: solid;
border-color: transparent transparent red;
position: relative;
}
1.形如rgb(255,255,255)到十六进制（FFFFFF）
2.大驼峰到—下划线TodoItem变成todo-item
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
function toSnakeCase(str){
//把字符串转换成一个数组
var arr = Array.from(str)
//循环这个数组，
for(i = 0;i<arr.length;i++){
//如果是大写转换成小写的
if(IsUpper(arr[i])){
let lcode = arr[i].toLowerCase()
arr[i] = lcode
if(i>0){
//在下标i处删除0个元素并且插入一个'-'
arr.splice(i,0,"-")
}
}
}
var last=''
for( j =0;j<arr.length;j++){
//字符串的拼接
last +=arr[j]
}
console.log(last)
}
//判断这个字母是不是大写的
function IsUpper(code){
return code === code.toUpperCase()
}
toSnakeCase("TodoItem")
</script>
</html>
最重要的是判断一个字母是不是大写 自定义了一个方法
function IsUpper(code){
return code === code.toUpperCase()
}
3.输入日期哪天到哪天返回一个数组 里面的元素是中间的那些天数 2019-03-12这样的看这个就够了
输入：开始时间：“2021-03-27”；结束时间：“2021-04-01”；思路是先把字符串转换成对应的日期，
通过getTime()方法判断两者之间的时间关系
<script type="text/javascript">
var startTime = "2021-03-27"
var endTime = "2021-04-01"
//把给定的日期字符串格式转换成对应的时间
function manageTime(str){
var timeArray = str.split('-')
//console.log(timeArray)
// var t= new Date()
// var sTime = t.setFullYear(timeArray[0],timeArray[1],timeArray[2])
//创建日期对象和设置时间有什么不同？---创建的对象可以用那些设置 获得日期的方法，设置时间就很单一????
var sTime = new Date(timeArray[0],timeArray[1],timeArray[2])
return sTime
}
var start = manageTime(startTime)
var end = manageTime(endTime)
//console.log(start.getFullYear())
var dateArr = []
while(start<end){
//console.log(55)
var y = start.getFullYear()
var m = start.getMonth().toString().length<2?m ="0"+ start.getMonth():start.getMonth()
var d = start.getDate().toString().length<2?m ="0"+ start.getDate():start.getDate()
//console.log(y+"-"+m+"-"+d)
dateArr.push(y+"-"+m+"-"+d)
start.setDate(start.getDate() + 1)
//console.log(start)
}
console.log(dateArr)
</script>
vuex
vue缺点和好处
mvvm
- 简述 MVVM
MVVM 是 Model-View-ViewModel 的缩写。MVVM 是一种设计思想。Model 层代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑；View 代表 UI 组件，它负责将数据模型转化成 UI 展现出来，ViewModel 是一个同步 View 和 Model 的对象。
在 MVVM 架构下，View 和 Model 之间并没有直接的联系，而是通过 ViewModel 进行交互，Model 和 ViewModel 之间的交互是双向的， 因此 View 数据的变化会同步到 Model 中，而 Model 数据的变化也会立即反应到 View 上。
ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。
作者：养乐多__
链接：https://www.jianshu.com/p/bcad6a5a6b9c
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
防抖节流
居中的方法
守卫
项目中做了什么
访问后台的方法自己封装过没有
vue组件传值
vue操作DOM
ES6
let const
箭头函数
解构赋值
…扩展运算符
Promise
语法同class类
2021-3-29线上面试
vue父子组件传值
vuex
介绍自己项目中的东西 做了什么事
路由守卫
冒泡
请求 响应包含了哪些重要字段
vue组件复用的例子
学校获得的奖励
自己的学习途径 看视频？
nodejs
cookie localstorage sessionstorage 说说这些东西
2021-3-31面试
第一家
第二家（笔试10道，说我不符合要求让走了）
1.一道css 题 判断背景色是什么颜色
<style type="text/css">
.100{
height: 10px;
background-color: green;
}
#200{
height: 10px;
background-color: red;
}
</style>
</head>
<body>
<div class="100" id="200" >good</div>
</body>
问背景色 是什么颜色？我答：显示颜色；红色 因为我觉得id选择器的优先级高于class ，但是实际上是不显色；因为 id和class不能用数字开头来命名。
2.行内元素有哪些？块级元素有哪些？
行内元素11个：a b span input i strong em select textarea label img button
块元素9个:div p h1-h6 ol ul dl li dt dd blockquote
3.cookie sessionstorage localstorage区别
详细阐述，都是作为浏览器缓存的，cookie存放数据大小限制在4kb，条数为20条，参与与服务器的通信，可以设置过期时间，在HTTP发送请求的时候作为响应头的一部分，优点：具有极高的扩展性和可用性，缺点是数量和存数据大小的限制，安全性问题，如果cookie被拦掉了，就会被盗取session信息，cookie具有路劲的概念，可以将其限制在某个路劲下，sessionstorage：大小为5M，不参与和服务器的通信，数据仅仅保存在页面存在的未关闭的这一段时间，具有方法clear()、getItem()、setItem()、removeItem()、key(index)localstorage;存数据量大5M，不参与和服务器的通信，同样拥有那几个方法，一直到永久有效，除非removeItem删除。
作用域不同：sessionstorage不在不同的窗口共享；local storage在所有同源窗口共享；cookie也是在所有同源窗口共享；
cookie包括名字 值 过期时间 路劲和域
4.vue生命周期函数 哪个阶段完成DOM渲染
11个：boforeCreate、created、beforeMount、mounted、beforeUpdate、updated、activated、deactivated、beforeDestroy、destroyed、errorCaptured；mounted后完成DOM渲染
5.vue双向绑定的原理，改变数组元素的一个值怎么改的？
vue双向绑定是通过数据劫持结合发布者-订阅者模式实现的。其核心是Obejict.defineProperty()方法。有3个参数（obj,pro,des）分别表示当前对象，当前对象的属性名，具体的操作，当obj.por时调用了他的get方法，当obj.pro="lisi"时调用了里面的set方法。
6.vue父子组件传值
父传子：子组件的props里接收；子传父 子组件通过this.
e
m
i
t
(
"
b
u
s
e
v
e
n
t
"
,
a
)
发
送
时
间
名
和
数
据
父
组
件
通
过
@
b
u
s
e
v
e
n
t
来
接
收
数
据
7.
v
u
e
的
emit("busevent",a)发送时间名和数据父组件通过@busevent来接收数据 7.vue的
emit("busevent",a)发送时间名和数据父组件通过@busevent来接收数据7.vue的nextTick是啥–nextTick
简单说：就是需要DOM更新后才能执行的函数，Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。简单来说，Vue 在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。
//改变数据
vm.message = 'changed'
//想要立即使用更新后的DOM。这样不行，因为设置message后DOM还没有更新
console.log(vm.$el.textContent) // 并不会得到'changed'
//这样可以，nextTick里面的代码会在DOM更新后执行
Vue.nextTick(function(){
console.log(vm.$el.textContent) //可以得到'changed'
})
showsou(){
this.showit = true
this.$nextTick(function () {
// DOM 更新了
document.getElementById("keywords").focus()
})
}
理解：nextTick()是将回调函数延迟在下一次dom更新数据后调用，即当数据更新了在DOM中渲染后自动执行该函数**。因为Vue中DOM更新是异步的**
<div class="app">
<div ref="msgDiv">{{msg}}</div>
<div v-if="msg1">Message got outside $nextTick: {{msg1}}</div>
<div v-if="msg2">Message got inside $nextTick: {{msg2}}</div>
<div v-if="msg3">Message got outside $nextTick: {{msg3}}</div>
<button @click="changeMsg">
Change the Message
</button>
</div>
--js
new Vue({
el: '.app',
data: {
msg: 'Hello Vue.',
msg1: '',
msg2: '',
msg3: ''
},
methods: {
changeMsg() {
this.msg = "Hello world."
this.msg1 = this.$refs.msgDiv.innerHTML
this.$nextTick(() => {
this.msg2 = this.$refs.msgDiv.innerHTML
})
this.msg3 = this.$refs.msgDiv.innerHTML
}
}
})
结果
点击前
点击后
如果想要操作一个DOM，比如获得DOM元素的高宽内容等，必须放在$nextTick()里，因为这个函数代表DOM更新后才会执行。
8.sass 绑定两个颜色 一个显示亮度 一个显示透明度
？？？？？？不懂什么意思。。。。。
9.1px 1rem 1vh 1vw 1em代表什么？
1px是像素单位，相对于屏幕分辨率而言
1rem相对根元素html，一般做法是给根元素字体设置一个大小（默认是16px），那么5rem就代表80px(5rem x 16)
1vh 1vw viewport视窗；1vh 代表占1%的屏幕高度，50vh表示高度是屏幕的50%
1em相对于父元素字体大小，width、height、margin、padding相对于本身的大小，意思是如果父元素字体是30px；那么10em表示300px；如果这个元素本身设置了字体大小是20px；那么10em表示的是200px.
10. vue的修饰符各代表什么？
事件修饰符
.stop–<a v-on:click.stop="doThis"></a>阻止单击事件继续传播
.prevent–<form v-on:submit.prevent="onSubmit"></form>提交事件不再重载页面
.once–<a v-on:click.once="doThis"></a>点击事件之会触发一次
.capture–<div v-on:click.capture="doThis">...</div>添加事件监听器时使用事件捕获模式，内部元素触发的事件先在此处理，然后才交由内部元素处理。
.self–<div v-on:click.self="doThat">...</div>只当在event.target是当前元素自身时触发处理函数，即事件不是从内部元素触发的。
.passive–<div v-on:scroll.passive="onScroll">...</div> 滚动事件的默认行为（滚动行为）将会立即触发，而不会等待onScroll完成，尤其能够提升移动端的性能。此外还有案件按键修饰符、系统修饰符等
2021-4-2面试
你觉得自己的优势在哪里？
jQuery请求到数据怎么渲染？
登录界面 管理员和普通用户 用路由实现 两个切换
computed和watch区别
路由守卫方面的
元素居中
jQuery的字符串拼接
vue双向绑定原理 2.0 和3.0
另一个面试问 增加功能怎么增加 他说开个插槽就行。
2021-4-7面试
上机做了一个网页，然后开始面试
响应式布局
分三步：1、页面的<head>里面有个<meta>标签。一般vscode都自己加上了 。这里面的代码 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">2、设计你的css。3、. 通过媒介查询来设置样式 Media Queries @media screen and (max-width: 980px) { #head { … } #content { … } #footer { … } }
小写怎么转大写–两种方式
toUpperCase()、toLocaleLowerCase()
字符串变成一个数组
split() 另外数组变成字符串 join()
数组排序
sort() 但有问题是 23 比 100大 因为默认排序顺序为按字母升序。解决办法是写一个比对函数
升序
var points = [40,100,1,5,25,10];
points.sort(function(a,b){return a-b});
输出结果--1,5,10,25,40,100
降序
var points = [40,100,1,5,25,10];
points.sort(function(a,b){return b-a});
输出结果--100,40,25,10,5,1
css动画–说出里面的属性
animation-name
animation-duration
animation-iterration-count:3 (infinite)
animation-direction --normal or reverse or alternate alternate-reverse
性能优化
第一次加载后以后加载变快是为什么？浏览器缓存的几种
变量提升 函数提升
在ES6之前 函数作用域就是没有块作用域一说。只有全局作用域和函数作用域。引擎在加载JS时分为两个步骤：第一步是读取JS代码，把变量声明和函数声明提升到全局作用域的顶端，即所谓的变量提升和函数提升。重点是只是提升声明而不会赋值。第二部：从上往下执行代码。函数提升优先变量提升，所以同名的函数和变量。函数在上面。
console.log(fs)
console.log(fs())
var fs = 9
function fs () {
var a
console.log(a)
a = 10
console.log(a)
}
结果是
解释：函数提升优先于变量提升。所以这里打印的fs是函数题 而不是 9 接着在console.log(fs())先执行fs()依次打印undefined 和 10 接着打印 console.log(fs())由于函数没有return 即没有返回值 。所以 打印结果undefined
如果
console.log(fs)
console.log(fs())
var fs = 9
function fs () {
var a
console.log(a)
a = 10
console.log(a)
return 90--有返回值
}
结果
苹果新的图片格式，优缺点
HR
离职原因
工作强度大不大 压力大不大 未来规划 公司几个前端
2021-4-8面试
这个面试很快扑街–
组件的继承
什么是节点
什么是dom
插槽是啥
一个组件封装后，怎么跟其他的区分开来
vue的component是什么组成的。script里面可以干嘛 数据放在哪里的
怎么找到一个节点
script为什么放在后面？放在前面会怎么样?
2021-4-13面试真题
微信支付功能 前端有个签名
地图功能
省市区 三级联动–官方。博客
这篇可以实现，上面的报错
针对vue项目里，通过Element-ui来实现这个功能
步骤：
1.安装 element-ui 和插件
npm i vue-area-linkage area-data
yarn add vue-area-linkage area-data
2.在main.js里依赖注入
import VueArealinkage from 'vue-area-linkage';
Vue.use(VueArealinkage);
3.在需要的.vue文件了
<template>
<div>
<div class="test">
<div class="area">
<area-select
type="all"
:placeholders="placeholders"
:level="2"
@change="gg"
v-model="selected"
:data="pcaa"
>
</area-select>
</div>
</div>
</div>
</template>
<script>
// 根据需要按需引入数据
import "vue-area-linkage/dist/index.css";
import { AreaSelect } from "vue-area-linkage";
import AreaData from "area-data";
import {pcaa} from "area-data";
export default {
component: {
AreaSelect,
},
data() {
return {
pcaa: pcaa,
placeholders: [" ", " ", " "],
selected: [],
};
},
methods: {
gg() {
console.log(this.selected);
},
},
};
</script>
最终效果
三级菜单
bootstrap 的版本 维护需要
跨域
vue跨域怎么处理参考
三种方法：
1.后台更改header
header(‘Access-Control-Allow-Origin:*’);//允许所有来源访问
header(‘Access-Control-Allow-Method:POST,GET’);//允许访问的方式
2.使用JQuery提供的jsonp (注：vue中引入jquery，自行百度)
methods: {
getData () {
var self = this
$.ajax({
url: ‘http://f.apiplus.cn/bj11x5.json’,
type: ‘GET’,
dataType: ‘JSONP’,
success: function (res) {
self.data = res.data.slice(0, 3)
self.opencode = res.data[0].opencode.split(’,’)
}
})
}
}
3.脚手架项目里
使用http-proxy-middleware 代理解决（项目使用vue-cli脚手架搭建）
例如请求的url:“http://f.apiplus.cn/bj11x5.json”
1、打开config/index.js,在proxyTable中添写如下代码：
proxyTable: {
'/api': { //使用"/api"来代替"http://f.apiplus.c"
target: 'http://f.apiplus.cn', //源地址
changeOrigin: true, //改变源
pathRewrite: {
'^/api': 'http://f.apiplus.cn' //路径重写
}
}
}
使用axios请求数据时直接使用“/api”：
getData () {
axios.get('/api/bj11x5.json', function (res) {
console.log(res)
})
通过这中方法去解决跨域，打包部署时还按这种方法会出问题。解决方法如下：
let serverUrl = '/api/' //本地调试时
// let serverUrl = 'http://f.apiplus.cn/' //打包部署上线时
export default {
dataUrl: serverUrl + 'bj11x5.json'
}
vue全家桶有哪些
vue + vuex + axios + vue-router + element-ui
vuex是啥 哪些数据用到了
es6
canvas
echarts
计算属性computed和侦听属性的区别watch
计算属性是依赖的值改变会重新执行函数，计算属性是取返回值作为最新结果，所以里面不能异步的返回结果。不能写异步逻辑。
侦听属性是侦听的值改变会重新执行函数，将一个值重新赋值作为最新结果，所以赋值的时候可以进行一些异步操作；watch函数适用于，当数据发生变化时，执行异步操作或较大开销操作的情况
小程序生命周期、
vue生命周期
和模型 怪异盒模型
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容
不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
前端还要验证token的真实性
webpack的配置
权限控制
jQuery熟练吗
小程序里做了哪些页面、
缓存的三大 cookie有效时间 local storage安全吗
当浏览器关闭(不是浏览器标签页，而是整个浏览器) 后，此cookie失效。到现在为止，所有的cookie都是单会话cookie，即浏览器关闭后这些cookie将会丢失；expiress设置过期时间
兼容性怎么做的 兼容ie几？
响应式布局 她提到弹性盒
简历我写的github问 熟练吗 我说用的是码云
扫一扫
253
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
