本人编写的一份前端vue面试题

Posted 2021-01-14 ye-hcj

说明，此题目本人自出，做过本人所在公司的前端面试题，在此共享给大家

1. 如何在vue组件中实现v-model的功能？(只需给出关键代码)

2. 简述你知道的生命周期函数和执行时机

3. 谈谈你对计算属性和侦听器的理解

4. 简写动态切换class的关键代码，假设给定类名bgblack，bgred

5. v-if和v-show有何区别？分别在什么场所中使用？

6. v-for指令绑定的key有什么要求？谈谈你对key的理解

7. data属性为何是一个函数？

8. 如何通过事件向父组件发送消息，请自己构思代码完成一个简易demo（提示：使用on和emit）

9. 请写出transition的过渡类名

10. 有如下router代码，你觉得parentView组件中的代码该如何写？试写之

{
    path: ‘/BusinessOperation‘,
    name: ‘BusinessOperation‘,
    meta: {
      icon: ‘ios-albums‘,
      title: ‘业务运行‘
    },
    component: Main,
    children: [
      {
        path: ‘MandatoryManagement‘,
        name: ‘MandatoryManagement‘,
        meta: {
          icon: ‘ios-navigate‘,
          title: ‘委托管理‘
        },
        component: parentView,
        children: [
          {
            path: ‘DeliverDetection‘,
            name: ‘DeliverDetection‘,
            meta: {
              icon: ‘ios-flask‘,
              title: ‘送样检测‘
            },
            component: () => import(‘@/MyComponets/BusinessOperation/MandatoryManagement/DeliverDetection‘)
          }
        ]
      }
    ]
}

11. 有如下vuex代码，请写mutation和action来改变count值，并简述两者区别

const store = new Vuex.Store({
  state: {
    count: 0
  }
})

12. 请罗列出你日常开发使用的ui插件

13. 假设有如下html代码，如何使#box，占满剩余高度，写出你的css代码

<div style="height: 100%;">
    <div style="height: 50px;"></div>
    <div id="box"></div>
</div>

14. 如何使文字垂直居中，不使用line-height，写出css代码（提示：使用flex）

15. 写出js数组map,filter,some,every的用法

16. 你对前端目前的发展有何看法，谈谈你自己的发展目标