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








  • 相关阅读:
    程序的链接
    Graphviz 画图的一些总结
    C表达式中的汇编指令
    epoll(2) 源码分析
    epoll(2) 使用及源码分析的引子
    eventfd(2) 结合 select(2) 源码分析
    poll(2) 源码分析
    select 源码分析
    kfifo
    程序的机器级表示:寻址方式、指令及栈的运行机制
  • 原文地址:https://www.cnblogs.com/blackdd/p/8668720.html
Copyright © 2020-2023  润新知