道一云视频一面
1）你是怎么系统前端内容的，学习路线是怎样的？（记得说自己学习方法的时候，不要忘记说实际实践。。。）
2）栅格布局的实现原理？
（这里真的忘记了，只知道用bootstrap内置的栅格系统，可能我简历上写了栅格系统，自己给自己挖坑了呜呜）
原理：通过定义容器大小，平分12份，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网络系统就是将容器平分为12份。
这里说到媒体查询，有可能就会被问到媒体查询：根据超小屏幕、小屏幕、中等屏幕、大屏幕来创建关键的分界点阈值。
3）在一行设置4或6个盒子怎么设置？（我觉得面试官的意思就是想问我在一行中均匀放置几个盒子有多少种方法）（我当时说了flex布局、还有浮动方法）
（1）float
使用浮动，让子盒子在父盒子里面排布，然后使用左浮动将其排列，用外边距控制他们之间的空隙。
这里面试官还问了我需要注意什么问题（我想了一两分钟。。。）
其实就是要注意父盒子清除浮动！
因为有时候我们不能设置父盒子的高度，因为不确定子盒子到底有多少个。但是如果不能设置父盒子的高度，那他的高度就是0，后面的标准流盒子就会出现在子盒子的覆盖下，所以我们要清除浮动。
清除浮动的方法：①给父盒子加一句overflow:hidden，这样不给父盒子设置高度，子盒子就能把父盒子撑开；②使用双伪元素，添加给父盒子添加一个类clearfix。（直接说第一个会比较好，不要说伪元素给自己挖坑了。。）
（2）inline-block
可以把div盒子的display属性改为inline-block，就可以使其水平显示在一行。（我记得后面有个面试官问了我，但是硬是想不到这点。。。最后他说出了span，我才恍然大悟）
（3）flex布局（这个面试官经常问，但是flex的那几个属性真的经常忘。答的不太全面。）
.father{
display:flex;
justify-content:flex-start;
flex-wrap:wrap;
}.son{
/*每个元素右间距设置为相同的*/
margin-right:10rpx;
/*计算每个元素的宽度：30rpx是前三个元素的间距（margin-right）*/
width:calc(（100%-30rpx）/4);
}
/*最后记得将最后一个元素的margin-right设置为0*/这里重新学习下flex布局：
容器默认有两根轴：水平的主轴和垂直的交叉轴
容器的属性：
①flex-direction：决定主轴的方向，即项目的排列方向
row：默认值，起点在左端
row-reverse：主轴水平方向，起点在右端
column：主轴为垂直方向，起点在上方
column-reverse：主轴为垂直方向，起点在下方
②flex-wrap:决定一条轴线排不下该如何换行
nowrap：默认值，不换行
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方
③justify-content：定义项目在主轴上的对齐方式
flex-start:默认值左对齐
flex-end:默认值右对齐
center：居中
space-between：两端对齐，项目之间间隔相等
space-arround:每个项目两侧的间隔相等。所以，项目之间的间隔比项目两边的间隔大一倍
④align-items:定义项目在交叉轴上如何对齐
flex-start：交叉轴的起点对齐
flex-end：交叉轴的终点对齐
center：交叉轴的中点对齐
baseline：项目的第一行文字的基线对齐
stretch：默认值，如果项目没有设置高度或者auto，将占满整个容器的高度
4）dom属性的变化，如何用js实现？
我答了几个获取dom元素的方法，然后面试官问我：具体一点说，如果一个dom元素的字体颜色发生改变，要怎么实现？
可以直接获取元素然后设置它的.style.color=“blue”
我回答的时候忘记了用什么原生的方式，然后就说了可以添加一个类。模棱两可想要糊弄过去，但是面试官继续追着问，如果不添加类的方式用什么实现，我想不出来。直接说忘了。然后面试官就说可以直接改变color值，提示的很明显了，但是我就是记不清了。然后面试官继续问，用js怎么改变文案，我说了innerHTML。。。。就是获取元素设置它的.innerHTML。
这里面试官可能还会问innerHTML和innerText的区别：innerHTML写入的内容可以解析成标签，而innerText写入的内容只能当做文本。
这里去查了一下，节点可以分为元素节点、属性节点、文本节点
元素节点操作：
（1）通过元素id获取相应的节点：document.getElementsById('')；
（2）通过元素的标签名来获取节点：document.getElementsByTagName('')；
（3）通过元素的类名来获取节点：document.getElementsByClassName('');
（4）通过元素的name属性来获取节点：document.getElementsByName("");
（5）获取元素的所有子节点：node.childNodes;
（6）创建元素节点：document.createElement("tagName");
（7）往父节点最后添加子节点：fatherNode.append(childNode);
（8）删除元素节点：fatherNode.removeChild(childNode);
（9）替换节点：fatherNode.replaceChild(newNode,oldNode);
注意：除了通过id选择节点的方式拿到的是一个确定的节点，其余的方式拿到的都是一个数组，那么获取里面对应的节点就需要用索引来取：
例如：var body = document.ElementsByTagName("body")[0]
属性节点操作：
（1）添加属性节点：node.setAttribute('attr',"attrValue");
（2）删除属性节点：div.removeAttribute("attr");
（3）修改属性节点：div.setAttribute("attr","new");
（4）获取属性节点：div.getAttribute("style");
文本节点操作：
（1）创建文本节点：var textNode = document.createTextNode("hello");
（2）获取文本节点：var textNode = div.childNodes[0];
5）vue组件通讯方式？
6）然后面试官问完上面那个问题，就直接问了如果用路由去传递信息。我问了什么意思。他说比如说路由跳转带参数，要怎么处理？（我说有挺多方式，其实当时不太知道要说啥。我答的很犹豫，说了什么用query、params）然后面试官继续问query和params的用法有什么区别？
vue路由跳转方式：
（1）router-link
①不带参数
<router-link :to="{name:'home'}">
<router-link :to="{path:'/home'}">
//name、path都行，建议用name
②带参数
<router-link :to="{name:'home',params:{id:1}}">
//params传参数（类似post）
//路由配置 path:"/home/:id"或者path："/home:id"
//不配置path，第一次可请求，刷新页面id会消失
//配置path，刷新页面id会保留
//html 取参 $route.params.id
//script 取参 this.$route.params.id
<router-link :to="{name:'home',query:{id:1}}">
//query传参数（类似get，URL后面会显示参数）
//路由可不配置
//html 取参 $route.query.id
//script 取参 this.$route.query.id
（2）this.$router.push()
①不带参数
this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})
//path和name路由跳转方式，都可以使用query传参
//params传参，path里面只能是name，不能是path，因为params只能用name来引入路由，如果用path，接收参数页面会是undefined
②query传参
this.$router.push({name:'home',query:{id:'1'}})
this.$router.push({path:'/home',query:{id:'1'}})
③params传参
this.$router.push({name:'home',params:{id:'1'}}) //只能用name
query和params的区别：
query：类似get，跳转之后页面url后面会拼接参数，类似?id=1，非重要性的可以这样传，密码之类的还是要用params，刷新页面id还在
params：类似post，跳转之后页面url后面不会拼接参数，但是刷新页面后id会消失
（3）this.$router.replace()（用法同上push）
（4）this.$router.go(n)
this.$router.go(1)
//在浏览器记录中向前进一步，等同于history.forward
this.$router.go(-1)
//向后退一步，等同于history.back()
this.$router.push和this.$router.replace的区别：
this.$router.push：跳转到指定url路径，并向history栈中添加一个记录，点击后退后会返回到上一个页面
this.$router.replace:跳转到指定url路径，但是history栈中不会有记录，点击返回后会跳转到上上个页面（就是直接替换到当前页面）
7）用v-for为什么需要带key值？如果不用，会怎么样？面试官继续追问，如果key值用index可以吗？（这个问题说了很久，但是我还是没说出原理。）
8）接着问项目，问了项目分为多少模块以及做项目过程中遇到的难点？（我说了挺久）
9）vue2和vue3的区别？
10）我问了部门的框架以及面试评价。（面试官反问我自我感觉面试得怎么样，然后我说原理性的东西回答的不大好，然后面试官说原理性的东西没答出来也没关系，但是我问面试官实习生有多少轮面试，他说一般有三轮。）