CSS篇
1、清除浮动?
1.使用after伪元素
2.使用双伪元素清除浮动
3.添加额外空标签并clear:both
4.给父级元素添加overflow:hidden,触发BFC
2、多个div并排显示
1.float:left
2.display:inline
3.flex布局
3、display:none和visibility:hidden的区别?
前者隐藏后的元素不占任何空间,后者隐藏后的元素空间依然保留。
visibility具有继承性,其子元素也会继承此属性,若设置visibility:visible,则子元素会显示
4、relative和absolute相对于什么定位?
相对定位:相对于其父级元素(无论父级元素此时为何种定位方式)进行定位,准确地说是相对于其父级元素所剩余的未被占用的空间进行定位(在父元素由多个相对定位的子元素时可以看出),且会占用该元素在文档中初始的页面空间,即在使用top,bottom,left,right进行移动位置之后依旧不会改变其所占用空间的位置。可以使用z-index进行在z轴方向上的移动。
绝对定位:脱离文档流,不会占用页面空间。以最近的不是static定位的父级元素作为参考进行定位,如果其所有的父级元素都是static定位,那么此元素最终则是以当前窗口作为参考进行定位。可以使用top,bottom,left,right进行位置移动,亦可使用z-index在z轴上面进行移动。当元素为此定位时,如果该元素为内联元素,则会变为块级元素,即可以直接设置其宽和高的值;如果该元素为块级元素,则其宽度会由初始的100%变为auto。
5、css优先级?
!important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
6、px、em、rem的区别?
px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。em的值并不是固定的;em会继承父级元素的字体大小。
rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。
JS基础篇
1、数组升序排序?
var array=[1,80,4,33,21,55];
array.sort(function (x,y) {
return x-y;
});
console.log(array);
2、document load 与document ready的区别?
document load是当页面所有资源全部加载完成后(包括DOM文档树,css文件,js文件,图片资源等),执行一个函数
问题:如果图片资源较多,加载时间较长,onload后等待执行的函数需要等待较长时间,所以一些效果可能受到影响
document ready是当DOM文档树加载完成后执行一个函数 (不包含图片,css等)所以会比load较快执行
在原生的JS中不包括ready()这个方法,只有load方法就是onload事件
3、闭包的定义?什么时候用闭包?
闭包指的是:能够访问另一个函数作用域的变量的函数。清晰的讲:闭包就是一个函数,这个函数能够访问其他函数的作用域中的变量。
闭包经典使用场景一:通过循环给页面上多个dom节点绑定事件
闭包使用场景二:封装变量
闭包使用场景三:延续局部变量的寿命
4、写出三种强制类型转换和两种隐式类型转换
强制类型转换:String(),Boolean(),Number(),parseInt和parseFloat
隐式类型转换:== 、–、 ===
5、数组方法pop() push() unshift() shift()?
Push()尾部添加 pop()尾部删除
Unshift()头部添加 shift()头部删除
Vue篇
1、vue生命周期?
beforeCreate
创建之前,此时$el、data都获取不到
适用于:添加loading状态,初始化非响应式变量。
created
创建之后,数据观测时间初始化之后,可访问data、computed、watch、methods上的方法和数据但dom还未生成,$el、$ref仍然访问不到
适用于:结束loading,ajax异步数据的获取,初始化数据等。
beforeMount
数据挂载之前,此时已经能访问$el,但此时并未渲染到dom中。
mounted
挂载之后
适用于:已挂载完成的dom节点的获取,ajax请求等等。
beforeUpdate
相应数据更新前调用
适合于:更新之前访问现有的DOM,比如手动移除已添加的事件监听器。
updated
DOM 重新渲染和打补丁之后调用
要特别注意避免在这个钩子函数中操作数据以免陷入死循环 。
beforeDestroy
实例销毁之前,实例完全可用
适用于:实例销毁前一些判断销毁定时器、解绑全局事件、销毁插件对象等操作。
destroyed
实例销毁后调用,调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
2、data为什么是一个函数
如果data是一个函数的话,这样每复用一次组件,就会返回一份新的data,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。而单纯的写成对象形式,就使得所有组件实例共用了一份data,就会造成一个变了全都会变的结果。
所以说vue组件的data必须是函数。这都是因为js的特性带来的,跟vue本身设计无关。
3、父子组件之间传值?
1.子组件在props中创建一个属性,用来接收父组件传过来的值
2.父组件中注册子组件
3.在子组件标签中绑定子组件props中创建的属性并将值赋给该属性
4、路由怎么写?
1.下载vue-router模块
2.主入口文件main.js引入vue-router模块
3.main.js中全局注册VRooter路由,并且实例化路由.传入配置参数路由map
4.主文件中引入a,b,c三个组件,并且把想要切换显示的路由用<router-view>插入到想要显示它的区域。这样一个简单的vue路由功能就实现了。