前言：GitHub：https://github.com/Ewall1106/mall（請選擇分支17）
1、基礎(chǔ)語法
（1）v-for語法
https://cn.vuejs.org/v2/guide/list.html
我們用 v-for 指令根據(jù)一組數(shù)組的選項列表進行渲染。愛掏網(wǎng) - it200.comv-for 指令需要使用 item in items形式的特殊語法，items 是源數(shù)據(jù)數(shù)組并且 item 是數(shù)組元素迭代的別名。愛掏網(wǎng) - it200.com
vue官網(wǎng)
（2）模板語法
https://cn.vuejs.org/v2/guide/syntax.html
我們獲取到的值要用模板語法將值插入到頁面中， 數(shù)據(jù)綁定最常見的形式就是使用Mustache語法 (雙大括號) 的文本插值：
Message: {{ msg }}
（3）父子組件之間的傳值
https://cn.vuejs.org/v2/guide/components-props.html
在Vue中，父子組件的關(guān)系可以總結(jié)為prop向下傳遞，事件向上傳遞。愛掏網(wǎng) - it200.com父組件通過prop給子組件下發(fā)數(shù)據(jù)，子組件通過事件給父組件發(fā)送信息。愛掏網(wǎng) - it200.com
vue官網(wǎng)
具體我們在項目中動手實現(xiàn)簡單的傳值。愛掏網(wǎng) - it200.com
2、項目運用
（1）數(shù)據(jù)賦值于data中
上一篇我們用axios獲取了數(shù)據(jù)并打印了，現(xiàn)在我們先把數(shù)據(jù)賦值data的屬性中。愛掏網(wǎng) - it200.com
賦值
（2）傳值給輪播圖子組件
- ① 通過
v-bind動態(tài)賦值，把輪播圖這個數(shù)據(jù)對象傳遞給輪播圖組件carousel。愛掏網(wǎng) - it200.com
父組件傳值
:是v-bind的簡寫形式
- ② 子組件接收數(shù)據(jù)
子組件什么接收數(shù)據(jù)呢？很簡單，在props中定義屬性名就可以了；
然后用type定義一下傳過來的數(shù)據(jù)類型，進行驗證；default屬性則是定了個默認值。愛掏網(wǎng) - it200.com
子組件接收值
- ③ 接下來就是用
v-for循環(huán)把數(shù)據(jù)渲染到頁面上
數(shù)據(jù)渲染
ok，至此為止，父子組件的基本傳值就是這樣了。愛掏網(wǎng) - it200.com
（3）分類模塊
跟輪播圖組件渲染數(shù)據(jù)的模式大同小異，不過多闡述。愛掏網(wǎng) - it200.com
分類模塊數(shù)據(jù)渲染
（4）推薦模塊
這是除了使用前面提到的列表渲染外，就是使用Mustache語法 (雙大括號) 的文本插值了。愛掏網(wǎng) - it200.com
推薦模塊數(shù)據(jù)渲染
3、章結(jié)
至此，我們就將首頁的mock數(shù)據(jù)從建立—>到訪問—>渲染到頁面的一個基本的流程走完了，后面我們根據(jù)頁面的拓展會對mock數(shù)據(jù)進行修改和添加，所以請實時關(guān)注；再者，當(dāng)請求數(shù)據(jù)的接口多了，這樣寫axios肯定會麻煩，所以后面也會對axios進行下統(tǒng)一的封裝。愛掏網(wǎng) - it200.com
參考學(xué)習(xí)
https://cn.vuejs.org/v2/guide/list.html
https://cn.vuejs.org/v2/guide/syntax.html
https://github.com/Ewall1106/mall