VUE實例圖解

VUE案例

品牌列表

• 構建基本結構

利用bootstrap的樣式

數據要雙向更新，因此要用到v-model，同時在後面的data中要進行初始化
爲添加按鈕綁定add事件

table的tbody中，綁定id值爲關鍵字
刪除a標籤綁定del函數，傳入參數的時候，須要用括號
.prevent事件修飾符，表示阻止默認事件

• 實例對象

新建一個實例函數
data中初始化須要雙向更新的數據
list中放的是假數據

methods中放的是函數

添加函數，定義一個對象，對象中有id，name，ctime三個屬性
將這個car對象添加到list中
添加結束以後，清空文本框

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

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

• 回車事件

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

碼值麻煩不容易記憶，能夠經過自定義方式進行定義

• 過濾器

日期進行格式化，這裏調用格式化函數

filter是Vue提供的過濾器，第一個參數是過濾器的名稱，第二個參數是要進行的操做
function的第一個參數是過濾器管道符前面傳遞過來的數據，過濾器中傳參能夠做爲第二個參數，過濾器能夠屢次調用
根據給定的字符串獲得特定的時間

全局過濾器，全部的vm實例均可以共享，也能夠自定義一個私有過濾器
全局過濾器是filter，局部過濾器是filters
過濾器的調用時候採用的是就近原則
若是私有過濾器和全局過濾器名稱一致了，優先調用私有過濾器
若是須要在前面補零達到美觀的效果
調用padStart方法
將須要轉換的內容寫成字符串格式，調用padStart，第一個參數是總共的位數，第二個參數是用什麼元素補齊

• 獲取焦點

用到自定義鉤子函數
調用的時候，須要v開頭，定義的時候沒必要要用v開頭

這裏的事件須要在inserted中執行

• 優化

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

大項目

• 初始結構

components中根據底部導航，放組件

• 分析

中心區域內容改變，底部導航不改變，頂部不改變
底部的四個按鈕作路由連接

• App.vue

index.html中建立一個id值爲app的標籤，用於渲染模板
模板內容在app.vue中進行定義
template中有一個根元素，這個根元素類名是app-container
建立頂部header區域，MintUI中有現成的header模塊，要想有效果，須要在main.js中導入header的組件，header有fixed屬性，脫標，內容會跑到header下面，這時須要給最外層div添加一個padding樣式
建立中間的路由router-view區域，渲染內容在router.js中進行設置
建立底部tabbar區域，使用MUI中的tabbar組件
router-view用transition包裹起來，後面能夠添加動畫效果

底部區域創建路由
最外層由nav包裹，須要在main.js中導入MUI的樣式包
根據MUI的事例，修改圖標類名，mui-icon是基類，不能刪除
這裏購物車的字體圖標也有樣式，找到這個樣式文件，複製到本身的項目中，須要在main.js中導入
購物車的字體圖標同時還須要一個mui-icons-extra.ttf的文件，找到這個字體文件，複製到本身的項目中
這裏進行路由的配置以前，main.js中導入路由模塊
將原有模板的a連接改形成router-link，href屬性改爲to屬性
mui-active是MUI提供的一個類，有按鈕高亮顯示的效果，在router.js中對這個類進行設置，達到切換按鈕有高亮的效果

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

• main.js

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

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

• router.js

導入路由模塊
導入對應的路由組件
建立一個路由對象，對路徑跳轉進行設置
linkActiveClass屬性，在點擊這個連接的時候觸發，這裏讓mui-active類覆蓋以前的類名，以前默認的類名是router-link-active
最後須要將對象暴露出去
在App.vue中留一個坑，用來渲染內容

• babelrc

• gitignore

項目中的一些文件不須要上傳到GitHub
WebStorm打開以後默認生成一個.idea後綴文件，裏面放的是WebStorm的相關配置，這個文件能夠被忽略

• 開源協議

• 託管

在本身的用戶盤中查找.ssh文件夾，文件夾中後綴爲pub的文件就是公鑰，將公鑰中的內容放到託管平臺上，將本身的電腦和託管平臺聯繫起來
託管平臺上，新建一個倉庫
配置中填寫用戶名和郵箱，全局配置了用戶，驗證做用
git config --global user.name "用戶名"
git config --global user.email "郵箱"
配置地址，方便以後操做
git remote add origin https://倉庫平臺地址
git push -u origin master
進行上述配置以後，文件被修改過以後，執行下面三句就能夠了
git add .
git commit -m '提交信息'
git push

• VSCode提供的功能

VSCode提供了一些功能，能夠再也不執行上面命令行，簡化了咱們的操做
修改的行前面有藍色標記，添加的行前面有綠色標記

被修改的文件會有提示，被修改的文件，能夠恢復修改以前的狀態，能夠將修改內容添加到本地
文本框中添加提示信息，點擊對勾是commit操做
點擊後面的更多選項，推送，能夠將本地內容提交到遠程倉庫

• 輪播

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

• Home

Home頁面有兩部分，輪播圖區域和六宮格區域，這兩部分用一個跟標籤div包裹以後，放到模板template中

輪播圖放到頁面中以後，須要手動設置一個高度，手動添加背景圖片
mt-swipe-item標籤用v-for循環渲染，使用key定義關鍵字
資源的路徑確定是惟一的，一個url地址確定對應一個資源，任何url地址都是惟一的，因此能夠把url做爲關鍵字
img標籤綁定src屬性變量爲item中的img變量

MUI中找到九宮格，grid相關組件
MUI中跟標籤div不須要複製過來，由於div只是一個容器
刪掉多餘li標籤
刪掉字體圖標的icon，添加圖片，設置圖片大小

導入信息提示組件
將數據暴露出去
組件中data必定是對象形式，裏面必須有一個return
created表示生命週期中，數據徹底加載成功以後，調用輪播內容
methods用於發送請求，獲取輪播圖數據的方法
看文檔進行設置，get輪播，then後面是成功的回調函數
若是status是0，表示數據獲取成功，將message的數據添加到提早定義好的數組中
不然提示信息失敗

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

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

• newsList

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

router文件中對路由進行配置

新建newList的vue頁面，在MUI中找相應的組件
ul中循環li標籤，用v-for循環的時候，必須加上一個key，而且後面的id是變量，須要綁定屬性
每一個新聞都應該作成一個路由連接，跳轉地址末端是這條新聞的id值
每條新聞圖片的src屬性都不同，是變量，前面須要綁定屬性
發表時間須要一個過濾器，後面將過濾器提到了全局

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

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

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

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

• newsInfo

router文件中對路由進行配置

根據文檔中內容進行渲染
不少頁面都會用到評論模塊，因此將評論模塊抽離出去，這裏將評論模塊當作子組件引用就能夠了
評論模塊須要id值，將id值從父組件傳過去，方法就是給標籤添加屬性綁定

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

圖片設置百分百沒效果，這裏將style標籤的scope去掉就能夠了，由於這裏類名特殊，有前綴，因此不會產生全局污染

• 時間過濾器

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

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

• 評論子組件

發表評論和加載更多按鈕，用的Mint-UI，須要在main中導入button組件
構建評論頁面
v-for循環渲染，後臺傳過來的數據中，關鍵詞能夠是時間，發表評論的時間是不同的
content內容加一個三元，判斷是否有內容

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

postComment檢測內容是否爲空

縮進text-indent

• router.js

根據功能，還須要商品的信息等頁面
在router中定義

• VUEX

先導入vuex的包，在main中引入包，而且進行註冊

建立實例的時候，要new Vuex.Store
要想獲取state中的數據，this.$store.state.名稱

state至關於組件中的data，獲得一個數據倉儲對象，組件中若是想要訪問store中的數據，只能經過this.$store.state.*來訪問

若是要操做state的值，只能經過mutation提供的方法，才能操做對應的數據
在mutation中進行操做的是，將物品添加到購物車，更新購物車中物品信息，從購物車中刪除商品，更新商品是否被選擇的狀態

getters只負責對外提供數據，不負責修改數據，在getters中進行的操做是，獲取全部商品的總數量，獲取各個商品的數量，獲取商品時候被選中的狀態，獲取 商品數量和屬性

• 購物車

main中
一進入頁面，馬上從存儲中讀取數據，放到store中，若是沒有數據就放空數組

addToCar添加到購物車，添加以前進行判斷，若是加入以前已經有這個商品了，只須要更新數量，若是沒有這個商品，push到car中
判斷的依據是商品的id值，若是當前項的id值和商品的id值相等，當前項的數量加上以前商品的數量
若是id值不相等，須要將信息push到car，可是這個語句不能再else中執行，若是在else中執行，至關於在some中執行，可是some一旦執行到符合條件的項就會中止，影響push的執行
因此在外邊設立一個標識flag
更新car以後，須要將car的數據存儲到localStorage中

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

removeFormCar刪除操做，觸發這個事件的時候，遍歷存儲的數據，若是當前id值和傳入的id值相等，用splice截取掉這一項

updateGoodsSelected更新，觸發這個事件的時候，將是否被選中的狀態保存到store中

獲取總數量，遍歷每一項，累加每一項的數量

建立空對象，將id值做爲屬性，count值做爲這個屬性的值

app模塊中，購物車的徽標，須要獲取總數量，也就是調用getters中的getAllCount函數就能夠了

• 返回按鈕

返回按鈕

初始化標識爲false
生命週期函數，created表示全部數據都加載出來以後，判斷路徑是不是home，若是是home，隱藏，反之顯示
go參數是-1的時候，回退
watch中實時監控路徑

• 輪播抽離

首頁和商品詳情頁都有輪播區域，能夠抽離出來
循環輪播數組，關鍵字是每一個圖片的地址
class中添加一個類full，若是isfull值是真，則輪播有full這個類名，反之沒有

組件之間傳遞的值有輪播數組和isfull

若是有full類名，則寬度爲100%，這裏是首頁的樣式，在商品詳情頁面，寬度須要自適應，class不該該有full類名，isfull值應該是false

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

引入輪播組件

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

• numbox

商品詳情中的numbox和購物車頁面的numbox不同，若是要抽離numbox的組件的話，爲了區分二者，須要抽離出兩個numbox
商品詳情頁面中
input中ref屬性用於獲取numbox的值

導入MUI包
MUI中的方法，初始化組件
定義函數，每當文本框數據被修改，馬上將最新的數據經過事件調用傳遞給父組件
組件之間傳遞的值是max
調用MUI中的監聽方法

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

• 商品評論

• 商品詳情

用v-html渲染後臺數據

從後臺獲取數據渲染

• 購物車頁面

雙向數據綁定

建立空對象，循環購物車中的全部數據，把當前這條循環數據的id值做爲屬性名，count做爲屬性值

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

• 商品詳情頁面

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

加入購物車按鈕，觸發addToShopCar事件

goDesc和goComment事件要傳入id值

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

後臺獲取過來的數據中圖片的路徑是img，不能直接放到頁面中，由於不識別
因此，遍歷的時候，爲每一個圖片添加url屬性，讓這個值和後臺數據的img相等

獲取後臺數據，message是一個數組，只須要第一項，因此加[0]

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

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

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

結束進入以後，小球消失

子組件把數量傳遞給父組件

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

• 商品列表頁面

data中掛載數據，created中調用函數

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

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

獲取商品細節，將name屬性爲goodsinfo的項，帶着id值，push到列表中