1. css 中上下左右居中
(1)子容器绝对定位,top:0,bottom:0,margin:auto
<style type="text/css"> html,body{ margin: 0; padding: 0; } .box { position: relative; /*这个可以去掉 看看效果哦,注意会有变化啊*/ 600px; /*宽*/ height: 400px; /*高*/ background-color: rgba(212,66,33,.86); margin: 0 auto; } .Absolute-Center { 160px; height: 80px; background-color: green; position: absolute; top: 0; bottom: 0; left: 0; right: 0; /*css溢出法*/ margin: auto; } </style>
(2) 子容器相对定位,top:50%,translateY(-50%)
(3) 子元素1:float, 子元素2:clear:both; floter元素的margin-bottom值 = content的height的值的负一半
2.什么是闭包
闭包就是能够读取其他函数内部变量的函数。
function f1(){ var n=999; function f2(){ alert(n); // 999 } }
f2 函数处于f1函数的内部,f2函数可以读取f1 函数的变量,f1函数不可以读取函数内部的变量,而闭包就是这个作用,让f1 读取他内部函数的变量
闭包的缺点,内存消耗大,影响性能
(3)localStorage、sessionStorage、Cookie的区别及用法
localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。
sessionStorage生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过sessionStorage存储的数据也就被清空了。
(4) v-if 与 v- show
v-if和v-show都是用来控制元素的渲染。v-if判断是否加载,可以减轻服务器的压力,在需要时加载,但有更高的切换开销;v-show调整DOM元素的CSS的dispaly属性,可以使客户端操作更加流畅,但有更高的初始渲染开销。如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。
(5) jquery 与 vue 的使用区别
jQuery是使用选择器($)选取DOM对象,对其进行赋值、取值、事件绑定等操作,其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象,而数据和界面是在一起的。比如需要获取label标签的内容:$("lable").val();
,它还是依赖DOM元素的值。
Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象,可以说数据和View是分离的,他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。
(6) 作用域链
根据在内部函数可以访问外部函数变量的这种机制,用链式查找决定哪些数据能被内部函数访问。
作用域链的最前端始终是当前执行的代码所在环境的变量对象(如果该环境是函数,则将其活动对象作为变量对象),下一个变量对象来自包含环境(包含当前还行环境的环境),下一个变量对象来自包含环境的包含环境,依次往上,直到全局执行环境的变量对象。全局执行环境的变量对象始终是作用域链中的最后一个对象。
(8)vue 的生命周期
总共分为8个阶段:
beforeCreate----创建前 组件实例更被创建,组件属性计算之前,数据对象data都为undefined,未初始化。
created----创建后 组件实例创建完成,属性已经绑定,数据对象data已存在,但dom未生成,$el未存在
beforeMount---挂载前 vue实例的$el和data都已初始化,挂载之前为虚拟的dom节点,data.message未替换
mounted-----挂载后 vue实例挂载完成,data.message成功渲染。
beforeUpdate----更新前 当data变化时,会触发beforeUpdate方法
updated----更新后 当data变化时,会触发updated方法
beforeDestory---销毁前 组件销毁之前调用
destoryed---销毁后 组件销毁之后调用,对data的改变不会再触发周期函数,vue实例已解除事件监听和dom绑定,但dom结构依然存在
(9) 怎么保留两位小数
(10)vue的虚拟dom
虚拟的DOM的核心思想是:对复杂的文档DOM结构,提供一种方便的工具,进行最小化地DOM操作。
用 JavaScript 对象表示 DOM 信息和结构,当状态变更的时候,重新渲染这个 JavaScript 的对象结构。当然这样做其实没什么卵用,因为真正的页面其实没有改变。
但是可以用新渲染的对象树去和旧的树进行对比,记录这两棵树差异。记录下来的不同就是我们需要对页面真正的 DOM 操作,然后把它们应用在真正的 DOM 树上,页面就变更了。这样就可以做到:视图的结构确实是整个全新渲染了,但是最后操作DOM的时候确实只变更有不同的地方。
这就是所谓的 Virtual DOM 算法。包括几个步骤:
用 JavaScript 对象结构表示 DOM 树的结构;然后用这个树构建一个真正的 DOM 树,插到文档当中
当状态变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较,记录两棵树差异
把2所记录的差异应用到步骤1所构建的真正的DOM树上,视图就更新了