1、页面元素的隐藏方式和各自特点?
display:none; 设置为display:none;的元素将不会再占用页面空间,其占用的空间会被其他元素所占有,从而会引起浏览器的重排和重汇。
visibility: hidden 这种做法虽然能够隐藏元素,但是该元素仍会占用页面空间,因此只会导致浏览器的重汇而不会引起重排。
opacity:0 设置元素透明度opacity属性为0,也可以隐藏页面元素。在呈现上与visibility:hidden;方式一样,同样会占据页面空间。
将width heihgt 设置为0 或者使用z-index将数值设置为最小,可以隐藏在其他元素下面
2、用过哪些盒模型,以及他们各自的区别?
IE盒子模型box-sizing:border-box;(怪异模式)
W3C标准盒子模型 box-sizing:content-box;(标准模式)默认模式
content-box:这是默认样式指定CSS标准。测量width和height属性只包括的内容,但不是border, margin, 或者 padding。
padding-box:width和height属性包括padding的大小,不包括border和margin
border-box:width和height属性包括padding和border,但不是margin。这是盒模型的文档时,Internet Explorer使用Quirks模式。
content-box不包含padding,border-box包含padding。所以如果你设置的大小是一样的,content-box看起来,会比border-box大
3、src和href的区别 ?
1、请求资源类型不同
(1) href是Hypertext Reference的缩写,表示超文本引用。用来建立当前元素和文档之间的链接。常用的有:link、a。
(2)在请求 src 资源时会将其指向的资源下载并应用到文档中,常用的有script,img 、iframe;
2、作用结果不同
(1)href 用于在当前文档和引用资源之间确立联系;
(2)src 用于替换当前内容;
3、 浏览器解析方式不同
(1)若在文档中添加href ,浏览器会识别该文档为 CSS 文件,就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式加载 CSS,而不是使用 @import 方式。
(2)当浏览器解析到src ,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等也如此,类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。
既然我们上面提到了link和@import导入css文件是不同的,那我们就顺便说说两者的区别,如果您已经知道,就可以不用往下看了哈
link和@import的区别
两者都是外部引用 CSS 的方式,但是存在一定的区别:
(1)link是XHTML标签,除了能够加载CSS,还可以定义RSS等其他事务;而@import属于CSS范畴,只可以加载CSS。
(2)link引用CSS时,在页面载入时同时加载;@import需要页面完全载入以后再加载。
(3)link是XHTML标签,无兼容问题;@import则是在CSS2.1提出的,低版本的浏览器不支持。
(4)link支持使用Javascript控制DOM改变样式;而@import不支持。
4、js 数据类型有几种?它们之间的区别是什么?
JS中有两种数据类型:
1.简单数据类型(也称基本数据类型): Undefined;Null;Boolean;Number和String。
2.引用数据类型(也称复杂数据类型),其中包括Object;Array;Function等等。
基本数据:
1.基本数据类型的值是不可变的,任何方法都无法改变一个基本类型的值
2.基本数据类型不可以添加属性和方法
3.基本数据类型的赋值是简单赋值,如果从一个变量向另一个变量赋值基本类型的值,会在变量对象上创建一个新值, 然后把该值复制到为新变量分配的位置上
4.基本数据类型的比较是值的比较
引用数据类型:
1.引用数据类型的特点和基本数据类型相反。
2.引用类型可以添加属性和方法
3.引用类型的赋值是对象引用
4.引用类型的比较是引用的比较
5、数据类型强制转化和隐式转化的分别怎么使用?
数值:
Number(参数) 把任何的类型转换为数值类型
parseInt(参数1,参数2) 将字符串转换为整数
parseFloat() 将字符串转换为浮点数
字符串:
String(参数),可以将任何的类型转换为字符串
toString(),调用的格式 对象.toString(), 作用是将对象以字符串的方式来表示
布尔类型:
Boolean() 可以将任何类型的值转换为布尔值
函数:
isNaN( ) 该函数会对参数进行隐式的Number()转换,如果转换不成功则返回true;
alert() 输出的内容隐式的转换为字符串
隐式转换:
在js中,当运算符在运算时,如果两边数据不统一,CPU就无法计算,这时我们编译器会自动将运算符两边数据做一个数据类型转换,转成一样的数据类型再计算 这种无需程序员手动转换,而由编译器自动转换的方式就称为隐式转换
6、说明原生ajax的实现步骤?
//1.创建ajax对象
try{
//IE8以下不兼容
var ajax = new XMLHttpRequest();
}catch(e){
//IE8以下的声明方法
var ajax = new ActiveXObjec(Microsoft.XMLHTTP);
}
//2.初始化
ajax.open('get','./ajax_get.php?a=b&c=d',true);
//参1 请求方式 get post
//参2 url
//参3 是否异步 true 异步 false同步
//3.发送请求
ajax.send();
//4.绑定状态改变事件,等待数据响应
ajax.onreadystatechange =function(){
//代表服务器成功相应数据了
if(ajax.readyState==4 && ajax.status ==200){
var mes = ajax.responseText;//获取服务器的相应数据
console.log(eval(ajax.response))//把json字符串数据转换成json对象
}
}
7、vue 有几个生命周期 以及各个生命周期的调用时机 ?
beforeCreate : 创建Vue实例前的时候执行,
created : 创建Vue实例完成后执行,
beforeMount : Vue实例开始渲染前执行,
mounted : Vue实例渲染完成后执行,
beforeUpdate : Vue实例修改前执行,
updated : Vue实例修改完成后执行,
beforeDestroy : Vue开始消亡前执行,
destroyed : Vue实例消亡后执行,
activated :组件激活时调用。该钩子在服务器端渲染期间不被调用。
deactivated : 组件停用时调用。该钩子在服务器端渲染期间不被调用。
errorCaptured : 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
8、使用vue中的v-for时,为什么要绑定 :key? 如果不绑定会有什么效果?
Vue的v-for不绑定key,默认行为和绑定key="index"是差不多的,官方没有默认这种行为的情况下,会导致所有列表DOM重新渲染。
key="index"这种行为无法最大化性能,比如在第一个元素插入新元素,会导致所有列表DOM重新渲染。绑定key后,发现绑定的key值的元素变化了,就重新渲染该元素,而不是全部元素都重新渲染,会提高性能。
性能主要是DOM渲染影响。key绑定id一类的唯一键好处就是 :
在列表中插入某个元素,不会像index那样导致后面的元素全部重新渲染,而是根据绑定id的元素是否变化渲染。
9、v-bind 和 v-model的作用和区别?
v-bind 缩写 :
动态地绑定一个或多个特性,或一个组件 prop 到表达式。
使用v-bind的是使用父组件的值(根据属性名),没有使用v-bind的是将标签里的数值当做字符串来使用。
v-model:
在表单控件或者组件上创建双向绑定。会根据输入变化
10、vue-router的作用是什么? 为什么不使用a标签?
Vue的创新之处在于,它利用虚拟DOM的概念和diff算法实现了对页面的"按需更新"
Vue-router很好地继承了这一点,重渲染是我们不希望看到的,因为无论跳转到哪个页面,只需要渲染一次就够了。组件帮助我们实现了这个愿望.
反观a标签,每次跳转都得重渲染一次,在一个浩大的项目里,这多么可怕!我们的"渲染"做了许多"无用功",而且消耗了大量弥足珍贵的DOM性能!