專項：Vuejs面試題集合

參考網絡資源：https://segmentfault.com/a/1190000012315822

 

一、active-class是哪一個組件的屬性？

答：active-class是vue-router模塊的router-link組件的屬性。router-link支持用戶在具備路由功能的應用中導航，默認渲染成帶有正確連接的<a>標籤。active-class設置連接在激活時使用的CSS類名，默認值router-link-active

二、嵌套路由怎麼定義？

實際應用界面，是由多層嵌套的組件組合而成。好比「首頁」組件中還嵌套着「登陸」「註冊」組件：

<template id="home">

<!-- 注意：組件只能有一個根元素，因此咱們包裝到這個div中 -->

<div>

<h2>首頁</h2>

<router-link to="/home/login">登陸</router-link>

<router-link to="/home/reg">註冊</router-link>

<!-- 路由匹配到的組件將渲染在這裏 -->

<router-view></router-view>

</div>

</template>

定義路由：

// 2. 定義路由

const routes = [

{ path: '/', redirect: '/home' },

{ path: '/home',

　　component: Home,

　　children:[

　　　　{ path: '/home/login', component: Login},

　　　　{ path: '/home/reg', component: Reg}

　　] },

{ path: '/news', component: News} ]

home路由配置了它的children，這就是嵌套路由。

三、怎麼定義vue-router的動態路由？怎麼獲取傳過來的動態參數？

在定義路由時，在path屬性的值裏使用動態路徑參數，以冒號開頭，如：

{

　　path : /user / :id,

　　component: User

}

當匹配到/user下的任意路由時，參數值會被設置到this.$route.params下，獲取動態參數能夠經過$route.params.id實現：

const user = {

　　template: '<div>user{{$route.params.id}}</div>'

}

四、vue-router有哪幾種導航鉤子？

導航鉤子主要用來攔截導航，讓它完成跳轉或取消

（1）全局導航鉤子：

const router = new VueRouter({...})   //定義路由

router.beforeEach((to,from,next) => {       //點擊導航前調用鉤子函數

    //...導航觸發時，全局的before鉤子按建立順序調用。鉤子是異步解析執行，此時導航在全部鉤子resolve完以前一直處於等待中

})

router.afterEach(route => {     //點擊導航後調用鉤子函數

　　//...

})

（2）單個路由獨享的鉤子：

const  router = new VueRouter({

　　routes:[

　　　　{

　　　　　　path: '',

　　　　　　component: a,

　　　　　　beforeEnter: (to.from,next) => {    //....  },

　　　　　　beforeEnter: (route) => {   //... }

 　　　　}

　　]

})

（3）組件內的鉤子：在組件定義中定義的鉤子函數

const foo = {

　　template: '...',

　　beforeRouteEnter (to,from,next) {    // 在渲染該組件的對應路由被確認前調用，不能獲取組件實例this，由於鉤子執行前，組件實例還沒建立  },

　　beforeRouteUpdate (to,from,next ) {  // 在當前路由改變但該組件被複用時調用。對於帶有動態參數的路徑/foo/:id，在/foo/1和/foo/2之間跳轉的時候，渲染相同組件則調動這個鉤子，可訪問this},

　　beforeRouteLeave (to,from,next ) { // 導航離開該組件的對應路由時調用，可訪問this}

}

 

五、scss是什麼？在vue.cli中的安裝使用步驟是？有哪幾大特性？

scss是CSS的預處理器，是CSS的開發工具

安裝步驟：使用npm下載三個對應依賴node模塊：

node-sass、sass-loader、css-loader

使用步驟：（1）在webpack-base.config.js配置文件中加一個擴展extension值：.scss

（2）在module-->rules裏面加多一個test、loader

（3）在組件使用sass的地方，組件的style標籤加上lang屬性

<style lang="scss" scoped="" type="text/css"></style>

特性：可使用變量$變量名：值、

能夠嵌套：li { font: { family: serif;  weight: bold;}}、轉換成li { font-family: serif; font-weight: bold; }

 

六、mint-ui是什麼？怎麼使用？

mint-ui是基於vue.js的移動端組件庫，能夠參考elementUI的引入及使用方式

 

七、v-model 是什麼？怎麼使用？如何實現雙向綁定？

v-model是vue的model層的data屬性，實現輸入值與數據域的雙向綁定；

在須要用戶輸入或者選擇值的時候，可以使用v-model，其值要與data數據域中的屬性值對應，這樣就能實現綁定；

雙向綁定的實現：

頁面顯示的語法糖：<input v-model="name" />，（語法糖的意思是僅供顯示）

實際上上面等同於：<input v-bind:value="name" v-on:input="name = $event.target.value">，簡寫即<input v-bind:value="name" v-on:input="name = arguments[0]">

故，要讓組件的v-model生效，它必須接受一個value屬性（用於v-bind綁定響應式數據），且在有新的value時觸發input事件並傳遞數據

另：vue對v-model實現的一個規則：使用了v-model的組件會自動監聽input事件並把這個input事件所攜帶的值傳遞給v-model所綁定的屬性； 

 

八、axios是什麼？怎麼使用？描述使用它實現登陸功能的流程？

axios是請求後臺資源的模塊，能夠理解爲前臺經過它獲取後臺數據，相似於ajax交互，可用npm install axios -s安裝依賴模塊

使用：在main.js入口文件中import進axios模塊，因爲它發送的是跨域，須要在main.js中聲明出axios的屬性withCredentials爲true：

import axios from 'axios'

axios.defaults.withCredentials = true

而後在api.js文件中就可使用get方式經過url獲取數據了：

export const method1 = params => {  
return axios.get(`url.htm`, {params: params})   //爲了區分出是前臺請求，能夠配置請求後綴爲htm
}
在這以前還可設置http response攔截器：axios.interceptors.response.use(response => { ... }, error => { ...} )
實現登陸功能的流程：登陸頁面點擊提交，調用api.js中的登陸方法，請求後臺數據響應，根據返回數據作出響應，登陸成功則在登陸方法的then函數中實現路由的跳轉，登陸失敗則在catch函數中給出錯誤提示

九、RESTful是什麼？怎麼使用？RESTful是一個api標準，無狀態請求（有狀態指這一步的操做是在前面的操做的基礎上，無狀態指直接經過URI直接CRUD）。請求的路由地址是固定的。RESTful API客戶端藉助包含狀態轉移的表徵數據，記錄當前的應用狀態以及對應可轉移狀態的方式。REST：representational state transfer是web服務的一種架構風格，是一種思想。最終是爲了提供一套統一的接口，在移動互聯網時代，一套接口供web、Android、iOS共同調用，故傳統先後端耦合在一塊兒開發的模式就顯得不夠用了。REST架構的主要原則：網絡上的全部事物都被抽象爲資源，每一個資源都有一個惟一的URI，同一個資源有多種表現形式（xml、json），對資源的操做不會改變URI，全部操做都是無狀態的。使用：springmvc實現restful服務，原生態的支持了REST風格的架構設計，還有springboot。十、vuex是什麼？怎麼使用？哪些功能場景使用它？vuex是vue框架中作狀態管理的（狀態即數據），主要使用其中的state、mutations在main.js中引入store，注入:const store = new Vuex.Store({state:{count:0   //數據源/變量源}， mutations:{add: state => state.count++  //至關於mutations中是存放操做數據源的方法的，可供組件頁面觸發}})在methods中：this.$store.commit('add') //觸發提交add方法使用場景：在大型單頁應用中，vue實例再也不本身計算數據，而是至關於將數據操做的這一部分抽取出來，放到vuex中操做，解決了組件之間共享同一狀態（數據）的問題十一、MVVM框架是什麼？與jquery的區別？哪些場景適合？MVVM：model、view、viewModel，本質上是mvc的改進，viewModel在拿出model中數據的同時處理了展現內容涉及到的業務邏輯。mvvm使用的是數據綁定的基礎架構，低耦合（分離視圖和模型），可重用，