vue單頁模式需要注意的坑
1.class樣式衝突問題
方法一: 由於是單頁面應用。你在每個組件裡面寫入的樣式最終都會作用到全局裡面去,導致樣式衝突問題。而每個組件都必須提供一個包裹性質的元素,建議這個元素設置一個單獨的class用於包裹裡面的其他class從而避免樣式衝突
方法二: 在style標籤里加入scoped屬性,在修改公共組件的樣式會變得異常麻煩。
<style>
2.靜態資源倆種處理方式需要理解到位
這個在Vue官方文檔上有詳細的說明,但是我一開始沒有理解到位。走了一些個彎路。這裡對Vue官方的內容提煉一個重點:
1.public中的內容必須用絕對路徑引入 也就是以'/'開頭。否則將會被認為是一個模塊引用會被webpack處理。注意:項目如果不是放在根域名下需要如下處理:
<template>
<script>
export default {
data() {
return {
publicPath: process.env.BASE_URL
}
}
}
[圖片上傳中...(image.png-adcfe1-1556546279844-0)]
2.採用相對路徑引入,方式多樣,如:
1.
2.
3.
第一種方式用到的@代表的是別名的值
第二種方式用到的~其後的任何內容都會作為模塊請求被解析。官方說可以引用Node模塊中的資源,這個我還沒用過。等以後用過了有更深的見解會再來補充
第三種方式就是標準的相對路徑引入方式
注意千萬不要用下面這種相對路徑引入方式,因為他不會被webpack處理。而是直接採用的相對路徑尋找文件。而當下的目錄是會被處理的。這種方式一用一個錯
我的建議是儘可能採用相對路徑引入。減少@的使用。
項目中對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);
}
}
結語
感謝您的觀看,如有不足之處,歡迎批評指正。
對前端的技術,前端全棧技術感興趣的同學關注我的頭條號,並在後臺私信發送關鍵字:“前端”即可獲取免費的前端開發攻城師學習資料
知識體系已整理好,歡迎免費領取。還有視頻分享可以免費獲取。關注我,可以獲得沒有的經驗哦!
閱讀更多 前端進階開發者 的文章