【Vue.js 學習筆記】00. 目錄

為了較為系統的學習 Vue 所以購買了 Udemy 上，六角學院的課程 - 《Vue 出一個電商網站》，針對這門課程，做了個讀書筆記。

01. 相關資源與工具設置

1. Vue 官方文件
2. 開發工具
3. 網頁除錯工具

02. 基礎 Vue 概述

• 應用程式建立
• 雙向綁定的資料 與 MVVM 的概念
• v-bind 動態屬性指令
• v-for 動態產生多筆資料於畫面上
• 使用 v-on 來操作頁面行為
• 預先定義資料狀態的重要性
• 透過修飾符，讓 v-on 操作更簡單
• :class 動態切換 className
• computed 運算功能
• Vue 表單與資料的綁定
• 元件基礎概念
• 練習測驗 1：基礎章節測驗

03. 製作一個 Todo List 來小試身手吧

1. 套用版型及建立代辦事項列表的資料
2. 刪除陣列上的特定資料
3. 製作頁籤分類的功能
4. 雙擊修改資料內容
5. 刪除項目補充說明

04. 進階模板語法介紹

1. 模板資料細節說明
2. 動態切換 ClassName 及 Style 多種方法
3. v-for 與其使用細節
4. v-if 與其使用細節
5. Computed 與 Watch
6. 表單細節操作
7. v-on 的頁面操作細節
8. 章節作業

05. Vue 的生命週期

1. Vue 生命週期
2. 練習測驗 2：生命週期章節小測驗

06. Vue.js 元件

1. 元件概念介紹
2. 使用 x-template 建立元件
3. 使用 function return 建構資料格式
4. props 基本觀念
5. props 使用上的注意事項
6. props 型別及預設值
7. emit 向外層傳遞事件
8. Slot 元件插槽
9. 使用 is 動態切換元件
10. 元件 章節作業
11. 測驗：Vue 元件測驗

07. JavaScript ES6

1. 使用 let 與 const 宣告變數
2. 展開與其餘參數
3. 解構
4. 縮寫
5. 箭頭函式與傳統函式
6. 字串模板 Template String
7. 常用陣列方法
8. 測驗 2： ES6 小測驗

08. Vue 常用 API

1. 使用 Extend 避免重複造輪子
2. Filter 自訂畫面資料呈現格式
3. 無法寫入的資料，用 set 搞定他
4. Mixin 混合其它的元件內容
5. 使用 Directive 開發自己的互動 UI

09. Vue Cli 的建置與運作原理

1. 為什麼要學 Vue Cli
2. Vue Cli 2.x 與 Vue Cli 3.x 課程說明
3. 如何使用 Vue Cli
4. Vue Cli 所產生的資料夾結構說明
5. Webpack 腳本介紹 及 自定義環境變數
6. 安裝套件在 Vue Webpack 中

10. Vue Router

1. 使用 Vue Router 及配置路由文件
2. 新增路由路徑及連結
3. 製作巢狀路由頁面
4. 使用動態路由切換頁面 Ajax 結果
5. 命名路由，同一個路徑載入兩個頁面元件
6. Vue Router 參數設定
7. 自定義切換路由方法

11. Vue 出一個電商網站

12. Vue Cli 3.0

13. Vuex 管理大型網站資料狀態

14. 線上問答會實戰內容