首页 > 其他分享> 文章详细

前端知识学习06

2022-05-14 15:02:57 阅读：123 来源： 互联网

标签：知识 06 解决方案前端元素 value 添加浏览器 margin

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中选择一个，只设置其中一个值；

标签：知识,06,解决方案,前端,元素,value,添加,浏览器,margin
来源： https://www.cnblogs.com/ma1998/p/16270141.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

前端知识学习06

1.web性能优化：

2.vue怎么自定义指令：

3.vue修饰符

4.vue自定义指令：

5.vue中的key

6.浏览器兼容：