专项：Vuejs面试题集合
参考网络资源：https://segmentfault.com/a/1190000012315822
1、active-class是哪个组件的属性？
答：active-class是vue-router模块的router-link组件的属性。router-link支持用户在具有路由功能的应用中导航，默认渲染成带有正确链接的<a>标签。active-class设置链接在激活时使用的CSS类名，默认值router-link-active
2、嵌套路由怎么定义？
实际应用界面，是由多层嵌套的组件组合而成。比如“首页”组件中还嵌套着“登录”“注册”组件：
<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，这就是嵌套路由。
3、怎么定义vue-router的动态路由？怎么获取传过来的动态参数？
在定义路由时，在path属性的值里使用动态路径参数，以冒号开头，如：
{
path : /user / :id,
component: User
}
当匹配到/user下的任意路由时，参数值会被设置到this.$route.params下，获取动态参数可以通过$route.params.id实现：
const user = {
template: '<div>user{{$route.params.id}}</div>'
}
4、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}
}
5、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; }
6、mint-ui是什么？怎么使用？
mint-ui是基于vue.js的移动端组件库，可以参考elementUI的引入及使用方式
7、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所绑定的属性；
8、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函数中给出错误提示
9、RESTful是什么？怎么使用？
RESTful是一个api标准，无状态请求（有状态指这一步的操作是在前面的操作的基础上，无状态指直接通过URI直接CRUD）。请求的路由地址是固定的。RESTful API客户端借助包含状态转移的表征数据，记录当前的应用状态以及对应可转移状态的方式。
REST：representational state transfer是web服务的一种架构风格，是一种思想。最终是为了提供一套统一的接口，在移动互联网时代，一套接口供web、Android、iOS共同调用，故传统前后端耦合在一起开发的模式就显得不够用了。
REST架构的主要原则：网络上的所有事物都被抽象为资源，每个资源都有一个唯一的URI，同一个资源有多种表现形式（xml、json），对资源的操作不会改变URI，所有操作都是无状态的。
使用：springmvc实现restful服务，原生态的支持了REST风格的架构设计，还有springboot。
10、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中操作，解决了组件之间共享同一状态（数据）的问题
11、MVVM框架是什么？与jquery的区别？哪些场景适合？
MVVM：model、view、viewModel，本质上是mvc的改进，viewModel在拿出model中数据的同时处理了展示内容涉及到的业务逻辑。
mvvm使用的是数据绑定的基础架构，低耦合（分离视图和模型），可重用，
