【Vue.js 學習筆記】 === 為了較為系統的學習 Vue 所以購買了 Udemy 上，六角學院的課程 - 《[Vue 出一個電商網站](https://www.udemy.com/vue-hexschool/)》，針對這門課程，做了個讀書筆記。 ### [00. 目錄](/@CynthiaChuang/Vue-Study-Notes-Contents) ### [01. 相關資源與工具設置](/@CynthiaChuang/Vue-Study-Notes-Unit01) - [Vue 官方文件](/@CynthiaChuang/Vue-Study-Notes-Unit01#Vue-官方文件) - [開發工具](/@CynthiaChuang/Vue-Study-Notes-Unit01#開發工具) - [網頁除錯工具](/@CynthiaChuang/Vue-Study-Notes-Unit01#網頁除錯工具) ### [02. 基礎 Vue 概述](/@CynthiaChuang/Vue-Study-Notes-Unit02) - [應用程式建立](/@CynthiaChuang/Vue-Study-Notes-Unit02#應用程式建立) - [雙向綁定的資料 與 MVVM 的概念](/@CynthiaChuang/Vue-Study-Notes-Unit02#雙向綁定的資料-與-MVVM-的概念) - [v-bind 動態屬性指令](/@CynthiaChuang/Vue-Study-Notes-Unit02#v-bind-動態屬性指令) - [v-for 動態產生多筆資料於畫面上](/@CynthiaChuang/Vue-Study-Notes-Unit02#v-for-動態產生多筆資料於畫面上) - [使用 v-on 來操作頁面行為](/@CynthiaChuang/Vue-Study-Notes-Unit02#使用-v-on-來操作頁面行為) - [預先定義資料狀態的重要性](/@CynthiaChuang/Vue-Study-Notes-Unit02#預先定義資料狀態的重要性) - [透過修飾符，讓 v-on 操作更簡單](/@CynthiaChuang/Vue-Study-Notes-Unit02#透過修飾符，讓-v-on-操作更簡單) - [:class 動態切換 className](/@CynthiaChuang/Vue-Study-Notes-Unit02#class-動態切換-className) - [computed 運算功能](/@CynthiaChuang/Vue-Study-Notes-Unit02#computed-運算功能) - [Vue 表單與資料的綁定](/@CynthiaChuang/Vue-Study-Notes-Unit02#Vue-表單與資料的綁定) - [元件基礎概念](/@CynthiaChuang/Vue-Study-Notes-Unit02#元件基礎概念) - [練習測驗 1： 基礎章節測驗](/@CynthiaChuang/Vue-Study-Notes-Unit02#練習測驗-1：-基礎章節測驗) ### [03. 製作一個 Todo List 來小試身手吧](/@CynthiaChuang/Vue-Study-Notes-Unit03) - [套用版型及建立代辦事項列表的資料](/@CynthiaChuang/Vue-Study-Notes-Unit03#套用版型及建立代辦事項列表的資料) - [刪除陣列上的特定資料](/@CynthiaChuang/Vue-Study-Notes-Unit03#刪除陣列上的特定資料) - [製作頁籤分類的功能](/@CynthiaChuang/Vue-Study-Notes-Unit03#製作頁籤分類的功能) - [雙擊修改資料內容](/@CynthiaChuang/Vue-Study-Notes-Unit03#雙擊修改資料內容) - [刪除項目補充說明](/@CynthiaChuang/Vue-Study-Notes-Unit03#刪除項目補充說明) ### [04. 進階模板語法介紹](/@CynthiaChuang/Vue-Study-Notes-Unit04) - [模板資料細節說明](/@CynthiaChuang/Vue-Study-Notes-Unit04#模板資料細節說明) - [動態切換 ClassName 及 Style 多種方法](/@CynthiaChuang/Vue-Study-Notes-Unit04#動態切換-ClassName-及-Style-多種方法) - [v-for 與其使用細節](/@CynthiaChuang/Vue-Study-Notes-Unit04#v-for-與其使用細節) - [v-if 與其使用細節](/@CynthiaChuang/Vue-Study-Notes-Unit04#v-if-與其使用細節) - [Computed 與 Watch](/@CynthiaChuang/Vue-Study-Notes-Unit04#Computed-與-Watch) - [表單細節操作](/@CynthiaChuang/Vue-Study-Notes-Unit04#表單細節操作) - [v-on 的頁面操作細節](/@CynthiaChuang/Vue-Study-Notes-Unit04#v-on-的頁面操作細節) - [章節作業](/@CynthiaChuang/Vue-Study-Notes-Unit04#章節作業) ### [05. Vue 的生命週期](/@CynthiaChuang/Vue-Study-Notes-Unit05) - [Vue 生命週期](/@CynthiaChuang/Vue-Study-Notes-Unit05#Vue-生命週期) - [練習測驗 2：生命週期章節小測驗](/@CynthiaChuang/Vue-Study-Notes-Unit05#練習測驗-2：-生命週期章節小測驗) ### [06. Vue.js 元件](/@CynthiaChuang/Vue-Study-Notes-Unit06) - [元件概念介紹](/@CynthiaChuang/Vue-Study-Notes-Unit06#元件概念介紹) - [使用 x-template 建立元件](/@CynthiaChuang/Vue-Study-Notes-Unit06#使用-x-template-建立元件) - [使用 function return 建構資料格式](/@CynthiaChuang/Vue-Study-Notes-Unit06#使用-function-return-建構資料格式) - [props 基本觀念](/@CynthiaChuang/Vue-Study-Notes-Unit06#props-基本觀念) - [props 使用上的注意事項](/@CynthiaChuang/Vue-Study-Notes-Unit06#props-使用上的注意事項) - [props 型別及預設值](/@CynthiaChuang/Vue-Study-Notes-Unit06#props-型別及預設值) - [emit 向外層傳遞事件](/@CynthiaChuang/Vue-Study-Notes-Unit06#emit-向外層傳遞事件) - [Slot 元件插槽](/@CynthiaChuang/Vue-Study-Notes-Unit06#Slot-元件插槽) - [使用 is 動態切換元件](/@CynthiaChuang/Vue-Study-Notes-Unit06#使用-is-動態切換元件) - [元件 章節作業](/@CynthiaChuang/Vue-Study-Notes-Unit06#元件-章節作業) - [測驗：Vue 元件測驗](/@CynthiaChuang/Vue-Study-Notes-Unit06#測驗：Vue-元件測驗) ### [07. JavaScript ES6](/@CynthiaChuang/Vue-Study-Notes-Unit07) - [使用 let 與 const 宣告變數](/@CynthiaChuang/Vue-Study-Notes-Unit07#使用-let-與-const-宣告變數) - [展開與其餘參數](/@CynthiaChuang/Vue-Study-Notes-Unit07#展開與其餘參數) - [解構](/@CynthiaChuang/Vue-Study-Notes-Unit07#解構) - [縮寫](/@CynthiaChuang/Vue-Study-Notes-Unit07#縮寫) - [箭頭函式與傳統函式](/@CynthiaChuang/Vue-Study-Notes-Unit07#箭頭函式與傳統函式) - [字串模板 Template String](/@CynthiaChuang/Vue-Study-Notes-Unit07#/@CynthiaChuang/Vue-Study-Notes-Unit07#字串模板-Template-String) - [常用陣列方法](/@CynthiaChuang/Vue-Study-Notes-Unit07#常用陣列方法) - [測驗 2： ES6 小測驗](/@CynthiaChuang/Vue-Study-Notes-Unit07#測驗-2：ES6-小測驗) ### [08. Vue 常用 API](/@CynthiaChuang/Vue-Study-Notes-Unit08) - [使用 Extend 避免重複造輪子](/@CynthiaChuang/Vue-Study-Notes-Unit08#使用-Extend-避免重複造輪子) - [Filter 自訂畫面資料呈現格式](/@CynthiaChuang/Vue-Study-Notes-Unit08#Filter-自訂畫面資料呈現格式) - [無法寫入的資料，用 set 搞定他](/@CynthiaChuang/Vue-Study-Notes-Unit08#無法寫入的資料，用-set-搞定它) - [Mixin 混合其它的元件內容](/@CynthiaChuang/Vue-Study-Notes-Unit08#Mixin-混合其它的元件內容) - [使用 Directive 開發自己的互動 UI](/@CynthiaChuang/Vue-Study-Notes-Unit08#使用-Directive-開發自己的互動-UI) ### [09. Vue Cli 的建置與運作原理](/@CynthiaChuang/Vue-Study-Notes-Unit09) - [為什麼要學 Vue Cli](/@CynthiaChuang/Vue-Study-Notes-Unit09#為什麼要學-Vue-Cli) - [Vue Cli 2.x 與 Vue Cli 3.x 課程說明](/@CynthiaChuang/Vue-Study-Notes-Unit09#Vue-Cli-2.x-與-Vue-Cli-3.x-課程說明) - [如何使用 Vue Cli](/@CynthiaChuang/Vue-Study-Notes-Unit09#如何使用-Vue-Cli) - [Vue Cli 所產生的資料夾結構說明](/@CynthiaChuang/Vue-Study-Notes-Unit09#Vue-Cli-所產生的資料夾結構說明) - [Webpack 腳本介紹 及 自定義環境變數](/@CynthiaChuang/Vue-Study-Notes-Unit09#Webpack-腳本介紹-及-自定義環境變數) - [安裝套件在 Vue Webpack 中](/@CynthiaChuang/Vue-Study-Notes-Unit09#安裝套件在-Vue-Webpack-中) ### [10. Vue Router](/@CynthiaChuang/Vue-Study-Notes-Unit10) - [使用 Vue Router 及配置路由文件](/@CynthiaChuang/Vue-Study-Notes-Unit10#使用-Vue-Router-及配置路由文件) - [新增路由路徑及連結](/@CynthiaChuang/Vue-Study-Notes-Unit10#新增路由路徑及連結) - [製作巢狀路由頁面](/@CynthiaChuang/Vue-Study-Notes-Unit10#製作巢狀路由頁面) - [使用動態路由切換頁面 Ajax 結果](/@CynthiaChuang/Vue-Study-Notes-Unit10#使用動態路由切換頁面-Ajax-結果) - [命名路由，同一個路徑載入兩個頁面元件](/@CynthiaChuang/Vue-Study-Notes-Unit10#命名路由，同一個路徑載入兩個頁面元件) - [Vue Router 參數設定](/@CynthiaChuang/Vue-Study-Notes-Unit10#Vue-Router-參數設定) - [自定義切換路由方法](/@CynthiaChuang/Vue-Study-Notes-Unit10#自定義切換路由方法) ### 11. Vue 出一個電商網站 ### 12. Vue Cli 3.0 ### 13. Vuex 管理大型網站資料狀態 ### 14. 線上問答會實戰內容
{"metaMigratedAt":"2023-06-15T02:48:11.282Z","metaMigratedFrom":"YAML","title":"【Vue.js 學習筆記】目錄","breaks":true,"disqus":"cynthiahackmd","description":"為了較為系統的學習 Vue 所以購買了 Udemy 上，六角學院的課程 - 《Vue 出一個電商網站》，針對這門課程，做了個讀書筆記。","contributors":"[{\"id\":\"19c6453d-2927-4d3e-9e59-f5737d58416b\",\"add\":13485,\"del\":7468}]"}
Expand menu