Vue.js笔试题解决业务中常见问题1

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{
  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;
 }

效果图如下：


5.什么是MVVM框架？

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

在vue.js中的MVVM模式：

vue.js是通过数据驱动的，vue.js实例化对象将dom和数据进行绑定，一旦绑定，dom和数据将保持同步，每当数据发生变化，dom也会随着变化；ViewModel是Vue.js的核心，它是Vue.js的一个实例。Vue.js会针对某个HTML元素进行实例化，这个HTML元素可以是body，也可以是某个css选择器所指代的元素。DOM Listeners和Data 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

组件级钩子有：beforeRouteEnter，beforeRouteUpdate，beforeRouteLeave：它们有以下参数：

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-model是vue.js的一条指令，实现数据的双向绑定

双向数据绑定的原理：

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

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

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

第一种方式，使用v-on；第二种方式，使用@语法糖

13.vuex是什么

vuex是vue.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:

 
 
{{arrDa[index]}}