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