最新公告
  • 欢迎您光临站壳网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • Vue.js以业务为中心的常见面试题

    前言

    希望可以通过这篇文章,能够给你得到帮助。(感谢一键三连)

     

     

    1.h5底部输入框被键盘遮挡问题

    如果你遇到h5页面这个问题,当输入框在最底部,点击软键盘后输入框会被遮挡,可以如下解决问题:

    var getHeight = $(document).height();

    $(window).resize(function(){
     if($(document).height() < getHeight) {
      $('#footer').css('position','static');
     }else {
      $('#footer').css('position','absolute');
     }
    });

     

     

    2.触屏即播放

    $('html').one('touchstart',function(){
     audio.play()
    })

    3.阻止旋转屏幕时自动调整字体大小

    html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}

    4.主流网站布局

    页面分为3个部分:页面的顶部header,底部footer,中间部分(侧栏side和主要部分main)。

    下面代码展示:

    <body>
     // 页面层容器
     <div id="container">
      // 页面头部
      <div id="header"></div>
      // 页面主体
      <div id="main">>
       // 侧边栏
       <div id="side">
       </div>
      </div>
      // 页面底部
      <div id="footer"></div>
     </div>
    </body>

    设计页面样式代码如下:

    <style type="text/css">
     body{
      font: 12px 微软雅黑;
      margin: 0px;
      text-align: center;
      background: #fff;
     }
     
     // 页面层容器
     #container {
      width: 100%;
     }
     #header {
      width: 800px;
      margin: 0 auto;
      height: 100px;
      background: #FFCC99;
     }
     #main {
      width: 800px;
      margin: 0 auto;
      height: 400px;
     }
     #side {
      float: left;
      width: 20em;
      background: red;
      padding: 15px 0;
     }
     #foot {
      width: 800px;
      margin: 0 auto;
      height: 50px;
      background: #00ffff;
     }
    </style>

    效果图如下:

     

     

    5.什么是MVVM框架?

    MVVM框架是一个Model-View-ViewModel框架,其中ViewModel连接模型Model和视图View

    vue.js中的MVVM模式:

    vue.js是通过数据驱动的,vue.js实例化对象将dom和数据进行绑定,一旦绑定,dom和数据将保持同步,每当数据发生变化,dom也会随着变化;ViewModelVue.js的核心,它是Vue.js的一个实例。Vue.js会针对某个HTML元素进行实例化,这个HTML元素可以是body,也可以是某个css选择器所指代的元素。DOM ListenersData Bindings是实现双向绑定的关键。DOM Listeners监听页面所有View层中的DOM元素,当发生变化时,Model层的数据随之变化。Data Bindings会监听Model层的数据,当数据发生变化时,View层的DOM元素也随之变化。

    6.active-class是哪个组件的属性

    它是vue-router模块的router-link组件的属性

    7.如何定义vue-router的动态路由

    在静态路由名称前面添加冒号,如设置id动态路由参数,为路由对象的path属性设置/:id

    8.如何获取传过来的动态参数

    在组件中,使用$router对象的params.id,如$route.params.id

    9.vue-router有哪几种导航的钩子

    有三种,第一种是全局导航钩子,router.beforeEach(to,from,next),作用是跳转前进行判断拦截;第二种是组件内的钩子;第三种是单独路由独享组件。

    导航钩子又叫导航守卫,又分为全局钩子,单个路由独享钩子和组件级钩子。

    全局钩子有beforeEach,beforeResolve,afterEach,单个路由独享钩子有:beforeEnter

    组件级钩子有:beforeRouteEnterbeforeRouteUpdatebeforeRouteLeave:它们有以下参数:

    to表示即将要进入的目标路由对象;from表示当前导航正要离开的路由;next表示一定要用这个函数才能到达下一个路由,如果不用就会遭到拦截。

    10.mint-ui是什么

    mint-ui它是基于Vue.js的前端组件库,用npm安装,然后通过import导入样式和JavaScript代码,vue.use(mintUi)用于实现全局引入,import {Toast} from 'mint-ui'用能于在单个组件局部引入

    11.v-model是什么

    v-modelvue.js的一条指令,实现数据的双向绑定

    双向数据绑定的原理:

    vue.js使用es5提供的属性特性功能,结合发布者-订阅者模式,通过Object.defineProperty()为各个属性定义get,set特性方法,在数据发送改变时给订阅者发布消息,触发相应的监听回调。

    过程:a,对需要观察的数据对象进行递归遍历,包含子属性对象的属性,设置setget特性方法;当给这个对象的某个值赋值时,会触发绑定的set特性方法,就能起到监听数据的变化。b,用compile解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,就会收到通知,并更新视图。c,Watcher订阅者是ObserverCompile之间通信的桥梁:在自身实例化时向属性订阅器dep里面添加自己;自身必须有一个update()方法;在dep.notice()发布通知时,能调用自身的update()方法,并触发Compile中绑定的回调函数。d,MVVM是数据绑定的入口,整合了ObserverCompileWathcher三者,通过Observer来监听自己的model数据变化,通过Compile来解析编译模板指令,最终利用Watcher来搭起ObserverCompile之间的通信桥梁,达到数据变化通知视图更新的效果,利用视图交互,变化更新数据model变更的双向绑定效果。

    12.vue.js中标签如何绑定事件

    第一种方式,使用v-on;第二种方式,使用@语法糖

    13.vuex是什么

    vuexvue.js框架实现的状态管理系统。使用vuex,要引入store,并注入vue.js组件中,在组件内部可以通过$store访问store对象;使用场景,在单页应用中,用于组件之间的通信,如音乐播放,登录状态管理,加入购物车等

    vuex可以说是一种开发模式或框架,它是对vue.js框架数据层面的扩展,通过状态集中管理驱动组件的变化,应用的状态集中放在store中,改变状态的方式是提交mutations,这是个同步的事务,异步的逻辑应该封装在action中。

    14.在vue中说说你知道的自定义指令

    自定义指令两种:一种全局自定义指令,vue.js对象提供了directive方法,可以用来自定义指令,directive方法接收两个参数,一个是指令名称,另一个是函数;第二种是局部自定义指令,通过组件的directives属性定义。

    15.vue.js中常用的4种指令

    v-if判断对象是否隐藏;v-for循环渲染;v-bind绑定一个属性;v-model实现数据双向绑定

    v-if循环中实现v-model数据的双向绑定:

    有时需要创建input,并用v-model实现数据的双向绑定。此时可以为v-model绑定数组的一个成语selected[$index],这样可以给不同的input绑定不同的v-model:

    <div v-for="(item,index) in arrDa">
     <input type="text" v-model="arrData[index]">
     <h1>{{arrDa[index]}}</h1>
    </div>

    16.vue-router是什么

    vue-routervue.js的路由插件,(常用router-linkrouter-view

    17.vue.js的生命周期

    共分8个阶段:

    1. beforeCreate

    在实例初始化之后,数据观测者data observerevent/watcher事件配置之前调用

    1. created

    在实例创建完成后立即调用,此时,实例已完成:观测者,属性和方法的运算,watch/event事件回调,挂载阶段还没开始,$el属性目前不可见。

    1. beforeMount

    在挂载开始之前调用,相关的render函数首次调用。

    1. mounted

    el被新创建的vm.$el替换,并且在挂载到实例上之后再调用该钩。如果root实例挂载了一个文档内元素,当调用mountedvm.$el也在文档内。

    1. beforeUpdate

    在数据更新时调用,发生在虚拟dom重新渲染和打补丁之前。

    1. updated

    由于数据更改导致的虚拟dom重新渲染和打补丁,在这之后会调用该钩子。

    1. beforeDestroyed

    在实例销毁之前调用,在这一步,实例仍然完全可用。

    1. destroyed

    vue.js实例销毁后调用,vue.js实例指示的所有东西都会解除绑定,所有的事件监听会被移除,所有的子实例也会被销毁。

    如果使用组件的keep-alive功能时,增加两个周期:

    • activatedkeep-alive组件激活时调用;
    • deactivatedkeep-alive组件停用时调用。

    <keep-alive>包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。<keep-alive>是一个抽象组件,它自身不会渲染一个DOM元素,也不会出现在父组件链中。

    当在<keep-alive>内切换组件时,它的activateddeactivated这两个生命周期钩子函数将会执行。

    <keep-alive>
     <component :is="view"></component>
    </keep-alive>

    增加一个周期钩子:ErrorCaptured表示当捕获一个来自子孙组件的错误时调用。

    18.描述封装vue组件的作用过程

    组件可以提升整个项目的开发效率,能够把页面抽象成多个相对独立的模块,解决了传统项目开发中效率低,难维护,复用性等问题。

    使用Vue.extend方法创建一个组件,使用Vue.component方法注册组件,子组件需要数据,可以在props中接收数据,而子组件修改好数据后,想要把数据传递给父组件,可以使用emit方法。

    使用自定义组件:

    components目录中新建组件文件,脚本一定要导出暴露的接口;导入需要用到的页面;将导入的组件注入vue.js的子组件的components属性中;在template的视图中使用自定义组件。

    创建组件

    <div id="app">
     <dada></dada>
    </div>
    <template id="demo">
     <div>
      <h1>{{msg}}</h1>
     </div>
    </template>
    <script type="text/javascript">
    // 定义组件类
    var dada = Vue.extend({
     template: '#demo',
     data:function() {
      return {
       msg: 'dadaqianduan.cn'
      }
     }
    })
    // 注册组件
    Vue.component('dada',dada);
    // 定义Vue实例化对象
    var app = new Vue({
     el: '#app',
     data: {}
    })
    </script>

    19.vue-loader是什么

    vue-loader它是解析.vue文件的一个加载器,将template/js/style转换成javascript模块;通过这个vue-loaderjavascript可以写EMAScript6语法,style样式可以应用scsslesstemplate可以添加jade语法。。。

    20.在vue.cli项目中的src目录说明

    1. assets文件夹存放静态资源;
    2. components存放组件;
    3. router定义路由相关的配置;
    4. view是视图;
    5. app.vue是一个应用主组件;
    6. main.js是入口文件。

    21.对vue.jstemplate编译的理解

    首先转化成AST抽象语法树,Abstract Syntax Tree,就是将源代码语法结构抽象成树状表现形式,然后通过render函数进行渲染,并返回VNodeVue.js的虚拟dom节点)。

    通过compile编译器把template编译成ASTcompilecreateCompiler的返回值,createCompiler用来创建编译器,compile还负责合并optionAST会经过generate-将AST转换成render function 字符串的过程-得到render函数,render的返回值是VNodeVNodeVue.js的虚拟DOM节点,里面有标签名,子节点,文本等。

    22.v-show指令和v-if指令的区别

    它们都是条件渲染指令,不同的是,v-show的值无论是truefalse元素都会存在于html页面中,而v-if的值为true时,元素才会存在于html页面中。

    v-show指令是通过修改元素的style属性值实现的。

    23.让css只在当前组件中起作用

    只需要在style标签中添加scoped属性,<style scoped></style>

    24.在vue.js中如何实现路由嵌套

    路由嵌套会将其他组件渲染到该组件内,而不是使整个页面跳转到router-view定义组件渲染的位置,要进行页面跳转,要将页面渲染到根组件内。首先实例化根组件,在根组件中定义组件渲染容器,然后,挂载路由,当切换路由时,将会切换整个页面。

    new Vue({
     el: '#dada',
     router: router,
     template: '<router-view></router-view>'
    })

    25.在vue.js中的ref属性有什么作用

    可以直接访问组件内部的一些元素,定义属性可以在组件内部通过this.$refs属性,,访问设置ref属性的元素,这是一个原生的DOM元素,要使用原生DOM API操作它们。

    26.在vue.js开发环境下调用接口,如何避免跨域

    config/index.js内对proxyTable项进行如下配置:

    proxyTable: {
     '/api': {
       target: 'http://xxx.com',
       changeOrign: true,
       pathRewrite: {
        '^/api'''
       }
      }
    }

    27.axios是什么

    axiosvue2.0中用来替换vue-resource.js插件的一个模块,是一个请求后台资源的模块

    使用npm install axios来安装axios

    import Vue from 'vue'
    import axios from 'axios';
    Vue.prototype.$http = axios;
    new Vue({
     el: 'dada',
     data: {
      mag: ''
     },
     template: '<h1>{{msg}}</h1>',
     created: function() {
      this.$http.get('data.json').then(res=>{
       this.msg = res.data.data
      })
     }
    })

    当调用axios.post('api/user')时,表示发送post异步请求。

    28.sass是什么

    sass是一种css预编译语言,用npm安装加载程序;在webpack.config.js中配置sass加载程序

    module: {
     // 加载程序
     loaders: {
      // 加载scss
      {
       test: /.scss$/,
       loader: 'vue-style-loader!css-loader!sass-loader'
      }
     }
    }

    29.什么情况下会产生片段实例

    模板包含多个顶级元素;模板只包含普通文本;模板只包含其他组件,模板只包含一个元素指令,如vue-router<router-view>;模板根节点有一个流程 控制指令,如v-ifv-for

    这些情况让实例有未知数量的顶级元素,模板将把它的DOM内容当作片段。片段实例仍然会正确地渲染内容。不过,模板没有一个根节点,它的$el指向一个锚节点,即一个空的文本节点。

    vue2.0中,组件的模板只允许有权只有一个根节点。

    30.  实现多个根据不同条件显示不同文字的方法

    <div id="app">
     <input type="text" v-model="inputValue">
     <h1>{{showValue}}</h1>
    </div>
    var app = new Vue({
     el: '#app',
     data: {
      inputValue: ''
     },
     computed: {
      showValue: function() {
       return this.inputValue || '请输入内容'
      }
     }
    })

    31.什么是数据的丢失

    如果在初始化时没有定义数据,之后更新的数据是无法触发页面渲染更新的,这部分数据是丢失的数据,这种现象叫数据的丢失。

    32.如何检测数据的变化

    • 通过直接索引设置元素:app.arr[0]=
    • 修改数据的长度:app.arr.length

    为了解决该问题,Vue.js扩展了观察数组,为它添加了一个$set()方法,用该方法修改的数组,能触发视图更新,检测数据变化。

    app.$set(app.arr, 5, 500);

    由于javascript特性的限制,vue.js不能检测到对象属性的添加或删除,因为Vue.js在初始化时将数组转化为getter/setter,所以属性必须在data对象中定义,才能在初始化时让vue.js转换它并让它响应。

    var data = {
     obj: {
      a: 1
     }
    }
    var app = new Vue({
     el: '#app',
     data: data
    })
    app.ojb.a = 10
    app.obj.b = 20 // 不是响应的
    data.obj.b = 20 // 不是响应的

    如果需要在实例创建之后添加属性并且让它能够响应,使用$set实例方法:

    app.$set(app.obj, 'b', 200)

    对于普通数据对象,可以全局方法Vue.set(object,key,value)

    Vue.set(data.obj, 'b', 250)

    33.vue.js文件中的样式覆盖不生效的问题

    style上加上scoped可以让样式私有化,只针对当前vue.js文件中的代码有效,不会对别的文件中的代码造成影响,有时,引入第三方UI,在vue.js文件中进行样式覆盖不生效,大概是因为style上的scoped导致的。

    可以将需要覆盖样式的这部分代码放到单独的css文件中,在main.js文件导入即可。

    34.如何解决数据层级结构太深

    在开发中,常出现异步获取数据的情况,有时数据层次太深,如:

    <text v-text="a.b.c.d"></text>

    可以使用vm.$set手动定义一层数据:vm.$set("dada", a.b.c.d)

    35.vue.js页面的闪烁

    vue.js有一个v-cloak指令,该指令一直保持在元素上,直到关联实例结束编译。当和css使用时,这个指令可以隐藏未编译的标签,直到实例编译结束:<div>不会显示,直到编译结束。

    [v-cloak] {
     display: none;
    }
    <div v-cloak>{{dada}}</div>

    RIPRO主题是一个优秀的主题,极致后台体验,无插件,集成会员系统
    找源码|源码教程|小程序|免费源码 » Vue.js以业务为中心的常见面试题

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    站壳网
    一个高级程序员模板开发平台
    • 79会员总数(位)
    • 60资源总数(个)
    • 0本周发布(个)
    • 0 今日发布(个)
    • 445稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情