前端面试题200道--整理中_200道前端面试题-CSDN博客

本文链接：https://blog.csdn.net/qq_58590962/article/details/120723874

文章目录

1. css的居中方式


margin：0 auto;

/*（适用于行内元素）*/
text-align：center;  

position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
transfrom: translate(-50%,-50%);

display: flex;

2. px,em,rem,%

一、px是固定的像素，一旦设置了就无法因为适应页面大小而改变。

二、em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。

三、em是相对于其父元素来设置字体大小的，一般都是以的“font-size”为基准。这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而Rem是相对于根元素，这样就意味着，我们只需要在根元素确定一个参考值。

3. display的值和作用

常用的有none、inline、block、inline-block。分别的意思是：

none：元素不会显示，而且改元素现实的空间也不会保留。但有另外一个 visibility: hidden，是保留元素的空间的。
inline：
display的默认属性。将元素显示为内联元素，元素前后没有换行符。我们知道内联元素是无法设置宽高的，所以一旦将元素的display 属性设为 inline，设置属性height和width是没有用的。此时影响它的高度一般是内部元素的高度（font-size）和padding。
block：将元素将显示为块级元素，元素前后会带有换行符。设置为block后，元素可以设置width和height了。元素独占一行。
inline-block：行内块元素。这个属性值融合了inline 和 block 的特性，即是它既是内联元素，又可以设置width和height。

4. 路由跳转的方式

// 1.router-link
1. 不带参数

<router-link :to="{name:'home'}">
<router-link :to="{path:'/home'}"> //name,path都行, 建议用name
// 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。



2.带参数

<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() (函数里面调用)
1. 不带参数

this.$router.push('/home')
this.$router.push({
   name:'home'})
this.$router.push({
   path:'/home'})



2. query传参

this.$router.push({
   name:'home',query: {
   id:'1'}})
this.$router.push({
   path:'/home',query: {
   id:'1'}})

// html 取参 $route.query.id
// script 取参 this.$route.query.id



3. params传参

this.$router.push({
   name:'home',params: {
   id:'1'}}) // 只能用 name

// 路由配置 path: "/home/:id" 或者 path: "/home:id" ,
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留

// html 取参 $route.params.id
// script 取参 this.$route.params.id



4. 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(n)
向前或者向后跳转n个页面，n可为正整数或负整数
ps : 区别

this.$router.push
跳转到指定url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面
this.$router.replace
跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面 (就是直接替换了当前页面)

this.$router.go(n)
向前或者向后跳转n个页面，n可为正整数或负整数

5.vue生命周期的理解

beforeCreate：在实例初始化之后，**数据观测(data observer) ** 和 event/watcher事件配置之前被调用，注意是之前，此时data、watcher、methods统统没有。
这个时候的vue实例还什么都没有，但是$route对象是存在的，可以根据路由信息进行重定向之类的操作。
created：在实例已经创建完成之后被调用。在这一步，实例已完成以下配置：数据观测(data observer) ，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始， $e l 属性目前不可见。此时 t h i s .$ data 可以访问，watcher、events、methods也出现了，若根据后台接口动态改变data和methods的场景下，可以使用。
beforeMount：在挂载开始之前被调用，相关的 render 函数首次被调用。但是render正在执行中，此时DOM还是无法操作的。我打印了此时的vue实例对象，相比于created生命周期，此时只是多了一个$el的属性，然而其值为undefined，
页面渲染时所需要的数据，应尽量在这之前完成赋值。
mounted：在挂载之后被调用。在这一步创建vm.$el并替换el，并挂载到实例上。
此时元素已经渲染完成了，依赖于DOM的代码就放在这里吧~比如监听DOM事件。
beforeUpdate： $v m . d a t a 更新之后，虚拟 D O M 重新渲染和打补丁之前被调用。你可以在这个钩子中进一步地修改$ vm.data，这不会触发附加的重渲染过程。
updated：虚拟DOM重新渲染和打补丁之后被调用。
当这个钩子被调用时，组件DOM的data已经更新，所以你现在可以执行依赖于DOM的操作。但是不要在此时修改data，否则会继续触发beforeUpdate、updated这两个生命周期，进入死循环！
beforeDestroy：实例被销毁之前调用。在这一步，实例仍然完全可用。