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中選擇一個，只設置其中一個值；