笔试一天

一.请写出ajax的优点和缺点

优点：

1、局部刷新（ajax是一种局部的刷新，根据需要刷新指定区域的数据，避免了刷新重复数据，提高了用户体验）

2、’异步的请求（ajax可以选择通过异步的请求获取数据，并不影响其他接口的请求，不需要影响用户操作）

3、减少了冗余请求以及服务器压力（因为是按需请求的，所以不需要刷新的数据并不会请求，减少了请求次数）

缺点：

1、破坏了浏览器的回退功能（因为优点之一的局部刷新，所以通过ajax请求的刷新在浏览器的后退机制中是没记录的，无法通过回退来重现上一次操作的数据）

2、不利于搜素引擎的支持（ajax的数据是通过后台返回的，而对大部分爬虫都是不支持执行javascript进行ajax请求获取数据的，所以搜索引擎可能找不到关键字，不利于搜索到这个页面）

3、可能出现的空白

4、对于手机不是很支持.

二.v-if 和v-show的区别

区别1：

v-if ：可以根据表达式的值在DOM中生成或移除一个元素。（移除会彻底移除）

v-show:可以根据表达式的值来显示或者隐藏HTML元素。当v-show赋值为false时，元素被隐藏，此时查看代码时，该元素上会多一个内联样式style=“display:none”。

区别2：

v-if:支持<template>语法；

v-show:不支持<template>语法

三. vue-loader是什么？使用它的用途有哪些？

答：vue文件的一个加载器，将template/js/style转换成js模块。（核心的作用，就是提取）

用途：js可以写es6、style样式可以scss或less、template可以加jade等

四。vue的$set在什么时候使用

给data对象新增属性，并触发视图更新， this.$set(this.data,”key”,value)

ready: function(){

Vue.set(data,'sex', '男');

五。vue传参的三种方式

先有如下场景 点击当前页的某个按钮跳转到另外一个页面去，并将某个值带过去

<div class="examine" @click="insurance(2)">查看详情</div>

第一种方法 页面刷新数据不会丢失

methods：{

insurance(id) {

//直接调用$router.push 实现携带参数的跳转

this.$router.push({

path: `/particulars/${id}`,

})

}

需要对应路由配置如下：

{

path: '/particulars/:id',

name: 'particulars',

component: particulars

path中添加/:id来对应 $router.push 中path携带的参数。在子组件中可以使用来获取传递的参数值

this.$route.params.id

二种方法 页面刷新数据会丢失

params: {

id: id

注意这里不能使用:/id来传递参数了，因为组件中，已经使用params来携带参数了。

path: '/particulars',

第三种方法

使用path来匹配路由，然后通过query来传递参数

这种情况下 query传递的参数会显示在url后面?id=？

query: {

对应路由配置：

对应子组件: 这样来获取参数

this.$route.query.id

组件中 获取参数的时候是route.params 而不是router 这很重要

六。vue-router与location.href的用法区别

①vue-router使用pushState进行路由更新，静态跳转，页面不会重新加载；location.href会触发浏览器，页面重新加载一次

②vue-router，实现按需加载，减少dom操作

③vue-router是路由跳转或同一个页面跳转；location.href是不同页面间跳转；

④vue-router是异步加载this.$nextTick(()=>{获取url})；location.href是同步加载

this.$router.push({path:'/fillinformation',

query: {applicationNo: this.applicationNo,contractNo:this.contractNo}})

this.$route.query.applicationNo//页面跳转后获取携带参数applicationNo参数

//此用法参数会展示在跳转地址上---图一

name: 'clientdetail',

clientCode: clientCode,

clientType: clientType

this.$route.params.clientCode//页面跳转后获取携带参数clientCode

//此用法参数不会展示在跳转地址--图二

七。v-el的作用

提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标.可以是 CSS 选择器，也可以是一个 HTMLElement 实例

八。position跟display、overflow、float这些特性相互叠加后会怎么样？

display属性规定元素应该生成的框的类型；position属性规定元素的定位类型；float属性是一种布局方式，定义元素在哪个方向浮动。

类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。

九。::before 和 :after中双冒号和单冒号的区别

在 CSS 中伪类一直用 : 表示，如 :hover, :active 等

双冒号（：：）用于css3的伪元素

想让插入的内容出现在其它内容前，使用::before，否者，使用::after；

十。如何让网页的字体变得清晰，变细用CSS怎么做？

-webkit-font-smoothing：antialiased