Vue 出一個電商網站
2,190 students enrolled
Price:
$84.99
30-Day Money-Back Guarantee
This course includes
- 15.5 hours on-demand video
- 22 articles
- 1 downloadable resource
- 2 Practice Tests
- Full lifetime access
- Access on mobile and TV
- Certificate of Completion
Training 5 or more people?
Get your team access to 4,000+ top Udemy courses anytime, anywhere.
Try Udemy for Business
What you'll learn
- 完整了解 Vue 的運行概念
- 學會使用 Vue 串接後端 API
- 使用 Vue Cli (或不使用) 都可以完成一個互動網頁作品
- 具有獨立完成一個 Vue 應用程式的能力
Course content
Expand all
138 lectures
15:52:44
+
–
基礎 Vue.js 概述
16 lectures
01:11:53
課程資源連結
01:16
Preview
10:15
VSCode Preview on Web Server 替代套件
00:21
應用程式建立
06:28
雙向綁定的資料
04:58
MVVM 的概念
04:51
v-bind 動態屬性指令
03:51
v-for 動態產生多筆資料於畫面上
05:33
使用 v-on 來操作頁面行為
05:06
預先定義資料狀態的重要性
01:54
透過修飾符，讓 v-on 操作更簡單
07:36
v-class 動態切換 className
03:47
computed 運算功能
02:28
Methods 與 Computed 的使用情境
00:19
Vue 表單與資料的綁定
07:32
元件基礎概念
05:37
基礎章節測驗
5 questions
+
–
製作一個 Todo List 來小試身手吧
8 lectures
37:36
這個範例要練習什麼!?
01:47
套用版型及建立代辦事項列表的資料
09:07
刪除陣列上的特定資料
03:18
製作頁籤分類的功能
08:25
雙擊修改資料內容
08:33
刪除項目補充說明
04:48
換你來試試看，完成這份作業吧
01:21
實戰體驗 - Tode List 的資源連結
00:17
+
–
進階模板語法介紹
9 lectures
01:10:49
模板資料細節說明
06:17
動態切換 ClassName 及 Style 多種方法
12:13
v-for 與其使用細節
16:30
v-if 與其使用細節
10:06
Computed 與 Watch
08:46
表單細節操作
06:24
v-on 的頁面操作細節
08:20
Template 章節作業說明
02:05
章節作業模板
00:08
+
–
Vue.js 元件
10 lectures
52:28
元件概念介紹
02:36
使用 x-template 建立元件
08:51
使用 function return 建構資料格式
01:50
props 基本觀念
04:15
props 使用上的注意事項
11:54
props 型別及預設值
04:45
emit 向外層傳遞事件
05:07
元件插槽
07:51
使用 is 動態切換元件
03:09
元件 章節作業說明
02:10
Vue 元件測驗
5 questions
+
–
Vue 常用 API
7 lectures
40:51
使用 Extend 避免重複造輪子
05:03
Filter 自訂畫面資料呈現格式
05:19
無法寫入的資料，用 set 搞定他
07:56
Mixin 混合其它的元件內容
03:41
使用 Directive 開發自己的互動 UI
08:07
Directive 細節說明
06:13
使用外部載入的套件
04:32
+
–
Vue Cli 的建置與運作原理
7 lectures
41:25
+
–
Vue Router
8 lectures
42:41
本章節以後，提問的注意事項
00:21
使用 Vue Router 及配置路由文件
07:38
新增路由路徑及連結
06:26
製作巢狀路由頁面
04:24
使用動態路由切換頁面 Ajax 結果
07:04
命名路由，同一個路徑載入兩個頁面元件
07:02
Vue Router 參數設定
04:20
自定義切換路由方法
05:26
Requirements
- 需要準備一台 Windows / Mac 電腦
- 具有 HTML, CSS 觀念，並且熟悉 JavaScript
- 有習慣的文字編輯器或是可以使用我們推薦的 VSCode
Description
複雜邏輯簡單化！
使用 Vue.js 讓開發超優雅！
Vue.js 的雙向綁定特色，讓許多剛接觸的開發者愛不釋手，大幅減短開發所需要的程式碼，且簡化許多開發上的邏輯。
且不斷壯大的社群，更延伸出許多開發工具，無論是活動網頁、控制台、SPA(單頁式應用程式) 甚至是搭配 Webpack 都有完整的解決方案，讓入門、資深開發者都可相互配合。
多項特色凝聚一身
Vue.js 超狂趨勢勢不可當
中文學習超 Easy 套件資源豐富多
Vue.js 是由前 Google 中國工程師(Evan You)所開發，上線後由 PHP 社群所推廣，此後有大量的華人投入相關資源的建立，因此有大量的中文資源可以取用。不僅如此，其相關所延伸的套件也多有中文說明喔。
雙向綁定技術 資料邏輯超簡單
傳統 JavaScript 與框架都是以 DOM 為基礎作為操作，雖概念上似乎直觀但卻不好維護，Vue.js 參考 MVVM 的概念延伸出雙向綁定的邏輯，讓開發更著重於 “資料狀態” 上，使得原始碼同時友好開發、易維護的特性。
元件化開發增加程式碼可用性
Vue.js 非常強調元件化模組，在此概念下許多程式碼都可以不斷重複使用；且多人開發時搭配 Vue.js 的簡單邏輯，可減少開發上的衝突，讓團隊程式碼具有更穩固的一致性。
本課程將會包含以下內容：
- Vue 原理與運作
- Vue 與 Webpack Cli 工具使用
- Vue Router
- 提供範例 API，開發出一個電商網站
Who this course is for:
- 聽過 Vue js，並對此感興趣的開發者
- 想要有更好前端開發體驗的開發者
- 有單頁應用程式開發需求者