TibaMe
系統初始化失敗,請重新整理頁面
若持續無法載入頁面,請 聯絡客服

Nat

Let’s Vue! 前端開發入門到實戰

NT$2,200
軟體開發網頁開發

如果Angular或React對你來說太複雜,操作起來不夠靈活,那你真應該來學習超易上手的Vue!2018年Vue.js於Github的星星數完美展現它的熱門度;想成為前端工程師的您,快跟著長期深更在資訊領域的Nat老師,投入Vue.js的保證值回票價!

NT$2,200

2019/01/18

【課程通知】Let's Vue! 前端開發入門到實戰

<span style="font-size: 18px;">同學們早安!</span><br><br><span style="font-size: 18px;">Let's Vue課程全部內容,<br>以及額外提供的【上傳圖片自動縮放範例】都已全部上傳完成啦~</span><br><br><span style="font-size: 18px;"><a href="https://www.tibame.com/course/421">⇒回到課程</a></span><br><br><span style="font-size: 18px;">學習與實作的過程中,</span><br><span style="font-size: 18px;">若有任何問題都可利用<span style="color: #0000ff;">課程討論區</span>與老師交流交流喔<img alt="smile" src="https://cdn-static.tibame.com/js/tinymce/4.6.6/plugins/emoticons/img/smiley-smile.gif"></span><br><br><span style="font-size: 18px;">TibaMe助教</span>
2018/12/01

感恩老師!讚嘆老師!

各位同學好~<br><br>【Let's Vue! 前端開發入門到實戰】的7~9單元原定於11/21上傳完成,<br>因Nat老師近期感冒,一直到這週才好,外加碰到工作趕工時期!!<br>得再延後一次延至<strong>12/15</strong>,還請同學們多多包涵。<br><br>感謝老師為表歉意將額外加碼~~<br>12月底會多錄製一個上傳圖片自動縮放的範例當作補償!!<br>目前也跟老師商談再開第二門有關Laravel及第三門Laravel + Vue.js 實務開發應用課程!<br>各位11/30前已購課的學員,屆時小白都會額外給各位比特價還更棒的優惠!!<br>還請各位敬請期待!!<br>如有任何問題,都歡迎隨時與小白聯繫囉!!<br><br>TibaMe 小白 ( e-mail: <a href="mailto:[email protected]">[email protected]</a> )
2018/11/16

【Let's Vue! 前端開發入門到實戰】課程時間異動通知

<span style="font-size: 18px;">各位同學好~</span><br><br><br><span style="font-size: 18px;">【Let's Vue! 前端開發入門到實戰】的7~9單元原定於11/21上傳完成,<br>因Nat老師近期感冒、喉嚨不適,</span><br><span style="font-size: 18px;">故課程全數上傳時間延至<strong><span style="color: #0000ff;">11/30</span></strong>,還請同學們多多包涵。</span><br><br><br><span style="font-size: 18px;">若有任何有關<strong>Vue.js</strong>的問題,仍可於<strong>課程討論區</strong>詢問,<br>Nat老師會熱心會同學們解答的~~<br><br>祝大家學習愉快<img alt="laughing" src="https://cdn-static.tibame.com/js/tinymce/4.6.6/plugins/emoticons/img/smiley-laughing.gif"><br><br>TibaMe 助教</span>
2018/10/24

【Let's Vue! 前端開發入門到實戰】課程時間異動通知

<span style="font-size: 18px;">各位學員大家好</span><br><br><span style="font-size: 18px;">【Let's Vue! 前端開發入門到實戰】的4~6單元原定於10/24上傳完成,</span><br><span style="font-size: 18px;">因Nat老師近期事務繁忙,進度稍有延遲</span><br><span style="font-size: 18px;">老師已加緊腳步錄製課程中,還請大家耐心等候老師<span style="color: #000000;">一週</span>的時間,</span><br><span style="font-size: 18px;">新的單元將於<span style="font-size: 24px; color: #0000ff;">10/31</span>跟大家見面!</span><br><br><br><span style="font-size: 18px;">如果在學習中有任何問題或心得,皆可利用課程討論區留言喔!</span><br><br>TibaMe助教

最新討論

執行 vue list發生connect ETIMEDOUT 20.27.177.116:443
Jason Chang · 2022/10/05 15:57
yarn安裝vue-cli後, 系統找不到vue指定
Jason Chang · 2022/10/05 15:54
vuex那部份
trevor · 2020/03/05 19:12
您好,請問第8及第9章的範例大概什麼時候會update上去?謝謝
Cheng John · 2019/10/20 20:31
想請問老師有課程範例可以下載嗎
徐翌騫 · 2018/12/01 20:41
查看更多討論

課程資訊

default clock課程時長 11 小時 4 分
default video課程共 10 單元 60 小節
default download9 個可下載的 學習資源
icon_info_certificate提供完訓證書
default plan提供制定 學習計畫建議學習 6 週 (每週 2 小時)
最新公告
2019/01/18

【課程通知】Let's Vue! 前端開發入門到實戰

<span style="font-size: 18px;">同學們早安!</span><br><br><span style="font-size: 18px;">Let's Vue課程全部內容,<br>以及額外提供的【上傳圖片自動縮放範例】都已全部上傳完成啦~</span><br><br><span style="font-size: 18px;"><a href="https://www.tibame.com/course/421">⇒回到課程</a></span><br><br><span style="font-size: 18px;">學習與實作的過程中,</span><br><span style="font-size: 18px;">若有任何問題都可利用<span style="color: #0000ff;">課程討論區</span>與老師交流交流喔<img alt="smile" src="https://cdn-static.tibame.com/js/tinymce/4.6.6/plugins/emoticons/img/smiley-smile.gif"></span><br><br><span style="font-size: 18px;">TibaMe助教</span>

適合對象

1~3年前端工程師
1~3年全端工程師
網頁設計師
SOHO
想轉職的人

你可以學到


這門課讓您
能夠獨立建構 
Vue.js 開發環境
能夠開發獨自的元件庫
具備 Ajax 基礎介接能力

能撰寫出內容管理網站後台之介面 

課程介紹



坊間自學Vue.js,皆為照本宣科的一步步踏實學習,但距離業界實戰仍是有很大一段距離,能有業界老師來帶領,方能快速打破迷思,讓前端開發功力穩定成長。


程式碼一定要自己Keyin出來一遍!坊間教學為了強化教學內容的豐富性,讓初學者誤以為買到便宜又大碗的課程,最後的學習成效還是無法學以致用。本課程您會看到老師親自Keyin給您看,一步一步帶著您引導實作完成,同樣一個功能案例,在不同的章節都會由淺入深的實際使用,以利讓您融會貫通。


前端學無止境,資訊技術需要不斷的學習與累績實作經驗,跟Nat老師一起學習Vue.js,能把您過去所寫的麵條式的jQuery/JS程式,淬鍊成寫法簡潔、更好維護之程式碼。此外,加上Vue的雙向綁定特性,更容易寫出 UX 更好的介面,讓您今後開發的網站能夠更為提升使用者經驗,就此開始擁有好"薪"情。


三大框架之一的Vue.js,集結了 React.js Angular.js 的優點,提升前端工程師開發的體驗。本課程將透過一系列的教學幫助學員建立從基礎開發環境建置到Vue.js的介面開發及實作能力。

1. Vue 環境建置

2. Vue.js 及 WorkFlow 簡介
3. 資料登錄及更新
4. 表單輸入及事件操作
5. 資料監聽及客製化
6. 元件製作
7. Ajax
8. Vuex 狀態管理
9. VueRouter SPA操作

點選上方『課程內容』有更詳細的課程介紹
若還有其他問題,可至『課前提問』與老師討論喔!

學習前基本能力

略懂HTML 5
知道CSS 3
基礎的 Javascript

//本課程不適合完全沒基礎的學員,但老師的引導與實作技巧能夠讓您不用擔心學不會
建議沒學過前端的可以先參考→3天!動手寫網頁 (實戰系列)

學習前準備

操不壞的電腦 ( 不限廠牌,建議處理器:雙核心、Intel Core i5 )
一顆想學習的心。


課程資訊

default clock課程時長 11 小時 4 分
default video課程共 10 單元 60 小節
default download9 個可下載的 學習資源
icon_info_certificate提供完訓證書
default plan提供制定 學習計畫建議學習 6 週 (每週 2 小時)

關於講師

Nat

長期深耕在資訊領域的資訊人,喜歡學習新事物,過往曾參與過學界科專計劃與大學教授共同研發知識管理平台。目前專注於資訊網路相關前後端技術,專長如下:

【前端技術】
1. HTML5 + CSS3
2. Javascript
3. Vue.js
4. Webpack

【後端技術】
1. 作業系統:Windows Server / CentOS
2. 程式設計:PHP, Laravel, VBA
3. 資料庫:MySQL, MariaDB, MongoDB
4. Web Server:Nginx, Apache
5. 佈署:Docker, Ansible, Shell Script
1. Vue 環境建置
7 小節
video common icon

開發環境需求

試看
video common icon

Mac 開發環境建置

05:34
video common icon

Windows 開發環境建置

video common icon

Javascript 套件管理 - package.json

video common icon

套件管理工具 - NPM 簡介

video common icon

套件管理工具 - NPM 基礎操作

video common icon

套件管理工具 - YARN

2. Vue.js 及 WorkFlow 簡介
4 小節
video common icon

MVX 及 Flux 基礎概念

video common icon

Vue.js 特性及生命週期

試看
video common icon

Vue.js 起手式 - Hello world!

08:31
video common icon

Vue.js 基本操作

3. 資料登錄及更新
6 小節
video common icon

文字資料的綁定與更新1 - 計數器

video common icon

文字資料的綁定與更新2 - 樣式切換 (v-bind)

video common icon

文字資料的綁定與更新3 - 圓形大小切換 (v-model)

video common icon

陣列資料的綁定 - 網站輪播圖

video common icon

陣列資料的綁定與更新 - 清單項目增減

video common icon

$el 及 $ref 操作

4. 表單輸入及事件操作
9 小節
video common icon

表單輸入雙向綁定 - 基礎表單元件

video common icon

事件處理1 - v-on 基礎說明

video common icon

事件處理2 - 計數器 (v-on:click)

video common icon

事件處理3 - 檔案上傳 (v-on:change)

video common icon

事件處理4 - 樣式切換 (v-on:mouseover/mouseleave)

video common icon

修飾子1 - 事件修飾子

video common icon

修飾子2 - 鍵盤事件(v-on:keyup)與按鍵修飾子

video common icon

表單綜合操作1 - 聯絡我們表單

video common icon

表單綜合操作2 - 會員資料申請表單

5. 資料監聽及客製化
6 小節
video common icon

自定義組合變數 - computed

video common icon

資料監聽變化及自動化處理1 - watch基本語法

video common icon

資料監聽變化及自動化處理2 - 商品總價計算

video common icon

資料監聽變化及自動化處理3 - 子從類別切換

video common icon

字串過濾處理 - filter

video common icon

異步更新DOM - nextTick

6. 元件製作
7 小節
video common icon

Vue CLI 操作

video common icon

建立及使用元件

video common icon

元件間的資料傳遞1 - 父層傳子層

video common icon

元件間的資料傳遞2 - 子層傳父層 $emit

video common icon

元件間的資料傳遞3 - 取得vue主體的資料

video common icon

元件間的資料傳遞4 - 透過$ref取得子元件

video common icon

元件的客製化區域

7. Ajax
7 小節
video common icon

HTTP 及 Restful API 簡介

video common icon

XHR 與 Ajax

video common icon

Javascript 異步處理 - Promise

video common icon

使用 jQuery 實作 AJAX

video common icon

使用 axios 實作 AJAX

video common icon

Fetch 與 Request

video common icon

Javascript 異步處理 - async/await

8. Vuex 狀態管理
5 小節
video common icon

Vuex 基礎概念

video common icon

Vuex 基本操作 (state)

video common icon

Vuex - 產品資料處理 ( gatters )

video common icon

Vuex - 商品總價計算 (mutations 與 actions)

video common icon

Vuex 模組化

9. Vue SPA
6 小節
video common icon

SPA 介紹與基礎實作

video common icon

VueRouter 概念及操作

video common icon

Babel 介紹

video common icon

Webpack 基礎結構

video common icon

Webpack - rule 及 loader

video common icon

Webpack - devtool 及 devServer

10. 【課程Bonus】自動縮放圖片
3 小節
video common icon

圖片處理基礎 - FileReader 與 DataURL

video common icon

圖片繪製 - canvas

video common icon

圖片自動縮放

學習附件

file-icon
ch2.zip
3.55 KB
stage arrow to bottom
file-icon
ch3.zip
1.21 MB
stage arrow to bottom
file-icon
ch4.zip
2.74 MB
stage arrow to bottom
file-icon
ch5.zip
15.23 KB
stage arrow to bottom
file-icon
ch6.zip
39.55 KB
stage arrow to bottom
file-icon
ch7.zip
10.63 KB
stage arrow to bottom
file-icon
ch9.zip
6.09 MB
stage arrow to bottom
file-icon
ch10.zip
5.99 MB
stage arrow to bottom
file-icon
vue8.zip
401.80 KB
stage arrow to bottom

購買此課程後,才能使用留言功能

沒有回應的問題

目前尚無任何討論主題

成為第一個發問的人!在問答中找到學習的捷徑。

關於講師

Nat

長期深耕在資訊領域的資訊人,喜歡學習新事物,過往曾參與過學界科專計劃與大學教授共同研發知識管理平台。目前專注於資訊網路相關前後端技術,專長如下:

【前端技術】
1. HTML5 + CSS3
2. Javascript
3. Vue.js
4. Webpack

【後端技術】
1. 作業系統:Windows Server / CentOS
2. 程式設計:PHP, Laravel, VBA
3. 資料庫:MySQL, MariaDB, MongoDB
4. Web Server:Nginx, Apache
5. 佈署:Docker, Ansible, Shell Script
立即加入成為Line官方好友
become line friend
返回主選單
課程類型
影音課程
直播課程
實體課程
返回主選單
返回主選單
返回主選單
返回主選單