增加使用者體驗 - 讀取中效果製作 | 六角學院

自動播放
自動完成

上一堂課程完成並繼續課程

670031

Vue 出一個電商網站

介紹

課程最終任務說明
本課程介紹 (1:58)
課程說明 (3:57)
六角學院線上社團
Apple M1 觀看公告

基礎 Vue.js 概述

課程資源連結
Vue 開發環境介紹 (10:15)
VS Code Preview on Web Server 替代套件
應用程式建立 (6:28)
雙向綁定的資料 (4:58)
MVVM 的概念 (4:51)
v-bind 動態屬性指令 (3:51)
v-for 動態產生多筆資料於畫面上 (5:33)
使用 v-on 來操作頁面行為 (5:06)
預先定義資料狀態的重要性 (1:54)
透過修飾符，讓 v-on 操作更簡單 (7:36)
v-class 動態切換 className (3:47)
computed 運算功能 (2:28)
Methods 與 Computed 的使用情境
Vue 表單與資料的綁定 (7:32)
元件基礎概念 (5:37)
基礎章節測驗

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

這個範例要練習什麼!? (1:47)
套用版型及建立代辦事項列表的資料 (9:07)
刪除陣列上的特定資料 (3:18)
製作頁籤分類的功能 (8:25)
雙擊修改資料內容 (8:33)
刪除項目補充說明 (4:48)
換你來試試看，完成這份作業吧 (1:21)
實戰體驗 - Tode List 的資源連結

進階模板語法介紹

模板資料細節說明 (6:17)
動態切換 ClassName 及 Style 多種方法 (12:13)
v-for 與其使用細節 (16:30)
v-if 與其使用細節 (10:06)
Computed 與 Watch (8:46)
表單細節操作 (6:24)
v-on 的頁面操作細節 (8:20)
Template 章節作業說明 (2:05)
章節作業模板

Vue 的生命週期

實際運行範例 (7:46)
Vue 生命週期的簡報說明 (2:55)
生命週期章節小測驗

Vue.js 元件

元件概念介紹 (2:36)
使用 x-template 建立元件 (8:51)
使用 function return 建構資料格式 (1:50)
props 基本觀念 (4:15)
props 使用上的注意事項 (11:54)
props 型別及預設值 (4:45)
emit 向外層傳遞事件 (5:07)
元件插槽 (7:51)
使用 is 動態切換元件 (3:09)
元件章節作業 - API 替換說明
元件章節作業說明 (2:10)
Vue 元件測驗

JavaScript ES6

使用 let 與 const 宣告變數 (9:39)
展開與其餘參數 (9:54)
解構 (9:22)
縮寫 (5:52)
箭頭函式與傳統函式 (8:30)
字串模板 Template String (5:53)
常用陣列方法 (上) (9:09)
常用陣列方法 (下) (6:01)
ES6 小測驗

Vue 常用 API

使用 Extend 避免重複造輪子 (5:03)
Filter 自訂畫面資料呈現格式 (5:19)
無法寫入的資料，用 set 搞定他 (7:56)
Mixin 混合其它的元件內容 (3:41)
使用 Directive 開發自己的互動 UI (8:07)
Directive 細節說明 (6:13)
使用外部載入的套件 (4:32)

Vue Cli 的建置與運作原理

為什麼要學 Vue Cli (4:12)
Vue Cli 2.x 與 Vue Cli 3.x 課程說明
如何使用 Vue Cli (6:58)
Vue Cli 安裝相關資源
Vue Cli 所產生的資料夾結構說明 (8:06)
Webpack 腳本介紹及自定義環境變數 (11:50)
安裝套件在 Vue Webpack 中 (9:09)

Vue Router

本章節以後，提問的注意事項
使用 Vue Router 及配置路由文件 (7:38)
新增路由路徑及連結 (6:26)
製作巢狀路由頁面 (4:24)
使用動態路由切換頁面 Ajax 結果 (7:04)
命名路由，同一個路徑載入兩個頁面元件 (7:02)
Vue Router 參數設定 (4:20)
自定義切換路由方法 (5:26)

Vue 出一個電商網站

課程架構及流程說明 (3:29)
課程 API 文件及路徑
Vue API 課程補充說明
註冊課程專屬練習 API (4:23)
API 常見問題解決方式
啟用一個 Vue Cli 並且引用帶入專屬 API (8:12)
插件補充說明 (2:42)
引用 Bootstrap 套件，並客製化樣式 (8:02)
製作登入介面 (9:31)
登入 API 補充說明
登入 API 補充說明 (跨域) (4:38)
課程補充範例程式碼 (15:18)
課程補充範例程式碼說明
驗證登入及 Vue Router 的配置 (8:31)
套用 Bootstrap Dashboard 版型 (8:26)
製作產品列表 (10:12)
Vue 中運用 Bootstrap 及 jQuery (6:13)
產品的新增修改 (12:50)
串接上傳檔案 API (9:09)
增加使用者體驗 - 讀取中效果製作 (6:54)
Font-awesome 連結說明
增加使用者體驗 - 錯誤的訊息回饋 (8:53)
產品列表的分頁邏輯 (7:10)
套用價格的 Filter 技巧 (2:22)
中場休息說明，準備進入下半場囉 (5:23)
Dashboard 新增模擬購物頁面 - 新增卡片式產品列表 (5:48)
取得單一產品 (6:19)
選購產品及加入購物車 (8:50)
刪除購物車品項及新增優惠碼 (7:26)
*建立訂單及表單驗證技巧 (12:10)
驗證補充說明
表單驗證補充 (14:23)
表單驗證補充文件
結帳頁面製作 (10:06)
最終作業說明 (4:28)
最終作業寄送變更
最終作業文件

Vue Cli 3.0

3.0 與 2.0 的差異說明及特色 (3:25)
安裝運行 Vue Cli 3.0 (5:40)
資料夾結構說明 (5:53)
環境變數的設定 (7:50)
使用 GUI 介面創建專案 (6:29)
GUI 設定及 CLI 插件安裝說明 (6:04)
Vue cli 2.x 範例專案
CLI 2.0 專案搬移到 3.0 實際演練 (10:52)
6 分鐘，使用 Vue Cli 快速創建原型 (6:04)

Vuex 管理大型網站資料狀態

Vuex 是什麼？ (5:02)
Vuex 課程資源
使用課程範例，並新增一個 Store 管理網站資料狀態 (9:10)
Actions 及 Mutation 改變資料狀態 (7:54)
Vuex 的嚴謹模式，從中學習正確方式撰寫 Vuex (3:24)
使用 Actions 取得遠端資料 (6:25)
Payload 傳遞物件參數 (7:17)
Vuex 中的 Getters 及 mapGetters, mapActions (4:04)
模組化資料運用 (8:37)

線上問答會實戰內容

第一週：高雄旅遊網版型及相關資源
第一週：將 JavaScript 課程中的作業 "高雄旅遊網" 改用 Vue.js 製作 (67:55)
第二週：THE F2E 線上直播相關資源
第二週：Json-Server 運行說明 (4:39)
第二週：THE F2E 線上直播 Todo List 介紹(上) (40:48)
第二週：THE F2E 線上直播 Todo List 介紹(下) (52:59)
補充介紹：Vue 是什麼 (18:26)
補充介紹：業務邏輯與畫面邏輯分離 - 使用 jQuery 與 Vue 做比較 (24:28)
補充介紹：主流框架之比較 (11:32)

增加使用者體驗 - 讀取中效果製作

/courses/670031/lectures/11949341/hotmart_lecture_video_download_link/24163898

670031

Vue Loading Overlay

完成並繼續課程