前端面试相关问题解答

1、v-if和v-show的区别和相同点：

　　共同点：他们都是控制元素的显示和隐藏

　　区别：v-show是对display属性的控制，v-if是条件渲染（条件为真，渲染元素，条件假，销毁元素）

                  v-if可以与template一起使用，v-show不可以

                  v-if切换开销太大，v-show开销相对来说小一点

 

2、json格式：

　　json是一种数据传输格式 

　　　　1、普通的key value的组合 name:”xiaohu”;

　　　　2、json数组格式 {"lists":[5,6,7,8]}

　　　　3、json嵌套：json嵌套 json对象中包括json数组，json数组也可以包括json对象

       var jsonObj =（举例json嵌套）

{

"total": 3,

"rows": [

{

"title": "树莓派学习笔记——索引博文",

"url": "http://blog.csdn.net/xukai871105/article/details/23115627"

},

{

"title": "树莓派学习笔记——GPIO功能学习",

"url": "http://blog.csdn.net/xukai871105/article/details/12684617"

},

 

 

3、css两种盒子模型：　

　　W3C盒子模型（标准盒模型）box-sizing:content-box（默认情况）

       IE盒模型（怪异盒模型）box-sizing:border-box

两个盒子模型的区别：IE盒模型的width（/height） = content+padding+border

                                   W3C盒子模型 width（/height） = content部分的宽度

 

 

 4、vue-router是什么，路由有几种模式？

　　vue-router是是Vue.js官方的路由插件，构建单页面应用，对于vue项目相当于只有一个主页面index.html，所以使用<a></a>标签是不起作用的，必须使用vue-router来进行管理。

vue-router切换是组件的切换。

　　SPA(single page application):单一页面应用程序，只有一个完整的页面；它在加载页面时，不会加载整个页面，而是只更新某个指定的容器中内容。单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面

 

路由的模式有两种：

　　1、Hash模式

　　　　　　hash模式的工作原理是hashchange事件，可以在window监听hash的变化。我们在url后面随便添加一个#xx触发这个事件（http://www.abc.com/#/hello）。

　　　　　　hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。但是这种路由模式比较丑

　　2、History模式

URL 就像正常的 url，例如 http://www.yongcun.wang/tclass 需要后台配置支持

 

5、Dom事件流的几个阶段

　　DOM把整个页面映射为一个多层节点结果，开发人员可借助DOM提供的API，轻松地删除、添加、替换或修改任何节点。

分为三个阶段：

　　事件捕获阶段：事件从根节点流向目标节点，途中流经各个DOM节点，在各个节点上触发捕获事件，直到达到目标节点。

　　处于目标阶段：事件到达目标节点时，就到了目标阶段，事件在目标节点上被触发

　　事件冒泡阶段：事件在目标节点上触发后，不会终止，一层层向上冒，回溯到根节点

 6、axios是什么？如何使用？

axios是请求后台资源模块。

使用方式：安装axios模块，在index.js文件中引入axios，通过post或者get请求获取数据

举例一个get方式的

// 第一种方式  将参数直接写在url中
axios.get('/getMainInfo?id=123')
.then((res) => {
  console.log(res)
})
.catch((err) => {
  console.log(err)
})
// 第二种方式  将参数直接写在params中
axios.get('/getMainInfo', {
  params: {
    id: 123
  }
})
.then((res) => {
  console.log(res)
})
.catch((err) => {
  console.log(err)
})