五倍紅寶石・專業程式教育機構

Vue.js 與 Vuex 前端開發實戰

課程特色
講師介紹
學員見證
作品大公開
課程大綱

首頁短期課程 Vue.js 與 Vuex 前端開發實戰

五倍的五倍券優惠活動

Vue.js 與 Vuex 前端開發實戰

入手 Vue.js ，開啟前端框架之旅！

身為新手工程師，想找一個入門檻低的前端框架來學習嗎？
即使看過 MVC 、MVVC 相關文件，卻還是搞不懂這些原理嗎？
想讓團隊內導入框架，卻擔心導入摩擦力過高、學習成本過高嗎？
網站前端一直都是用 jQuery 開發，但程式碼結構越複雜時，時常改到別人寫的 DOM 或是時常不知道 DOM 有沒有被其他事件綁定。
如果你有以上煩惱，不妨考慮 Vue.js 這款輕量、入門檻底的前端框架喔！透過 Vue.js 簡單的 API 實作能讓你更容易感受到前端框架運作的原理。
掌握了 Vue.js 再轉換 React / Angular 等其他框架，也相對容易喔！

課程特色

往前端工程師之路發展時，求職一定會遇到公司要求會一些前端框架。你是否也在煩惱應該學習哪一個前端框架呢？

對於尚未接觸過框架的朋友，也許可以考慮 Vue.js 作為你的前端框架入門喔！

✨ 入門檻低易於上手

Vue.js 除了豐富的中文文件、套件社群支持外，最大的特色是它的學習門檻較低，只需要有 HTML / CSS / JavaScript 基礎，就可以上手喔！

✨ 簡單的 API

Vue.js 的 API 相當的簡潔，在 HTML 模板、 Vue component 檔案內，透過這些 API 不僅易於團隊理解，也簡化了撰寫方式，讓開發者更專注在資料內容、判斷式等。

✨ MVVM 模式

MVVM 的 ViewModel 可以讓資料(Data) 同時驅動頁面 (View) 渲染與更新，並監聽 (DOM Listeners) 頁面 (View) 狀態後回存 Model 的資料中。

能在複雜的商業邏輯、產品架構下，透過『資料驅動』頁面渲染，讓開發者專注在『如何管理狀態』、『資料處理』上。

✨ 元件系統

Vue.js 的元件系統是它的另一個特色，相對於 HTML 最小的單位是一個 DOM 節點，Vue.js 的元件系統提供開發者針對不同需求，將一部分的 HTML 模板封裝成一個元件 (component)，開發者可以在這個 component 內寫入 HTML / JavaScript / CSS ，開發過程可以專注在這個元件上的樣式變化。

✨ 輕量導入的漸進式框架

想要嘗試導入 Vue.js 卻擔心，要一次導入的專案成本過大嗎？ Vue.js 提供 CDN 的方式引入，不用安裝 node.js 、yarn，隨裝即用的特性讓開發者在 HTML 內立刻使用 Vue.js 喔！

💡 課程提醒：
這門課屬於進階課程，建議學員需具備 HTML/CSS/JavaScript 基礎知識再來修習喔！建議：
1. 有上過『網頁前端設計女性專班』或『JavaScript / jQuery 前端開發入門實戰』的朋友。
2. 具有 HTML/CSS/JavaScript 基礎知識的朋友。

立即報名

許國政

Kuro Hsu

講師簡介

業界資深前端開發者，為臺灣各大型技術研討會 JSDC、WebConf、MOPCON、COSCUP 的知名講者。

於 2019 年出版「0 陷阱！0 誤解！8 天重新認識 JavaScript！」，攻佔各大技術書籍排行榜。

同時身兼 Vue.js Taiwan 社群主辦人，主辦的活動場場秒殺一票難求，衍伸開發的週邊商品精緻實用，譽為被程式耽誤的週邊商品業者。

適合對象

上過課的同學怎麼說︖

我非常喜歡 Kuro 老師的教學節奏和口條。我是個反應不是很好的人，他的節奏雖不是很慢，但配合著他的教學口條，卻讓我沉浸在他的授課內容中而慢慢變強卻不自知。講師能力強的人很多，但會教的並不多，非常感謝五倍開了這堂課，讓我可以在業界多混個幾年。

張君廉 / 奧斯卡

課程脈絡清晰、範例眾多！觀念建立清楚，讓學生能夠在課後自我充實，並提供詢問管道，以後碰到問題不怕求助無門，在有限的時間獲得無限收穫！

劉璞

Kuro 老師對於 Vue.js 的講解詳細清楚，先建立正確的邏輯思考，搭配實做的訓練幫助同學們快速上手。

王辰恩

在章節的配置上，我認為老師把該講的觀念跟學習的範疇都有教學．整體評價來說，我還是很推崇想要學習Vue 的可以去上老師開設的課程。

Noobmaster

課程大綱

Vue.js 基礎概念簡介

Vue.js 基礎知識原理講解
Vue.js 與單頁式網頁應用基礎
Vue.js 與 Web Component

Vue.js 與狀態管理實務

理解狀態管理 Vuex
Vue.js Composition API
透過 VueCLI / vite 建立 Vue 3.0 專案

Vue.js 進階開發實務

在 Vue.js 專案與第三方套件搭配
Vue.js 相關開發生態圈介紹
Vue.js 2.x > 3.0 升級指引

立即報名

扎實課程搶先看

基礎與單頁式網頁應用

除了課程特色提到的 Vue.js 特點外，這門課還回從 Vue.js 的概念與原理 開始，到如何搭配 AJAX 技術，讓你具備提升使用者體驗不可或缺的技術！

接著透過實作時間了解如何用 Vue.js 打造 SPA（單頁式應用程式），實際體驗 Vue.js 雙向綁定的特性如何有效節省維護時間，未來在活動網頁、控制台、SPA 甚至是搭配 Webpack，都可以廣泛的運用！

元件系統與開發生態圈

Vue.js 的另一大特性是非常強調元件系統 (Component System)，許多程式碼可以重複使用，除了減少開發衝突，也讓團隊的程式碼邏輯更一致，後期維護與修改都相當便利快速。另外也會講到後端介接、發佈與伺服器端渲染機制，讓身為前端的你與後端工程師在開發實務上溝通更加無障礙！

習得基礎概念與實作技能後，瞭解各個框架的開發生態圈也是非常重要的！未來在學習 Vue.js 的路上除了與老師和同學一起學習成長以外，瞭解 Vue.js 還可以搭配哪些工具，以及整個生態圈的發展、和其他現代前端框架的差異，讓你擁有更宏觀的技術概念。