vue單頁模式需要注意的坑
1.class樣式衝突問題
方法一： 由於是單頁面應用。你在每個組件裏面寫入的樣式最終都會作用到全局裏面去，導致樣式衝突問題。而每個組件都必須提供一個包裹性質的元素，建議這個元素設置一個單獨的class用於包裹裏面的其他class從而避免樣式衝突
方法二： 在style標籤里加入scoped屬性，在修改公共組件的樣式會變得異常麻煩。
<style scoped></style>
2.靜態資源倆種處理方式需要理解到位
這個在Vue官方文檔上有詳細的說明，但是我一開始沒有理解到位。走了一些個彎路。這裏對Vue官方的內容提煉一個重點:
1.public中的內容必須用絕對路徑引入也就是以'/'開頭。否則將會被認爲是一個模塊引用會被webpack處理。注意:項目如果不是放在根域名下需要如下處理:
<template>
<img src=`${publicPath}MrXu.jpg`>
</template>
<script>
export default {
data() {
return {
publicPath: process.env.BASE_URL
}
}
}
</script>[圖片上傳中...(image.png-adcfe1-1556546279844-0)]
2.採用相對路徑引入，方式多樣，如:
1.<img src='@/MrXu.jpg'>
2.<img src='~MrXu.jpg'>
3.<img src='./MrXu.jpg'>
第一種方式用到的@代表的是別名的值
第二種方式用到的~其後的任何內容都會作爲模塊請求被解析。官方說可以引用Node模塊中的資源，這個我還沒用過。等以後用過了有更深的見解會再來補充
第三種方式就是標準的相對路徑引入方式
注意千萬不要用下面這種相對路徑引入方式，因爲他不會被webpack處理。而是直接採用的相對路徑尋找文件。而當下的目錄是會被處理的。這種方式一用一個錯
<img src='MrXu.jpg'>
我的建議是儘可能採用相對路徑引入。減少@的使用。
項目中對vue屬性的巧妙運用
1.使用computed監聽購物車內容的修改
購物車算是整個項目中比較複雜的地方之一了,刪除，添加，選中，取消選中。這些個操作都會對總金額的計算產生影響，所以我用computed監聽這些變化完成了總金額的計算以及全選按鈕的變化
computed: {
totalPrice() {
var total = 0;
this.shops.map(value => {
if (value.check) total += value.num * value.price;
});
return total;
},
isAllCheck() {
var newLength = this.shops.filter(value => {
return value.check;
}).length;
//在此我向大家推薦一個前端全棧開發交流圈：582735936 突破技術瓶頸，提升思維能力
return newLength === this.shops.length ? true : false;
}
}
2.使用filter完成了對訂單狀態的顯示
項目中訂單的狀態多大7種，剛開始在html裏面使用了三目運算符做的判斷顯示，顯示效果極差，而且維護困難。但是採用filter不僅漂亮的多,後期的維護以及擴展都一幕瞭然
filters: {
statusToText(value) {
let reValue;
switch (value) {
case 1:
reValue = "代付款";
break;
case 2:
reValue = "代發貨";
break;
... ...
}
return reValue;
}
}
針對這個功能另外一個實現方式，我覺得也不錯。在這裏分享一下：
filters: {
statusToText(value) {
let reValue=new Map()
reValue.set(1,'代付款')
reValue.set(2,'代發貨')
... ...
return reValue.get(value);
}
}
結語
感謝您的觀看，如有不足之處，歡迎批評指正。
獲取資料👈👈👈
本次給大家推薦一個免費的學習羣，裏面概括移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。
對web開發技術感興趣的同學，歡迎加入Q羣：👉👉👉582735936 👈👈👈，不管你是小白還是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時每天更新視頻資料。
最後，祝大家早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峯。