智一面gtalent-Vue 面试题真香系列

595 05-17

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也会随着变化；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'用能于在单个组件局部引入