摘要：案例品牌列表構建基本結構利用的樣式數(shù)據(jù)要雙向更新，所以要用到，同時在后面的中要進行初始化為添加按鈕綁定事件的中，綁定值為關鍵字刪除標簽綁定函數(shù)，傳入?yún)?shù)的時候，需要用括號事件修飾符，表示阻止默認事件實例對象新建一個實例函數(shù)中初始化需要雙向

構建基本結構

利用bootstrap的樣式

數(shù)據(jù)要雙向更新，所以要用到v-model，同時在后面的data中要進行初始化
為添加按鈕綁定add事件

table的tbody中，綁定id值為關鍵字
刪除a標簽綁定del函數(shù)，傳入?yún)?shù)的時候，需要用括號
.prevent事件修飾符，表示阻止默認事件

實例對象

新建一個實例函數(shù)
data中初始化需要雙向更新的數(shù)據(jù)
list中放的是假數(shù)據(jù)

methods中放的是函數(shù)

添加函數(shù)，定義一個對象，對象中有id，name，ctime三個屬性
將這個car對象添加到list中
添加結束之后，清空文本框

findIndex返回符合條件的第一個索引，如果傳過來的id值和這一項的id值相等，就返回此時的索引
splice從這個索引開始截取，截取一個元素

搜索函數(shù)，可以用some方法，找到符合條件的項會立即停止操作；可以用forEach的方法遍歷這個數(shù)組，如果關鍵詞在在這一項的name中存在，也就是item.name.indexOf(keywords)!=-1，就證明這一項是篩選出來的項，將這一項重新渲染到頁面中，如果是空字符串，indexOf的值是0；可以用jQuery自帶的:contain方法
下面的用法是filter，是篩選器
include是ES6中提供的新方法，表示如果列表中有這個關鍵字就返回這個項

回車事件

輸完name之后，直接敲回車就將內容添加到列表中
綁定keyup事件
按鍵碼值都是可用的

碼值麻煩不容易記憶，可以通過自定義方式進行定義

過濾器

日期進行格式化，這里調用格式化函數(shù)

filter是Vue提供的過濾器，第一個參數(shù)是過濾器的名稱，第二個參數(shù)是要進行的操作
function的第一個參數(shù)是過濾器管道符前面?zhèn)鬟f過來的數(shù)據(jù)，過濾器中傳參可以作為第二個參數(shù)，過濾器可以多次調用
根據(jù)給定的字符串得到特定的時間

全局過濾器，所有的vm實例都可以共享，也可以自定義一個私有過濾器
全局過濾器是filter，局部過濾器是filters
過濾器的調用時候采用的是就近原則
如果私有過濾器和全局過濾器名稱一致了，優(yōu)先調用私有過濾器
如果需要在前面補零達到美觀的效果
調用padStart方法
將需要轉換的內容寫成字符串格式，調用padStart，第一個參數(shù)是總共的位數(shù)，第二個參數(shù)是用什么元素補齊

獲取焦點

用到自定義鉤子函數(shù)
調用的時候，需要v開頭，定義的時候不必要用v開頭

這里的事件需要在inserted中執(zhí)行

優(yōu)化

進行請求的時候，拼接根路徑之后就能訪問到完整的地址

初始結構

components中根據(jù)底部導航，放組件

分析

中心區(qū)域內容改變，底部導航不改變，頂部不改變
底部的四個按鈕做路由鏈接

App.vue

index.html中創(chuàng)建一個id值為app的標簽，用于渲染模板
模板內容在app.vue中進行定義
template中有一個根元素，這個根元素類名是app-container
創(chuàng)建頂部header區(qū)域，MintUI中有現(xiàn)成的header模塊，要想有效果，需要在main.js中導入header的組件，header有fixed屬性，脫標，內容會跑到header下面，這時需要給最外層div添加一個padding樣式
創(chuàng)建中間的路由router-view區(qū)域，渲染內容在router.js中進行設置
創(chuàng)建底部tabbar區(qū)域，使用MUI中的tabbar組件
router-view用transition包裹起來，后面可以添加動畫效果

底部區(qū)域建立路由
最外層由nav包裹，需要在main.js中導入MUI的樣式包
根據(jù)MUI的事例，修改圖標類名，mui-icon是基類，不能刪除
這里購物車的字體圖標也有樣式，找到這個樣式文件，復制到自己的項目中，需要在main.js中導入
購物車的字體圖標同時還需要一個mui-icons-extra.ttf的文件，找到這個字體文件，復制到自己的項目中
這里進行路由的配置之前，main.js中導入路由模塊
將原有模板的a鏈接改造成router-link，href屬性改成to屬性
mui-active是MUI提供的一個類，有按鈕高亮顯示的效果，在router.js中對這個類進行設置，達到切換按鈕有高亮的效果

添加兩組類，實現(xiàn)動畫效果
前面的頁面從左面消失，后面的頁面從右面進入
給整體添加overflow-x:hidden表示x方向的內容隱藏，取消滾動條
添加position:absolute，頁面固定，不會再切換的時候出現(xiàn)一個上一個下的漂浮效果
進入之前從右面移進來，所以是正的100%
離開之后從左面離開，所以應該是負的100%
脫標固定在頁面，后面的頁面不會被前面的頁面擠下來

main.js

指定入口文件是vue，導入路由的包，安裝路由，導入vue-resource，用Vue.use安裝vue-resource
導入MUI的樣式，導入擴展圖標樣式，按需導入Mint-UI中的組件

按需導入組件，Vue.component表示全局注冊
導入自己路由模塊，導入vue入口文件，新建一個Vue實例

router.js

導入路由模塊
導入對應的路由組件
創(chuàng)建一個路由對象，對路徑跳轉進行設置
linkActiveClass屬性，在點擊這個鏈接的時候觸發(fā)，這里讓mui-active類覆蓋之前的類名，之前默認的類名是router-link-active
最后需要將對象暴露出去
在App.vue中留一個坑，用來渲染內容

babelrc

gitignore

項目中的一些文件不需要上傳到GitHub
WebStorm打開之后默認生成一個.idea后綴文件，里面放的是WebStorm的相關配置，這個文件可以被忽略

開源協(xié)議

托管

在自己的用戶盤中查找.ssh文件夾，文件夾中后綴為pub的文件就是公鑰，將公鑰中的內容放到托管平臺上，將自己的電腦和托管平臺聯(lián)系起來
托管平臺上，新建一個倉庫
配置中填寫用戶名和郵箱，全局配置了用戶，驗證作用
git config --global user.name "用戶名"
git config --global user.email "郵箱"
配置地址，方便之后操作
git remote add origin https://倉庫平臺地址
git push -u origin master
進行上述配置之后，文件被修改過之后，執(zhí)行下面三句就可以了
git add .
git commit -m "提交信息"
git push

VSCode提供的功能

VSCode提供了一些功能，可以不再執(zhí)行上面命令行，簡化了我們的操作
修改的行前面有藍色標記，添加的行前面有綠色標記

被修改的文件會有提示，被修改的文件，可以恢復修改之前的狀態(tài)，可以將修改內容添加到本地
文本框中添加提示信息，點擊對勾是commit操作
點擊后面的更多選項，推送，可以將本地內容提交到遠程倉庫

輪播

Mint-UI中找到輪播圖相關組件swipe
speed動畫持續(xù)時間，毫秒，默認300
auto自動播放時間，毫秒，默認3000
defaultIndex初始顯示的輪播索引，默認0
continuous是否循環(huán)播放，默認true
showIndicalors是否顯示indicators，默認是true
prevent是否阻止事件的默認行為，默認是false
stopPropagation是否在touchstart事件觸發(fā)時阻止冒泡，默認是false

Home

Home頁面有兩部分，輪播圖區(qū)域和六宮格區(qū)域，這兩部分用一個跟標簽div包裹之后，放到模板template中

輪播圖放到頁面中之后，需要手動設置一個高度，手動添加背景圖片
mt-swipe-item標簽用v-for循環(huán)渲染，使用key定義關鍵字
資源的路徑肯定是唯一的，一個url地址肯定對應一個資源，任何url地址都是唯一的，所以可以把url作為關鍵字
img標簽綁定src屬性變量為item中的img變量

MUI中找到九宮格，grid相關組件
MUI中跟標簽div不需要復制過來，因為div只是一個容器
刪掉多余l(xiāng)i標簽
刪掉字體圖標的icon，添加圖片，設置圖片大小

導入信息提示組件
將數(shù)據(jù)暴露出去
組件中data一定是對象形式，里面必須有一個return
created表示生命周期中，數(shù)據(jù)完全加載成功之后，調用輪播內容
methods用于發(fā)送請求，獲取輪播圖數(shù)據(jù)的方法
看文檔進行設置，get輪播，then后面是成功的回調函數(shù)
如果status是0，表示數(shù)據(jù)獲取成功，將message的數(shù)據(jù)添加到提前定義好的數(shù)組中
否則提示信息失敗

輪播圖的樣式
輪播圖整體添加一個高度，撐起這個元素
輪播的每個頁都有mint-swipe-item類，這個類中使用nth-child交集選擇器，對每個頁面進行設置
mint-swipe-item:nth-child(1)可以寫成scss的形式，交集選擇器，前面一定添加&符號
每個頁面設置背景，方便操作
圖片設置成百分百充滿整個輪播區(qū)域

六宮格，樣式設置，利用組件本身的類名
背景色是白色，去掉分割線
設置圖片大小
設置整體字體大小

newsList

給home頁面的新聞資訊添加路由鏈接，將a標簽改成router-link標簽，href屬性改成to屬性

router文件中對路由進行配置

新建newList的vue頁面，在MUI中找相應的組件
ul中循環(huán)li標簽，用v-for循環(huán)的時候，必須加上一個key，并且后面的id是變量，需要綁定屬性
每個新聞都應該做成一個路由鏈接，跳轉地址末端是這條新聞的id值
每條新聞圖片的src屬性都不一樣，是變量，前面需要綁定屬性
發(fā)表時間需要一個過濾器，后面將過濾器提到了全局

這里引用Mint-UI的提示組件
data中初始化一個新聞列表
methods中定義函數(shù)，當status值為0的時候，獲取數(shù)據(jù)成功，將數(shù)據(jù)保存到新聞列表上
created中調用這個函數(shù)
請求地址是拼接地址，api前面不能加斜杠，否則表示根路徑

設置flex布局，space-between表示以x軸為中心線，向左右兩邊對齊

main中對跟路徑進行設置，根路徑必須寫在安裝路由模塊之后

整體的div上下模塊都是脫標的，為了不讓新聞列表跑到header或者底部導航下面，要設置上下的padding

newsInfo

router文件中對路由進行配置

根據(jù)文檔中內容進行渲染
很多頁面都會用到評論模塊，所以將評論模塊抽離出去，這里將評論模塊當做子組件引用就可以了
評論模塊需要id值，將id值從父組件傳過去，方法就是給標簽添加屬性綁定

導入評論組件模塊
data中接收從父組件傳過來的id值，初始化一個新聞對象列表，將URL地址中傳遞過來的id值直接掛載到data上，方便調用
methods中獲取相關內容
created中進行調用
components用來注冊子組件的節(jié)點
用斜杠拼接的參數(shù)，對應用params接收
用問號拼接的參數(shù)，對應用query接收

圖片設置百分百沒效果，這里將style標簽的scope去掉就可以了，因為這里類名特殊，有前綴，所以不會產(chǎn)生全局污染

時間過濾器

main中定義一個全局過濾器，時間日期
使用moment.js插件
用之前導入插件，filter方法定義過濾器
確定初始化格式，如果頁面中沒有進行設置，就用初始化的樣式

vue文件中通過管道符進行設置

評論子組件

發(fā)表評論和加載更多按鈕，用的Mint-UI，需要在main中導入button組件
構建評論頁面
v-for循環(huán)渲染，后臺傳過來的數(shù)據(jù)中，關鍵詞可以是時間，發(fā)表評論的時間是不一樣的
content內容加一個三元，判斷是否有內容

評論每十條是一頁，默認頁面剛剛渲染出來的時候，在第一頁
初始化評論數(shù)據(jù)列表
methods中請求地址拼接id值和頁碼
獲取新數(shù)據(jù)的時候，不能清空老數(shù)據(jù)，而是應該以老數(shù)據(jù)拼接上新數(shù)據(jù)，concat方法，后面數(shù)據(jù)即使沒有了，請求的數(shù)據(jù)是空數(shù)組，老數(shù)據(jù)加空數(shù)組也沒有問題
點擊加載更多，pageindex自加，重新調用
props表示從父組件傳下來的數(shù)據(jù)

postComment檢測內容是否為空

縮進text-indent

router.js

根據(jù)功能，還需要商品的信息等頁面
在router中定義

VUEX

先導入vuex的包，在main中引入包，并且進行注冊

創(chuàng)建實例的時候，要new Vuex.Store
要想獲取state中的數(shù)據(jù)，this.$store.state.名稱

state相當于組件中的data，得到一個數(shù)據(jù)倉儲對象，組件中如果想要訪問store中的數(shù)據(jù)，只能通過this.$store.state.*來訪問

如果要操作state的值，只能通過mutation提供的方法，才能操作對應的數(shù)據(jù)
在mutation中進行操作的是，將物品添加到購物車，更新購物車中物品信息，從購物車中刪除商品，更新商品是否被選擇的狀態(tài)

getters只負責對外提供數(shù)據(jù)，不負責修改數(shù)據(jù)，在getters中進行的操作是，獲取所有商品的總數(shù)量，獲取各個商品的數(shù)量，獲取商品時候被選中的狀態(tài)，獲取 商品數(shù)量和屬性

購物車

main中
一進入頁面，立刻從存儲中讀取數(shù)據(jù)，放到store中，如果沒有數(shù)據(jù)就放空數(shù)組

addToCar添加到購物車，添加之前進行判斷，如果加入之前已經(jīng)有這個商品了，只需要更新數(shù)量，如果沒有這個商品，push到car中
判斷的依據(jù)是商品的id值，如果當前項的id值和商品的id值相等，當前項的數(shù)量加上之前商品的數(shù)量
如果id值不相等，需要將信息push到car，但是這個語句不能再else中執(zhí)行，如果在else中執(zhí)行，相當于在some中執(zhí)行，但是some一旦執(zhí)行到符合條件的項就會停止，影響push的執(zhí)行
所以在外邊設立一個標識flag
更新car之后，需要將car的數(shù)據(jù)存儲到localStorage中

updateGoodsInfo更新商品的信息，和上面不同的是，這里是更新賦值操作，不是累加操作
在購物車頁面，numbox的數(shù)值是多少，這個商品的總數(shù)量應該就是多少，不能進行累加計算
addToCar中，是在商品詳情頁面，number數(shù)值是多少，表示向原有數(shù)據(jù)中加多少，是累加操作

removeFormCar刪除操作，觸發(fā)這個事件的時候，遍歷存儲的數(shù)據(jù)，如果當前id值和傳入的id值相等，用splice截取掉這一項

updateGoodsSelected更新，觸發(fā)這個事件的時候，將是否被選中的狀態(tài)保存到store中

獲取總數(shù)量，遍歷每一項，累加每一項的數(shù)量

創(chuàng)建空對象，將id值作為屬性，count值作為這個屬性的值

app模塊中，購物車的徽標，需要獲取總數(shù)量，也就是調用getters中的getAllCount函數(shù)就可以了

返回按鈕

返回按鈕

初始化標識為false
生命周期函數(shù)，created表示所有數(shù)據(jù)都加載出來之后，判斷路徑是否是home，如果是home，隱藏，反之顯示
go參數(shù)是-1的時候，回退
watch中實時監(jiān)控路徑

輪播抽離

首頁和商品詳情頁都有輪播區(qū)域，可以抽離出來
循環(huán)輪播數(shù)組，關鍵字是每個圖片的地址
class中添加一個類full，如果isfull值是真，則輪播有full這個類名，反之沒有

組件之間傳遞的值有輪播數(shù)組和isfull

如果有full類名，則寬度為100%，這里是首頁的樣式，在商品詳情頁面，寬度需要自適應，class不應該有full類名，isfull值應該是false

首頁，直接將輪播自定義的標簽放過來

引入輪播組件

暴露函數(shù)中，data中放空數(shù)組，用來接收輪播的數(shù)據(jù)
數(shù)據(jù)都加載完成后，默認調用函數(shù)
get方式從后臺獲取輪播數(shù)據(jù)
components中要對輪播組件進行注冊

numbox

商品詳情中的numbox和購物車頁面的numbox不一樣，如果要抽離numbox的組件的話，為了區(qū)分兩者，需要抽離出兩個numbox
商品詳情頁面中
input中ref屬性用于獲取numbox的值

導入MUI包
MUI中的方法，初始化組件
定義函數(shù)，每當文本框數(shù)據(jù)被修改，立刻將最新的數(shù)據(jù)通過事件調用傳遞給父組件
組件之間傳遞的值是max
調用MUI中的監(jiān)聽方法

購物車頁面中，一旦input的文本框發(fā)生change，觸發(fā)事件，readonly表示文本框不可更改，只能進行加減
在購物車頁面，不可能進行大的數(shù)量的加減

商品評論

商品詳情

用v-html渲染后臺數(shù)據(jù)

從后臺獲取數(shù)據(jù)渲染

購物車頁面

雙向數(shù)據(jù)綁定

創(chuàng)建空對象，循環(huán)購物車中的所有數(shù)據(jù)，把當前這條循環(huán)數(shù)據(jù)的id值作為屬性名，count作為屬性值

在vuex中是能通過$store.commit調用mutation中的方法

商品詳情頁面

購物車添加商品的動畫，半場動畫，用鉤子函數(shù)表示
商品詳情頁的isfull是false，表示寬度的樣式是自適應

加入購物車按鈕，觸發(fā)addToShopCar事件

goDesc和goComment事件要傳入id值

data中，傳入id值，傳入輪播圖的空數(shù)組，傳入商品信息，傳入小球信息，保存用戶是否選中商品的信息

后臺獲取過來的數(shù)據(jù)中圖片的路徑是img，不能直接放到頁面中，因為不識別
所以，遍歷的時候，為每個圖片添加url屬性，讓這個值和后臺數(shù)據(jù)的img相等

獲取后臺數(shù)據(jù)，message是一個數(shù)組，只需要第一項，所以加[0]

跳轉到詳情頁面的函數(shù)，用到編程式導航

添加到購物車函數(shù)，拼接出一個商品列表

添加商品的動畫
小球定位可能不準確
利用getBoundingClientRect這個方法
獲取徽標所在位置，獲取文本框所在位置，橫向縱向求差值，就能求出位移

結束進入之后，小球消失

子組件把數(shù)量傳遞給父組件

前面引入了輪播組件和numbox組件，這里要注冊定義一下

商品列表頁面

data中掛載數(shù)據(jù)，created中調用函數(shù)

獲取商品列表，和評論組件類似
用concat拼接列表

點擊更多按鈕，頁碼值加一，調用上面的獲取商品列表函數(shù)

獲取商品細節(jié)，將name屬性為goodsinfo的項，帶著id值，push到列表中