前端知識學習06

2022-10-11 03:24:12 字數 1979 閱讀 1340

減少重繪

高頻事件防抖

**壓縮

**優化 css js

優化webpack按需引入

使用cdn服務

元件快取:keepalive

表單修飾符

事件修飾符:

滑鼠按鈕修飾符:

鍵盤修飾符:

v-bind:

全域性註冊自定義指令:vue.directive第乙個引數是指令的名字

// 註冊乙個全域性自定義指令 `v-focus`

vue.directive('focus',

})

區域性註冊自定義指令:在元件options的中設定directive屬性

directives: 

}}

key是給每乙個vnode的唯一id,也是diff的一種優化策略,可以根據key,更準確,更高效的找到對應的vnode。

在使用v-for的時候建議使用key,當 vue.js 用 v-for 正在更新已渲染過的元素列表時,它預設用「就地復用」策略。如果資料項的順序被改變,vue 將不會移動 dom 元素來匹配資料項的順序, 而是簡單復用此處每個元素,並且確保它在特定索引下顯示已被渲染過的每個元素。

css:

*:用來消除不同瀏覽器的預設的內外補丁

第一類:塊狀元素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中選擇乙個,只設定其中乙個值;

Web前端學習 06

今天寫頁面的時候,在定位側面的固定欄的時候遇到了一些小問題 我給它加了fixed定位 然後測試的時候發現當我縮放瀏覽器時這個div會往右上偏移 因為我只是單純的用了top xx px right xx px 之後審查jd頁面後發現 在乙個頁面中實現乙個固定導航欄的話,需要先將其固定在頁面中心位置 t...

前端學習 Day06

用標籤名作為選擇器,選中所有相應的元素 根據class的屬性來選擇元素,樣式定義為 classname 根據id名來選擇元素,樣式定義為 idname 選擇器 描述 attribute 選取帶有指定屬性的元素。12456 attribute value 選取帶有指定屬性和值的元素。6 attribu...

大前端筆記06

三種布局方式 文件流 浮動布局 層布局 定位 1 靜態定位 不定位 position static 靜態定位的元素按照文件流內的位置排列 2 相對定位 position relative 偏移參考元素 離絕對定位的元素最近的帶有position屬性的祖先元素,如果不存在就是相對body定位 會脫離文...