参考网络资源: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使用的是数据绑定的基础架构,低耦合(分离视图和模型),可重用,