說明，此題目本人自出，做過本人所在公司的前端面試題，在此共享給大家

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. 你對前端目前的發展有何看法，談談你自己的發展目標

本人編寫的一份前端vue面試題