![](https://firebasestorage.googleapis.com/v0/b/hexschool-api.appspot.com/o/tutorials%2Fvue%2Fvue_girl_banner%402x.png?alt=media&token=df354537-5aa6-4fc2-b0a5-11795a209d12)
深不可測的前端領域中
你有這些問題嗎?
![](https://firebasestorage.googleapis.com/v0/b/hexschool-api.appspot.com/o/tutorials%2Fvue%2Fcomic-1.png?alt=media&token=a0761999-05e5-4ae9-87bd-d8bba42fff6a)
後端資料一大堆
與畫面的互動總是搞不定
![](https://firebasestorage.googleapis.com/v0/b/hexschool-api.appspot.com/o/tutorials%2Fvue%2Fcomic-2.png?alt=media&token=65b28074-2ede-439e-8f05-65d37d892f8d)
跳槽想找好工作
但不會框架無法獲得更好薪資
![](https://firebasestorage.googleapis.com/v0/b/hexschool-api.appspot.com/o/tutorials%2Fvue%2Fcomic-3.png?alt=media&token=2137db1a-6ae8-48cf-b760-49bfa676bacc)
聽到 SPA (單頁應用程式)
卻不知如何入門嗎
複雜邏輯簡單化!
使用 Vue.js 讓開發超優雅!
Vue.js 的雙向綁定特色,讓許多剛接觸的開發者愛不釋手,大幅減短開發所需要的程式碼,且簡化許多開發上的邏輯。
且不斷壯大的社群,更延伸出許多開發工具,無論是活動網頁、控制台、SPA (單頁式應用程式) 甚至是搭配 Webpack 都有完整的解決方案,讓入門、資深開發者都可相互配合。
Vue.js 在 Github 的關注數量目前也超越了其它框架,是目前相當主流的 JavaScript 框架。
![](https://firebasestorage.googleapis.com/v0/b/hexschool-api.appspot.com/o/tutorials%2Fvue%2Fvue_feature%402x.png?alt=media&token=90277863-19f0-4e12-9dc0-1399815db43d)
多項特色凝聚一身
Vue.js 超狂趨勢勢不可當
![](https://firebasestorage.googleapis.com/v0/b/hexschool-api.appspot.com/o/tutorials%2Fvue%2Ffeature_chinese%402x.png?alt=media&token=eff1e4f8-6432-4b6e-aaad-2ddde0339ee4)
中文學習超 Easy
套件資源豐富多
Vue.js 是由前 Google 中國工程師 (Evan You) 所開發,上線後由 PHP 社群所推廣,此後有大量的華人投入相關資源的建立,因此有大量的中文資源可以取用。不僅如此,其相關所延伸的套件也多有中文說明喔。
![](https://firebasestorage.googleapis.com/v0/b/hexschool-api.appspot.com/o/tutorials%2Fvue%2Ffeatire_mvvm%402x.png?alt=media&token=a2fcd58c-293d-4592-be78-001074c072f0)
雙向綁定技術
資料邏輯超簡單
傳統 JavaScript 與框架都是以 DOM 為基礎作為操作,雖概念上似乎直觀但卻不好維護,Vue.js 參考 MVVM 的概念延伸出雙向綁定的邏輯,讓開發更著重於 "資料狀態" 上,使得原始碼同時友好開發、易維護的特性。
![](https://firebasestorage.googleapis.com/v0/b/hexschool-api.appspot.com/o/tutorials%2Fvue%2Ffeature_component%402x.png?alt=media&token=ab0e48dd-530a-4564-b293-867de50a2804)
元件化開發
增加程式碼可用性
Vue.js 非常強調元件化模組,在此概念下許多程式碼都可以不斷重複使用;且多人開發時搭配 Vue.js 的簡單邏輯,可減少開發上的衝突,讓團隊程式碼具有更穩固的一致性。
讓六角學院
帶您一同攻略 Vue.js
六角學院,是一所結合各項國際教學資源的線上學院,迄今已獲得 57 個國家、超過 13,000 名學員的教學好評。
我們致力於提供各項程式、網頁、設計等現代工程師、網頁設計師必備的專業課程。
Vue.js 相關影片在 Youtube 有五萬點閱率,在此更推出 Vue.js 完整教學課程(六角學院 Vue.js 相關免費教學)。
全新 Vue.js 課程
涵蓋理論與實例,讓你職場無往不利
![](https://firebasestorage.googleapis.com/v0/b/hexschool-api.appspot.com/o/tutorials%2Fvue%2Fcourse_demo%402x.png?alt=media&token=fa38326e-ba77-4cbf-bfcd-1bda23d48aa2)
三十組以上的教學範例
從基礎到進階不需從切版開始學
提供完整教學範例從練習到實做。讓你不是只會做,還知道為什麼要這麼做,實戰上更能提攜後進一同前進。
![](https://firebasestorage.googleapis.com/v0/b/hexschool-api.appspot.com/o/tutorials%2Fvue%2Fcourse_webpack%402x.png?alt=media&token=a5f88c44-ac25-4930-864e-b9d350dbbbb2)
二階段學習體驗
從初級模板到 Webpack
Vue.js 提供漸進式的開發體驗,能輕鬆融入先有專案或全新開發單頁式應用程式。特有的教材內容讓同學不僅學習基礎概念,進入進階課程時更能有融會貫通的體驗。
![](https://firebasestorage.googleapis.com/v0/b/hexschool-api.appspot.com/o/tutorials%2Fvue%2Fcourse_api%402x.png?alt=media&token=a1381c63-52ac-47d9-a4b3-79ac062b7679)
提供一式完整 API
前後台開發完整練習
課程後方我們提供完整的電商前後台模擬 API,讓每位同學可以透過 API 體驗商品建立、分頁、驗證、優惠券、檔案上傳等實戰技巧。
(2018/6/30 上線)
加入六角學院
與 13,000 人一同學習
全新 Vue.js 系列課程
搶先學習中
帶您掌握全新 Vue.js,學會主流開發 JS,前端開發超級有意思!
![](https://firebasestorage.googleapis.com/v0/b/hexschool-api.appspot.com/o/tutorials%2Fvue%2Fvue_girl_yes%402x.png?alt=media&token=163c6d77-a0bc-4646-b678-19ce92a5554f)
專精 Vue.js 的優秀師資
能從設計與程式角度,給予多元協助!
加值服務不加價!
隨時替您的專業充電更新!
![](https://firebasestorage.googleapis.com/v0/b/hexschool-api.appspot.com/o/tutorials%2Fbootstrap%2Fsection_avator.jpg?alt=media&token=d0ba3833-abcc-404b-9554-ac99b274cd0f)
前端工程師 王志誠老師
由設計投入前端的軟體工程師,了解設計語言的前端佈道者。
相關經歷:
![](https://firebasestorage.googleapis.com/v0/b/hexschool-api.appspot.com/o/tutorials%2Fbootstrap%2Fsection_ksf2e.png?alt=media&token=61a621bb-34ac-4cbb-abf0-3a9b3baaae4c)
高雄前端社群
核心成員
![](https://firebasestorage.googleapis.com/v0/b/hexschool-api.appspot.com/o/tutorials%2Fbootstrap%2Fsection_modernweb.png?alt=media&token=624c3bab-b6bb-4cdc-980a-f06a4864330b)
Morden Web
研討會講者
![](https://firebasestorage.googleapis.com/v0/b/hexschool-api.appspot.com/o/tutorials%2Fbootstrap%2Fsection_ithome.png?alt=media&token=ad09cae0-312a-4318-9701-f660fd5e9ff9)
連續四屆 IT 鐵人邦
優選
![](https://firebasestorage.googleapis.com/v0/b/hexschool-api.appspot.com/o/tutorials%2Fvue%2Fsection_online_meeting%402x.png?alt=media&token=0a82223e-990f-4166-a959-aa18ef756bab)
週週線上問答
定時增強你的觀念
我們每周三晚上定期會舉行線上問答課程,除了解決問題外,老師還會分享許多業界經驗喔!
![](https://firebasestorage.googleapis.com/v0/b/hexschool-api.appspot.com/o/tutorials%2Fvue%2Fsection_jobs%402x.png?alt=media&token=ab1d923d-6101-4f7a-8023-ec0efde3ee2e)
免費職涯諮詢
提供您各項轉職資源
我們有免費的職涯、轉職服務,迄今已幫上超過百位學員媒合到適合的工作。
![](https://firebasestorage.googleapis.com/v0/b/hexschool-api.appspot.com/o/tutorials%2Fvue%2Fsection_udemy_qa%402x.png?alt=media&token=5b29ac96-da78-40cc-97f8-9d113fe859fd)
了解您的心中結
打造線上程式諮詢服務
不管你在練習、作業甚至是工作上,都可以隨時在 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 日內 全額退費