打包后css泳秀、js和img路徑錯(cuò)誤
利用vuex-persistedstate插件實(shí)現(xiàn)vuex的數(shù)據(jù)持久化
Vuex持久化插件-解決刷新數(shù)據(jù)消失的問(wèn)題
將后臺(tái)傳過(guò)來(lái)的 json 數(shù)組里面的 name 換成 text
this.columns = JSON.parse(JSON.stringify(res.data.data.data).replace(/r_name/g,'text'))
// res.data.data.data 是需要替換的對(duì)象數(shù)組
// r_name 是替換前的
// text 是替換后的
點(diǎn)擊選擇器禁止鍵盤(pán)彈出
forbidKeyboard(){
document.activeElement.blur();
},
position:fixed;在android下無(wú)效怎么處理栋猖？
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
怎么讓Chrome支持小于12px 的文字？
p{font-size:10px;-webkit-transform:scale(0.8);}
什么是響應(yīng)式設(shè)計(jì)严肪？響應(yīng)式設(shè)計(jì)的基本原理是什么？如何兼容低版本的IE缆瓣？
響應(yīng)式網(wǎng)站設(shè)計(jì)(Responsive Web design)是一個(gè)網(wǎng)站能夠兼容多個(gè)終端烟瞧，而不是為每一個(gè)終端做一個(gè)特定的版本。
基本原理是通過(guò)媒體查詢(xún)檢測(cè)不同的設(shè)備屏幕尺寸做處理悠鞍。
頁(yè)面頭部必須有meta聲明的viewport对室。
<meta name=’viewport’ content=”width=device-width, initial-scale=1. maximum-scale=1,user-scalable=no”>
1px border 問(wèn)題
對(duì)于老項(xiàng)目，有沒(méi)有什么辦法能兼容1px的尷尬問(wèn)題了咖祭，個(gè)人認(rèn)為偽類(lèi)+transform是比較完美的方法了掩宜。原理是把原先元素的 border 去掉，然后利用 :before 或者 :after 重做 border 么翰，并 transform 的 scale 縮小一半牺汤，原先的元素相對(duì)定位，新做的 border 絕對(duì)定位浩嫌。
單條border樣式設(shè)置：
.scale-1px{
position: relative;
border:none;
}
.scale-1px:after{
content: '';
position: absolute;
bottom: 0;
background: #000;
width: 100%;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
按需引入
圖片懶加載
如何給spa中一個(gè)單獨(dú)的組件設(shè)置背景色
給SPA的每個(gè)頁(yè)面加title
main.js
router.beforeEach((to,from,next)=>{
// 為頁(yè)面添加標(biāo)題
if (to.meta.title) {
document.title = to.meta.title
}
next()
})
router.js 中給每個(gè)路由下添加一個(gè)meta 對(duì)象檐迟，內(nèi)部加入 title补胚。
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
function loadView(view) {
return () => import(/* webpackChunkName: "view-[request]" */ `@/components/${view}.vue`)
}
export default new Router({
mode: 'history',
base: 'view',
routes: [
{
path: '/',
name: 'HelloWorld',
component: loadView('HelloWorld'),
meta:{
index:2,
auth:true,
title:'用戶(hù)中心'
}
},
{
path: '/addCarInfo',
name: 'AddCarInfo',
component: loadView('AddCarInfo'),
meta:{
index:3,
auth:true,
title:'綁定車(chē)輛信息'
}
},
]
})
class 內(nèi)寫(xiě)三元運(yùn)算符
<li :class="['carnum', item.plate_number.length == 8 ? 'carNumBgBlueGreen' : 'carNumBgBlue']">
<div>{{item.plate_number}}</div>
</li>
// carnum是無(wú)需判斷，直接作用在 li 上面
// carNumBgBlueGreen 和 carNumBgBlue 直接使用 style 中的類(lèi)名
替換對(duì)象數(shù)組內(nèi)的鍵值key
columns = JSON.parse(JSON.stringify(res.data.data.data).replace(/r_name/g,'text'))
// res.data.data.data是被替換的對(duì)象追迟，把 name 換成 text
對(duì)象數(shù)組查重方法
unique(arr){
let unique = {};
arr.forEach(function(item){
unique[JSON.stringify(item)]=item;//鍵名不會(huì)重復(fù)
})
arr = Object.keys(unique).map(function(u){
//Object.keys()返回對(duì)象的所有鍵值組成的數(shù)組溶其，map方法是一個(gè)遍歷方法，
//返回遍歷結(jié)果組成的數(shù)組.將unique對(duì)象的鍵名還原成對(duì)象數(shù)組
return JSON.parse(u);
})
return arr;
}
Vue 路由的兩種傳參方式
路由嵌套怔匣，子路由傳參
watch 的初始立即執(zhí)行
觀(guān)察和響應(yīng) Vue 實(shí)例上的數(shù)據(jù)變動(dòng)握联。類(lèi)似于某些數(shù)據(jù)的監(jiān)聽(tīng)回調(diào) ，每當(dāng)監(jiān)聽(tīng)的數(shù)據(jù)變化時(shí)都會(huì)執(zhí)行回調(diào)進(jìn)行后續(xù)操作每瞒。
但是當(dāng) watch 一個(gè)變量的時(shí)候金闽，初始化時(shí)并不會(huì)執(zhí)行，如下面的例子剿骨，你需要在 created 的時(shí)候手動(dòng)調(diào)用一次代芜。
created() {
this.getList();
},
watch: {
keyWord: 'getList',
}
上面這樣的做法可以使用，但很麻煩浓利，我們可以添加 immediate 屬性挤庇，這樣初始化的時(shí)候就會(huì)自動(dòng)觸發(fā)(不用再寫(xiě) created 去調(diào)用了)，然后上面的代碼就能簡(jiǎn)化為：
watch: {
keyWord: {
handler: 'getList',
immediate: true
}
}
watch 有三個(gè)參數(shù)
- handler：其值是一個(gè)回調(diào)函數(shù)贷掖。即監(jiān)聽(tīng)到變化時(shí)應(yīng)該執(zhí)行的函數(shù)
- deep：其值是 true 或 false嫡秕；確認(rèn)是否深入監(jiān)聽(tīng)。
- immediate：其值是 true 或 false苹威，確認(rèn)是否以當(dāng)前的初始值執(zhí)行 handler 的函數(shù)
監(jiān)聽(tīng)組件的生命周期
比如有父組件 Parent 和子組件 Child昆咽，如果父組件監(jiān)聽(tīng)到子組件掛載 mounted 就做一些邏輯處理，常規(guī)的寫(xiě)法可能如下：
// Parent.vue
<Child @mounted="doSomething"/>
// Child.vue
mounted() {
this.$emit("mounted");
}
此外牙甫，還有一種特別簡(jiǎn)單的方式掷酗，子組件不需要任何處理，只需要在父組件引用的時(shí)候通過(guò)@hook 來(lái)監(jiān)聽(tīng)即可窟哺，代碼如下：
<Child @hook:mounted="doSomething" />
<Child @hook:updated="doSomething" />
當(dāng)然這里不僅僅是可以監(jiān)聽(tīng) mounted泻轰，其它的生命周期事件，例如：created且轨，updated 等都可以浮声。
路由參數(shù)變化組件不更新
同一path的頁(yè)面跳轉(zhuǎn)時(shí)路由參數(shù)變化，但是組件沒(méi)有對(duì)應(yīng)的更新旋奢。
原因：主要是因?yàn)楂@取參數(shù)寫(xiě)在了created或者mounted路由鉤子函數(shù)中泳挥，路由參數(shù)變化的時(shí)候，這個(gè)生命周期不會(huì)重新執(zhí)行黄绩。
解決方案1：watch監(jiān)聽(tīng)路由
watch: {
// 方法1 //監(jiān)聽(tīng)路由是否變化
'$route' (to, from) {
if(to.query.id !== from.query.id){
this.id = to.query.id;
this.init();//重新加載數(shù)據(jù)
}
}
}
//方法 2 設(shè)置路徑變化時(shí)的處理函數(shù)
watch: {
'$route': {
handler: 'init',
immediate: true
}
}
解決方案2 ：為了實(shí)現(xiàn)這樣的效果可以給router-view添加一個(gè)不同的key羡洁，這樣即使是公用組件，只要url變化了爽丹，就一定會(huì)重新創(chuàng)建這個(gè)組件筑煮。
<router-view :key="$route.fullpath"></router-view>
不刷新頁(yè)面添加路由參數(shù)
this.$router.push({ query: {...this.$route.query, name: val.name} })
