作用：用于緩存組件 應用于保存表單控件對應的信息 提供的屬性 include 指明哪些被keepalive嵌套的組件有組件緩存功能 exclude 與上相反 使用步驟 1.給keepalive填寫屬性include/exclude 2.在路由規則中寫明對應的name屬性 3.在對應的單頁面組件export default 中寫上對應的name屬性 提供的生命周期鉤子 activated deactivated 路由異步加載 在路由規則中把組件引入寫于對應的箭頭函數中 { path: '/', name: 'index', component: () => import(/* webpackChunkName: "index" */ '@/pages/index'), meta: {} } 同一頁面父子組件的生命周期執行順序 父created-》子created-》子mounted-》父mounted h5有新建的指令用于快速創建頁面 "tep": "node static/js/template", 用法 npm run tep “文件名” 實現效果 自動生成page文件夾的基本結構 git合并沖突 git在每一次修改文件都有對應的字串來記錄所以的信息，如果在開發同一份分支下更改同一份的文件的同一個位置，在分支合并下會出現修改信息的合并，但是修改信息不知道以那一條修改信息為準，因為他們改的是同一個位置的數據，這個時候我們可以抉擇以A為準還是以B為準，執行的方法就是刪掉重復的代碼然后push（當一個代碼在遠程一個在本地，通常的做法就是pull==>刪除代碼==>push） 路由傳遞參數params和query query的傳值在刷新完頁面后依舊存在 params的傳值如果在to中來進行傳遞，刷新頁面數據會依然存在，但是如果在router。push中來傳遞就會消失 scoped scoped是用來處理單頁面的樣式疊加情況，非單頁面無需考慮 瀏覽器提供的打斷點新工具debugger async和await async是異步的含義，async一般是添加在一個函數的聲明前，await添加在函數的邏輯前，如果async函數被調用，await之前的邏輯是同步的，但是await之后的邏輯就是異步的，它會等await中的同步邏輯執行完再執行await往下的邏輯（總結：await相當于promise實例，都是同步的，await下一行的邏輯相當于promise實例調用的方法then，是異步的） https://tinypng.com/ 如果圖片太大，這個圖片可以用來壓縮圖片 在h5代碼中，native文件內有不同平臺的環境判斷js文件 如何把img的路徑通過data關聯到src屬性 通過import來導入圖片就可以 圖片路徑后添加版本號 經常改動的圖片為了解決緩存帶來的圖片錯亂問題 http協議緩存機制 強緩存 瀏覽器第一次訪問服務器，服務器返回對應的響應頭，響應頭有屬性cache-control和expires，都是用來規定緩存的的時間，當瀏覽器再次發送請求則會判斷cache-control和expires這兩個屬性，如果沒問題則直接從緩存中獲取數據 總結：狀態碼：200，不訪問服務器 協商緩存 瀏覽器發送請求，核對上一次請求的響應屬性cache-control和expires，如果請求時間過期，則訪問服務器，進入服務器并不會立即獲得數據，它要進行判斷，判斷當前的數據是不是同緩存內的一樣，一樣則返回到客戶端讀取緩存（這里就是協商緩存），否則就重新獲取服務器數據 總結：狀態碼304，訪問服務器 console.log因為eslint的原因在終端報錯 在package.json中找到eslint的配置（"rules": { // 這一行代碼就是允許console.log 設置 "no-console": "off" }） vuex的輔助屬性mapState 用于遍歷vuex中的state屬性 這個屬性都是寫在計算屬性內的 需要 引入mapState（import {mapState} from 'vuex'） Demo： computed: { ...mapState (["count"]) }//這里mapState是一個函數，參數有兩種表現形式，一種是數組，一種是對象，這里的‘count’指的是state中的count，‘count’寫在這里表示要把state中的屬性遍歷出來，通過調用計算屬性{{count}}來獲得vuex中state的屬性‘count’的值 this.$set() / Vue.set() 不在data中的屬性，如果在data外添加新的屬性會出現data數據更改了，但是同步不到視圖層，或者有時候data中的數據嵌套太多層，出現data中的數據無法響應到視圖層，都可以用這個方法 this.$set中有三個參數--> target: 要更改的數據源（可以是一個對象或者數組） key 要更改的具體數據 （索引） value 重新賦的值 添加復制功能 /* 創建range對象 */ const range = document.createRange(); range.selectNode(element); // 設定range包含的節點對象 /* 窗口的selection對象，表示用戶選擇的文本 */ const selection = window.getSelection(); if (selection.rangeCount > 0) selection.removeAllRanges(); // 將已經包含的已選擇的對象清除掉 selection.addRange(range); // 將要復制的區域的range對象添加到selection對象中 document.execCommand('copy'); // 執行copy命令，copy用戶選擇的文本 總結： 1.這里的range就相當于剪切板， 2.我們要把剪切板通過selectNode方法，將其定位到對應的對應的節點中 3.range對象通過selectNode圈中哪個對象，就復制哪個對象的節點 （這里的select對象只是range的一個促發器） input標簽添加拍照功能 總結：accept="image/*;capture=camera" 直接調用相機 accept="image/*" 調用相機 圖片或者相冊 圖片的預覽問題 結構--》一個input標簽---》一個img標簽 如何獲取圖片的拓展名，和內存 通過input的onChange事件能監測到對應的選擇文件e.target.files[0] onChange的e.target對象中有對應的圖片文件，type屬性有對應的文件擴展名，fileSize有對應的文件內存大小 如何獲取圖片的尺寸 onChange中的e.target對象沒有文件對應的尺寸大小數據，通過window.URL.createURL（file）--》把文件轉化成url形式，新建image對象（new Image（））image.src=url-->如此，通過獲取這個image DOm元素就能訪問到這個圖片對應的尺寸 如何實現圖片預覽 1.通過onChange事件獲取對應的圖片文件 2.通過window.URL.createURL創建對應的文件url 3.把生成的url給img標簽的src屬性 利用form表單的請求實現導出效果 form表單提交相當于formData的請求，input標簽中的name值相當于formData的屬性，input的value值相當于formData的屬性值，通過form標簽的action屬性訪問對應的url，訪問成功后會默認的導出對應的響應數據---》（那么如何觸發這個機制呢，通過form標簽的dom元素的submit方法，或者設置按鈕 submit） 總結：文件之所以會導出跟用form表單發起請求沒有關系，這完全是因為接口返回了二進制的數據，瀏覽器在解讀二進制數據會默認的下載對應的二進制文件 實現圖片和文字合成新的圖片 運用canvas 注意：context.fillText如果y坐標設置為0時，會導致字體出現不在canvas標簽中，這是由于坐標關聯字體的關聯點是字體的左下為坐標關聯點 new image生成圖片對象，在image。src定義時，圖片的加載時異步的，需要在其下定義 image。onload事件 移動端測試環境調試按鈕vconsole 1.npm install vconsole 2.在main.js

import Vconsole from ‘vconsole’
const vConsole = new Vconsole()
Vue.use(vConsole)
v-lazyload
圖片懶加載屬性preload
preLoad:類型Number,默認1.3. 表示lazyload的元素距離頁面底部距離的百分比.計算值為(preload - 1).
圖片的預加載
所謂的預加載是在切換到對應頁面的跳轉按鈕的頁面上做文章
1.通過css來加載圖片
2.通過ajax請求來加載圖片
3.通過js的src屬性來加載圖片
install方法注冊插件
插件的生成
首先有一個單文件組件
其次在一個install函數中定義去注冊單文件組件
通過調用vue.use()來調用install方法
步驟三也就是為什么axios這個插件不用通過vue.use()來注冊
install方法的另一個妙用
能夠在install方法中去定義vue的屬性
再通過vue.use()來調用函數
如果不在install中去定義屬性，瀏覽器讀到定義屬性位置就無法繼續往下解析（報錯）
高德地圖引用（阿里巴巴）
1.
發送請求，獲取全局變量
key這個參數的值是每個對應的高德開發平臺用戶的身份
2.創建一個id為container盒子
3.var map = new window.AMap.Map(‘container’, {
resizeEnable: true, //是否監控地圖容器尺寸變化
zoom: 11, //初始化地圖層級
center: [116.397428, 39.90923] //初始化地圖中心點
})
//實時路況圖層
var trafficLayer = new window.AMap.TileLayer.Traffic({
zIndex: 10
})
map.add(trafficLayer) //添加圖層到地圖
}）
通過申明一個 Amap對象就可以引用對應的api了
作用域插槽
1.在子組件中寫入slot標簽
2.通過在slot標簽中自定義一個屬性（
:content=‘關聯的數據’）
3.在父組件中，通過在子組件的標簽中嵌套一個其他的標簽，在這個被嵌套的標簽定義屬性slot-scope=‘scope’，然后就可以通過scope訪問子組件中的數據來（scope.content–>查找到關聯的數據）
總結：作用域插槽的作用就是能夠訪問子組件的作用域
路由router.push 和router.go(-1)的區別
1.路由的跳轉會把對應的記錄記在棧空間中，如果用push跳轉頁面，就會在棧中一直生成新的記錄，如果使用go（-1）來跳轉頁面，這個方法會清空當前頁面的記錄
在正常開發中，一般同一個頁面再次跳轉我們一般很少用push方法，因為他會產生在棧中，如此我們的window.history就會有兩條這個頁面的信息，這樣照成我們在做導航條回退的時候，不能直接跳到我們希望的頁面
ios和android的兼容
input標簽在ios聚焦時會偏移整個html往上，失焦后html復原不了
方法：在input標簽離焦時，用scrollIntoView（true）來使頁面的大盒子置頂
input標簽的占位符在ios不能垂直居中
判斷設備類型，通過padding來微調
偽元素active
在ios中active是失效的
解決辦法：在對應的標簽中注冊ontouchstart=""
安卓正常
對象的合并Object.assign
Object.assign({a:1},{b:2})==={a:1,b:2}
注意：相同的屬性會由后面的對象屬性覆蓋前面的屬性
彈性布局flex和flex-grow的區別
flex:1
左右兩個盒子，右邊盒子用該屬性自適應，當右邊盒子壓縮文本溢出時左邊盒子會出現一起壓縮
flex-grow：1
左右兩個盒子，右邊盒子用該屬性自適應，當右邊盒子壓縮文本換行時，左邊盒子會出現一起壓縮
總結：flex：1相對于flex-grow：1更加當極限，所以正常開發中用flex：1更加合理
vue中的main.js
new Vue({
store,
router,
render: h => h(App)
}).KaTeX parse error: Expected 'EOF', got '#' at position 8: mount('#?app') 知識點：這里的…mount把文件掛載到對應的#app這個盒子中
假數據插件（mock-myself）

總結

以上是生活随笔為你收集整理的盲点的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。