
深不可測的前端領域中
你有這些問題嗎?

後端資料一大堆
與畫面的互動總是搞不定

跳槽想找好工作
但不會框架無法獲得更好薪資

聽到 SPA (單頁應用程式)
卻不知如何入門嗎
複雜邏輯簡單化!
使用 Vue.js 讓開發超優雅!
Vue.js 的雙向綁定特色,讓許多剛接觸的開發者愛不釋手,大幅減短開發所需要的程式碼,且簡化許多開發上的邏輯。
且不斷壯大的社群,更延伸出許多開發工具,無論是活動網頁、控制台、SPA (單頁式應用程式) 甚至是搭配 Webpack 都有完整的解決方案,讓入門、資深開發者都可相互配合。
Vue.js 在 Github 的關注數量目前也超越了其它框架,是目前相當主流的 JavaScript 框架。

多項特色凝聚一身
Vue.js 超狂趨勢勢不可當

中文學習超 Easy
套件資源豐富多
Vue.js 是由前 Google 中國工程師 (Evan You) 所開發,上線後由 PHP 社群所推廣,此後有大量的華人投入相關資源的建立,因此有大量的中文資源可以取用。不僅如此,其相關所延伸的套件也多有中文說明喔。

雙向綁定技術
資料邏輯超簡單
傳統 JavaScript 與框架都是以 DOM 為基礎作為操作,雖概念上似乎直觀但卻不好維護,Vue.js 參考 MVVM 的概念延伸出雙向綁定的邏輯,讓開發更著重於 "資料狀態" 上,使得原始碼同時友好開發、易維護的特性。

元件化開發
增加程式碼可用性
Vue.js 非常強調元件化模組,在此概念下許多程式碼都可以不斷重複使用;且多人開發時搭配 Vue.js 的簡單邏輯,可減少開發上的衝突,讓團隊程式碼具有更穩固的一致性。
讓六角學院
帶您一同攻略 Vue.js
六角學院,是一所結合各項國際教學資源的線上學院,迄今已獲得 57 個國家、超過 13,000 名學員的教學好評。
我們致力於提供各項程式、網頁、設計等現代工程師、網頁設計師必備的專業課程。
Vue.js 相關影片在 Youtube 有五萬點閱率,在此更推出 Vue.js 完整教學課程(六角學院 Vue.js 相關免費教學)。
全新 Vue.js 課程
涵蓋理論與實例,讓你職場無往不利

三十組以上的教學範例
從基礎到進階不需從切版開始學
提供完整教學範例從練習到實做。讓你不是只會做,還知道為什麼要這麼做,實戰上更能提攜後進一同前進。

二階段學習體驗
從初級模板到 Webpack
Vue.js 提供漸進式的開發體驗,能輕鬆融入先有專案或全新開發單頁式應用程式。特有的教材內容讓同學不僅學習基礎概念,進入進階課程時更能有融會貫通的體驗。

提供一式完整 API
前後台開發完整練習
課程後方我們提供完整的電商前後台模擬 API,讓每位同學可以透過 API 體驗商品建立、分頁、驗證、優惠券、檔案上傳等實戰技巧。
(2018/6/30 上線)
加入六角學院
與 13,000 人一同學習
全新 Vue.js 系列課程
搶先學習中
帶您掌握全新 Vue.js,學會主流開發 JS,前端開發超級有意思!

專精 Vue.js 的優秀師資
能從設計與程式角度,給予多元協助!
加值服務不加價!
隨時替您的專業充電更新!

前端工程師 王志誠老師
由設計投入前端的軟體工程師,了解設計語言的前端佈道者。
相關經歷:

高雄前端社群
核心成員

Morden Web
研討會講者

連續四屆 IT 鐵人邦
優選

週週線上問答
定時增強你的觀念
我們每周三晚上定期會舉行線上問答課程,除了解決問題外,老師還會分享許多業界經驗喔!

免費職涯諮詢
提供您各項轉職資源
我們有免費的職涯、轉職服務,迄今已幫上超過百位學員媒合到適合的工作。

了解您的心中結
打造線上程式諮詢服務
不管你在練習、作業甚至是工作上,都可以隨時在 Udemy 平台上發問,我們的問題回覆率是 100% 唷!
課程大綱
- 課程資源連結
- 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)
- 基礎章節測驗
- 課程架構及流程說明 (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)
- 最終作業寄送變更
- 最終作業文件
現在上課去 NT$ 3200
不滿意 30 日內 全額退費