前端知识学习06(Front end knowledge learning 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中选择一个,只设置其中一个值;

————————

1. Web Performance Optimization:

Reduce redrawing

High frequency event anti shake

Code compression

Code optimization CSS JS

Picture optimization

Webpack on demand introduction

Using CDN services

2. Vue how to customize instructions:

Component cache: keepalive

3. Vue modifier

< strong > form modifier < / strong >

  • Lazy: the value is assigned to value only when the cursor leaves the input box
  • Trim: remove the first space of input
  • Number: automatically convert user entered values to numeric types

< strong > Event modifier: < / strong >

  • Stop: stop event bubbling
  • Prevent: block event default behavior
  • Self: the handler is triggered when the current element itself
  • Once: the bound event is triggered only once
  • Capture: make the event trigger contain this element and start to trigger downward
  • Passive: element scrolling lazy loading
  • Native: listen for native events of the root element

< strong > mouse button modifier: < / strong >

  • Left click
  • right 右键点击
  • middle 中键点击

< strong > keyboard modifier: < / strong >

  • 键盘事件:keyup keydown keycode
  • 普通键:(enter、tab、delete、sapce、esc、up…)
  • 系统修饰符:(ctrl、alt、meta、shift…)

v-bind:

  • sync:duiprops双向绑定
  • Prop: set custom tag attributes to avoid exposing data and polluting HTML structure
  • Camel: change naming to hump naming

4. Vue custom instruction:

Global registration custom Directive: Vue The first parameter of directive is the name of the instruction

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()  // 页面加载完成之后自动让输入框获取到焦点的小功能
  }
})

Local registration custom instruction: set the directive attribute in the component options

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus() // 页面加载完成之后自动让输入框获取到焦点的小功能
    }
  }
}

5.vue中的key

  • Key is the unique ID given to each vnode. It is also an optimization strategy of diff. you can find the corresponding vnode more accurately and efficiently according to the key.
  • When using V-for, it is recommended to use key when Vue When JS is updating the list of rendered elements with V-for, it uses the “reuse in place” strategy by default. If the order of data items is changed, Vue will not move DOM elements to match the order of data items, but simply reuse each element here and ensure that it displays each element that has been rendered under a specific index.

6. Browser compatibility:

css:

*{margin:0;padding:0;}: Used to eliminate the default internal and external patches of different browsers

Class I: after the block element float, a horizontal margin is added, which is larger than the set value under IE6 (belonging to the bug of double floating)

Solution: add display: inline to the float tag and convert it into an inline element

Type II: inconsistent row heights of form elements

Solution: add float: left to the form element; Or vertical align: middle; (vertical alignment: centered)

Class III: for containers with small height (less than 10px), the height less than 10px is not recognized under IE6;

Solution: add overflow: hidden to the container;

Category 4: when img tags are nested in a tag, IMG will have a blue border in some browsers;

Solution: add border: 0 to img; Or border: none;

Category 5: Min height is not compatible under IE6

Solution:

1)min-height:value;

  _height:value;

2)min-height:value;

 height:auto!important;

 height:value;

Category 6: pictures have gaps by default

Solution:

1) Add left floating: left to img tag;

2) Add display: block to img tag;

Category 7: different default sizes of buttons

Solution:

1) Use a label to simulate buttons and add styles;

2) If the button is a background image, add a background image directly to the button;

Category 8: percentage bugs

Solution: the width of the parent element is 100%, the width of the child element is 50%, and the sum of the width of each element under IE6 exceeds 100%

Solution: add clear: right to the floating child element on the right;

Class 9: mouse pointer bug

Description: cursor: hand; Only IE browser recognizes it, and other browsers do not

Solution: cursor: pointer; Browsers above IE6 and other kernel browsers are recognized;

Category 10: transparency attribute

Solution: for IE browser: filter: alpha (opacity = value); (value range: 1-100)

Compatible with other browsers: opacity: value; (value range: 0 — 1)

Category 11: overlapping of upper and lower margin

Description: set margin bottom for the upper element and margin top for the lower element. The browser will only recognize large values;

Solution: select one of margin top and margin bottom, and set only one of them;