前端知识学习06
1.web性能优化：
减少重绘
高频事件防抖
代码压缩
代码优化 css js
图片优化
webpack按需引入
使用CDN服务
2.vue怎么自定义指令：
组件缓存：keepAlive
3.vue修饰符
表单修饰符
- lazy:光标离开输入框的时候才会将值赋给value
- trim:去除输入的首空格
- number:自动将用户输入值转化为数值类型
事件修饰符：
- stop:阻止事件冒泡
- prevent:阻止事件默认行为
- self:当前元素自身时触发处理函数
- once:绑定的事件只触发一次
- capture:使事件触发包含这个元素开始向下触发
- passive:元素滚动懒加载
- native:监听根元素的原生事件
鼠标按钮修饰符：
- left 左键点击
- right 右键点击
- middle 中键点击
键盘修饰符：
- 键盘事件：keyup keydown keycode
- 普通键：（enter、tab、delete、sapce、esc、up...）
- 系统修饰符：（ctrl、alt、meta、shift...）
v-bind:
- sync:duiprops双向绑定
- prop：设置自定义标签属性，避免暴露数据，污染html结构
- camel：将命名变为驼峰命名法
4.vue自定义指令：
全局注册自定义指令：Vue.directive第一个参数是指令的名字
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus() // 页面加载完成之后自动让输入框获取到焦点的小功能
}
})
局部注册自定义指令：在组件options的中设置directive属性
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus() // 页面加载完成之后自动让输入框获取到焦点的小功能
}
}
}
5.vue中的key
-
key是给每一个vnode的唯一id，也是diff的一种优化策略，可以根据key，更准确，更高效的找到对应的vnode。
-
在使用v-for的时候建议使用key，当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
6.浏览器兼容：
css:
*{margin:0;padding:0;}:用来消除不同浏览器的默认的内外补丁
第一类：块状元素float后，有添加了横向的margin，在IE6下比设置的值要大（属于双倍浮动的bug）
解决方案：给float标签添加display：inline，将其转换为行内元素
第二类：表单元素行高不一致
解决方案：给表单元素添加float：left（左浮动）；或者是vertical-align：middle；（垂直对齐方式：居中）
第三类：设置较小高度的容器（小于10px），在IE6下不识别小于10px的高度；
解决方案：给容器添加overflow：hidden；
第四类：当在a标签中嵌套img标签时，在某些浏览器中img会有蓝色边框；
解决方案：给img添加border：0；或者是border：none；
第五类：min-height在IE6下不兼容
解决方案：
1）min-height：value；
_height：value；
2）min-height：value；
height：auto！important；
height：value；
第六类：图片默认有间隙
解决方案：
1）给img标签添加左浮动float：left；
2）给img标签添加display：block；
第七类：按钮默认大小不一
解决方案：
1）用a标签来模拟按钮，添加样式；
2）如果按钮是一张背景图片，那么直接给按钮添加背景图；
第八类：百分比的bug
解决方案：父元素宽度为100%，子元素宽度各为50%，在IE6下各个元素宽度之和超过100%
解决方案：给右边浮动的子元素添加clear：right；
第九类：鼠标指针bug
描述：cursor：hand；只有ie浏览器识别，其他浏览器不识别
解决方案：cursor：pointer；IE6以上浏览器及其他内核浏览器都识别；
第十类：透明度属性
解决方案：针对IE浏览器：filter：alpha（opacity=value）；（取值范围1--100）
兼容其他浏览器：opacity：value；（取值范围0--1）
第十一类：上下margin的重叠问题
描述：给上边元素设置了margin-bottom，给下边元素设置了margin-top，浏览器只会识别较大值；
解决方案：margin-top和margin-bottom中选择一个，只设置其中一个值；
