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

構(gòu)建基本結(jié)構(gòu)

利用bootstrap的樣式

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

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

實(shí)例對(duì)象

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

methods中放的是函數(shù)

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

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

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

回車事件

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

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

過濾器

日期進(jìn)行格式化，這里調(diào)用格式化函數(shù)

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

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

獲取焦點(diǎn)

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

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

優(yōu)化

進(jìn)行請(qǐng)求的時(shí)候，拼接根路徑之后就能訪問到完整的地址

初始結(jié)構(gòu)

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

分析

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

App.vue

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

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

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

main.js

指定入口文件是vue，導(dǎo)入路由的包，安裝路由，導(dǎo)入vue-resource，用Vue.use安裝vue-resource
導(dǎo)入MUI的樣式，導(dǎo)入擴(kuò)展圖標(biāo)樣式，按需導(dǎo)入Mint-UI中的組件

按需導(dǎo)入組件，Vue.component表示全局注冊(cè)
導(dǎo)入自己路由模塊，導(dǎo)入vue入口文件，新建一個(gè)Vue實(shí)例

router.js

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

babelrc

gitignore

項(xiàng)目中的一些文件不需要上傳到GitHub
WebStorm打開之后默認(rèn)生成一個(gè).idea后綴文件，里面放的是WebStorm的相關(guān)配置，這個(gè)文件可以被忽略

開源協(xié)議

托管

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

VSCode提供的功能

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

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

輪播

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

Home

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

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

MUI中找到九宮格，grid相關(guān)組件
MUI中跟標(biāo)簽div不需要復(fù)制過來，因?yàn)閐iv只是一個(gè)容器
刪掉多余l(xiāng)i標(biāo)簽
刪掉字體圖標(biāo)的icon，添加圖片，設(shè)置圖片大小

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

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

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

newsList

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

router文件中對(duì)路由進(jìn)行配置

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

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

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

main中對(duì)跟路徑進(jìn)行設(shè)置，根路徑必須寫在安裝路由模塊之后

整體的div上下模塊都是脫標(biāo)的，為了不讓新聞列表跑到header或者底部導(dǎo)航下面，要設(shè)置上下的padding

newsInfo

router文件中對(duì)路由進(jìn)行配置

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

導(dǎo)入評(píng)論組件模塊
data中接收從父組件傳過來的id值，初始化一個(gè)新聞對(duì)象列表，將URL地址中傳遞過來的id值直接掛載到data上，方便調(diào)用
methods中獲取相關(guān)內(nèi)容
created中進(jìn)行調(diào)用
components用來注冊(cè)子組件的節(jié)點(diǎn)
用斜杠拼接的參數(shù)，對(duì)應(yīng)用params接收
用問號(hào)拼接的參數(shù)，對(duì)應(yīng)用query接收

圖片設(shè)置百分百?zèng)]效果，這里將style標(biāo)簽的scope去掉就可以了，因?yàn)檫@里類名特殊，有前綴，所以不會(huì)產(chǎn)生全局污染

時(shí)間過濾器

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

vue文件中通過管道符進(jìn)行設(shè)置

評(píng)論子組件

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

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

postComment檢測(cè)內(nèi)容是否為空

縮進(jìn)text-indent

router.js

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

VUEX

先導(dǎo)入vuex的包，在main中引入包，并且進(jìn)行注冊(cè)

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

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

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

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

購物車

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

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

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

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

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

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

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

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

返回按鈕

返回按鈕

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

輪播抽離

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

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

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

首頁，直接將輪播自定義的標(biāo)簽放過來

引入輪播組件

暴露函數(shù)中，data中放空數(shù)組，用來接收輪播的數(shù)據(jù)
數(shù)據(jù)都加載完成后，默認(rèn)調(diào)用函數(shù)
get方式從后臺(tái)獲取輪播數(shù)據(jù)
components中要對(duì)輪播組件進(jìn)行注冊(cè)

numbox

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

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

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

商品評(píng)論

商品詳情

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

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

購物車頁面

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

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

在vuex中是能通過$store.commit調(diào)用mutation中的方法

商品詳情頁面

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

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

goDesc和goComment事件要傳入id值

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

后臺(tái)獲取過來的數(shù)據(jù)中圖片的路徑是img，不能直接放到頁面中，因?yàn)椴蛔R(shí)別
所以，遍歷的時(shí)候，為每個(gè)圖片添加url屬性，讓這個(gè)值和后臺(tái)數(shù)據(jù)的img相等

獲取后臺(tái)數(shù)據(jù)，message是一個(gè)數(shù)組，只需要第一項(xiàng)，所以加[0]

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

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

添加商品的動(dòng)畫
小球定位可能不準(zhǔn)確
利用getBoundingClientRect這個(gè)方法
獲取徽標(biāo)所在位置，獲取文本框所在位置，橫向縱向求差值，就能求出位移

結(jié)束進(jìn)入之后，小球消失

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

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

商品列表頁面

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

獲取商品列表，和評(píng)論組件類似
用concat拼接列表

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

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