第1章 課程簡介

介紹課程的學習目標和學習內容。

1-1 課程簡介
1-2 課程安排

第2章 Vuejs介紹

從前端開發趨勢分析開始，引入 MVVM 開發框架和 Vue.js，接著對比流行框架Angular 和 React，最後詳細介紹 Vue.js 的核心思想-資料驅動和元件化。

2-1 Vuejs介紹-近年來前端開發趨勢
2-2 Vuejs介紹-MVVM框架
2-3 Vuejs介紹-什麼是Vuejs及Vuejs生態
2-4 Vuejs介紹-對比Angular、React
2-5 Vuejs介紹-Vuejs核心思想

第3章 Vue-cli 開啟 Vuejs 專案

介紹 Vue 專案的腳手架，如何安裝，對腳手架生成的目錄檔案做介紹，介紹 Vue 元件的編寫方法，最後執行 demo 專案並介紹 webpack 構建指令碼來說明 demo 的執行原理。

3-1 Vue-cli介紹
3-2 Vue-cli安裝
3-3 專案執行
3-4 專案檔案介紹
3-5 webpack打包（上）
3-6 webpack打包（中）
3-7 webpack打包（下）

第4章 專案實戰-準備工作

分析外賣 APP 商家頁面的需求，準備圖片資源，利用 icon-moon 把 svg 製作成圖示字型，對程式碼的目錄結構設計，最後 mock 測試資料。

4-1 需求分析
4-2 專案資源準備
4-3 圖示字體制作
4-4 專案目錄設計
4-5 mock資料（模擬後臺資料）

第5章 專案實戰-頁面骨架開發

設計頁面的骨架，拆分元件，商品、評論和商家詳情頁利用 Vue-router 做切換，最後還介紹了 flex 彈性佈局以及移動端 1 畫素 border 實現的小技巧。

5-1 元件拆分（上）
5-2 元件拆分（中）
5-3 元件拆分（下）
5-4 Vue-router(上)
5-5 Vue-router(下)
5-6 1畫素border實現

第6章 專案實戰-header元件開發

編寫 header 頭部元件，應用 Vue-resource 從服務端讀取資料，介紹如何在 Vue.js 中使用過渡動畫，如何編寫 css sticky footer 佈局，如何從需求中抽象出 star 星星元件。

6-1 Vue-resource應用（上）
6-2 Vue-resource應用（下）
6-3 外部元件（1）
6-4 外部元件（2）
6-5 外部元件（3）
6-6 外部元件（4）
6-7 外部元件（5）
6-8 外部元件（6）
6-9 詳情彈層頁（1）- 實現彈出層
6-10 詳情彈層頁（2）- CSS Sticky footer
6-11 詳情彈層頁（3）- star元件抽象（上）
6-12 詳情彈層頁（3）- star元件抽象（下）
6-13 詳情彈層頁（4）- star元件使用
6-14 詳情彈層頁（5）- 小標題自適應經典flex佈局實現
6-15 詳情彈層頁（6）- header剩餘元件實現（上）
6-16 詳情彈層頁（6）- header剩餘元件實現（下）
 

第7章 專案實戰-goods 商品列表頁開發

編寫 goods 商品元件，包括它的子元件 shopcart 購物車。介紹瞭如何在 Vue.js 應用第三方 JS 外掛 better-scroll實現列表滾動，並配合 Vue.js 的計算屬性來實現左右列表的聯動。應用了自定義 Vue.js 過渡動畫實現了購物車的飛入動畫效果，介紹了在 Vue.js中父子元件如何通訊。…

點選下載