打造前端職人力：JavaScript + Vue3 + Nuxt.js｜HiSKIO

arrow

新型態全方位內容

這是一套專門「解決工作上實際問題」的全新組合，業界開發經驗多年的 Mike 老師，帶你省下大把時間，縮小 junior 到 senior 的差異，再造你的前端競爭力！

現代 JavaScript 職人之路-入門、進階、實戰、面試詳解組合

3 堂US$510.92
plus-icon

2022 Vue 3 專業職人完成組合 | 入門篇＋進階篇＋加值篇

3 堂US$302.78
plus-icon

加碼課程 - 延伸補充業界最新知識

12 次US$188.92
plus-icon

專屬即時交流社團 - 與其他開發者一起交流，並緊跟最新技術趨勢

450 位以上學員
plus-icon

US$1,002.63US$267.77

6 堂線上課程章節表

    • 單元 1 - 講義跟範例下載網址

    • 單元 2 - 範例下載

      02:01

    • 單元 3 - 網頁技術專有名詞介紹

      04:03

    • 單元 4 - 原始碼與程式

      03:06

    • 單元 5 - 程式執行與環境

      02:23

    • 單元 6 - javascript、jquery傻傻分不清？

      02:12

    • 單元 7 - 前端與後端

      04:41

    • 單元 8 - ECMAScript

      03:33

    • 單元 1 - vscode 就是讚

      07:47

    • 單元 2 - chrome 開發者工具

      02:04

    • 單元 3 - LiveServer

      02:10

    • 單元 1 - 程式的執行順序

      03:57

    • 單元 2 - 什麼是DOM與載入順序還有onload事件

      09:02

    • 單元 3 - 不能不知道的console.log() - 1

      02:39

    • 單元 4 - 不能不知道的console.log() - 2

      02:13

    • 單元 5 - 變數與保留字 - 1

      03:37

    • 單元 6 - 變數與保留字 - 2

      02:31

    • 單元 7 - 變數與保留字 - 3

      02:15

    • 單元 8 - 你可能沒有注意的變數型別

      04:35

    • 單元 9 - 運算子（加減乘除）- 1

      08:35

    • 單元 10 - 運算子（加減乘除）- 2

      01:29

    • 單元 11 - 分號

      02:06

    • 單元 1 - 判斷式 if

      06:50

    • 單元 2 - 判斷式 if...else

      03:32

    • 單元 3 - 判斷式 if...else - 2

      03:16

    • 單元 4 - 判斷式 if ... else if

      06:23

    • 單元 5 - 三種等於的差別

      04:39

    • 單元 6 - switch 判斷式

      05:09

    • 單元 1 - 獲取DOM物件（ id ）

      03:33

    • 單元 2 - 獲取DOM物件（ class ）

      05:36

    • 單元 3 - 獲取DOM物件（ tag）

      02:21

    • 單元 4 - 什麼是 Function? 執行一下吧！

      04:21

    • 單元 5 - 常見的 onclick 事件

      06:57

    • 單元 6 - 操作DOM屬性

      05:50

    • 單元 7 - 操作DOM style

      06:02

    • 單元 8 - 匿名函式一下

      03:07

    • 單元 9 - 事件綁定的兩種寫法

      01:45

    • 單元 10 - innerHTML & innerText

      04:39

    • 單元 11 - 常用的window方法

      03:35

    • 單元 12 - onmouseover & onmouseout 事件

      03:07

    • 單元 13 - 照片牆展示切換 - 1

      10:52

    • 單元 14 - 照片牆展示切換 - 2

      06:20

    • 單元 15 - 照片牆展示切換 - 3

      03:22

    • 單元 16 - 照片牆展示切換 - 4-1

      02:57

    • 單元 17 - 照片牆展示切換 - 4-2

      07:45

    • 單元 18 - 照片牆展示切換 - 4-3

      05:54

    • 單元 19 - Substr補充

      04:07

    • 單元 1 - while迴圈 - 1

      09:08

    • 單元 2 - while迴圈 - 2

      07:17

    • 單元 3 - for迴圈 - 1

      06:38

    • 單元 4 - for迴圈 - 2-1

      07:25

    • 單元 5 - for迴圈 - 2-2

      03:37

    • 單元 6 - 全域變數與區域變數

      05:16

    • 單元 1 - 一般資料類型 & 複雜資料類型

      02:03

    • 單元 2 - 什麼是陣列?

      06:58

    • 單元 3 - 什麼是陣列? - 2-1

      09:54

    • 單元 4 - 什麼是陣列? - 2-2

      08:02

    • 單元 5 - 什麼是陣列? - 2-3

      01:53

    • 單元 6 - 陣列的基礎使用push

      02:23

    • 單元 7 - 陣列的基礎使用unshift

      01:44

    • 單元 8 - 陣列的基礎使用pop

      01:14

    • 單元 9 - 陣列的基礎使用shift

      00:55

    • 單元 10 - 清空陣列

      00:55

    • 單元 1 - 陣列迴圈應用

      07:37

    • 單元 1 - 增加移除 class

      04:27

    • 單元 2 - 切換 class

      03:45

    • 單元 3 - 檢查class

      08:04

    • 單元 4 - 選取狀態切換

      06:22

    • 單元 5 - 選取狀態切換更升級

      08:19

    • 單元 1 - 計時器 setInterval()

      06:00

    • 單元 2 - 計時器 setTimeout()

      04:22

    • 單元 3 - 計時器進階組合( 播放、暫停、重新 ) - 1

      05:04

    • 單元 4 - 計時器進階組合( 播放、暫停、重新 ) - 2

      06:04

    • 單元 5 - 計時器進階組合( 播放、暫停、重新 ) - 3

      06:44

    • 單元 6 - 計時器進階組合( 播放、暫停、重新 ) - 4

      02:13

    • 單元 7 - 照片牆自動撥放 - 1

      05:26

    • 單元 8 - 照片牆自動撥放 - 2

      06:03

    • 單元 9 - 照片牆自動撥放 - 3

      01:40

    • 單元 1 - $(document).ready

      07:38

    • 單元 2 - jquery 選取器

      04:20

    • 單元 3 - jquery事件

      04:26

    • 單元 4 - jquery後代選取器

      05:21

    • 單元 5 - show、hide - 1

      07:11

    • 單元 6 - show、hide - 2

      05:17

    • 單元 7 - fadeIn fadeOut - 1

      05:32

    • 單元 8 - fadeIn fadeOut - 2

      05:43

    • 單元 9 - attr 屬性設置

      04:43

    • 單元 10 - data attribute

      05:56

    • 單元 11 - jquery-class的4種姿勢

      06:44

    • 單元 12 - CSS & Style 的2種姿勢

      05:55

    • 單元 13 - scrollTop

      02:18

    • 單元 14 - 獲取物件的座標

      04:54

    • 單元 15 - animate&stop

      04:49

    • 單元 16 - 獲取物件的座標 - 2

      05:08

    • 單元 1 - 課堂總結

      03:35

    • 單元 1 - hoisting

      06:01

    • 單元 2 - 常見的數學函式Math - 1

      07:42

    • 單元 3 - 常見的數學函式Math - 2

      06:48

    • 單元 4 - JavaScript小數點的陷阱

      08:20

    • 業界講師推薦

    Vue.js Taiwan 社群主辦人

    Kuro

    comma 身為 Vue.js 技術傳教士，推薦這堂課給想要入門前端的朋友

    CSS 可樂站長

    Amos

    comma 任職補教界 10 多年的過來人，推薦 Mike 老師的教學熱忱及無限耐心

    國外知名企業 Line 資深前端工程師

    姚偉揚

    comma 初學者跌倒的地方，Mike 也曾經跌過，因此我相信他能夠教你怎樣去克服！

    台北前端社群版主

    Tommy

    comma Mike 從非本科系出身轉戰前端多年，最了解轉職者的痛，推薦給職涯轉換的你！

    上過課的學生怎麼說？

    鄭燕中

    我覺得老師課程很好的一點是每個小節都有範例，不用重複造輪子，而且不會變成看著老師照著打，但不了解其意。目前學習就是看一章，並且自行修改，看看 Vue 文件，並且搭配 Notion 筆記內化記憶，有了基本概念看官方文件或找 Error 就不會這麼痛苦了！

    HD Zang

    目前看完 Vue3 入門篇 91%，不只是學會框架的使用，還可以學到很多實用的良好開發慣例和細節觀念，這對我來說幫助很大，每堂課老師都相當用心的準備好對應的練習程式碼，並完整附上影片中示範的程式，是我上過 Hiskio 課程中附件最完整、最容易跟著課程實作並且最值回票價的課程！

    Micro Wang

    老師這系列的課程影片，都是有所用心編排，環環相扣，看第一遍可能還沒有什麼感覺，但當看了第二遍、第三遍之後不僅可以幫助學習還能幫助對功能的記憶，可以在假日的時候，從早上就開始一連串的這樣子看下去學習著！

    賴承彥

    超級深入淺出的一堂課，原本我怎麼學都學不會 JavaScript，但是上完 Mike 老師一系列的課程之後，才終於明白了「操作資料才是王道」這個簡單的道理。 Ps. 我沒看過這麼用心準備講義的老師，跟著老師的講義好好練習，真的很快就學起來了！

    Sho Huang

    Mike 老師講解十分清楚，就算是 JavaScript 新手，跟著老師的課程可以循序漸進的熟悉Javascript。特別的是，Mike 老師會用簡單的範例與圖示來進行觀念的講解，對像我這種設計系出身的人來說，幫助良多，我推薦這系列課程！

    Haha Huang

    一開始老師先從邏輯開始講起，本來有點疑惑，但進入到後面章節開始實作之後就豁然開朗了，而且詢問老師的問題，也很快能獲得解答，課程中不只教 JavaScript，連 jQuary 也有講，CP值很高～

    系統化的課程設計適合誰？

    未來想朝前端工程師發展的學生及轉職者

    有 HTML & CSS 基礎，但從未接觸過 JavaScript，想一次搞定 JavaScript 初階、中階語法，以及最熱門的前端框架 Vue 3，實作出應用當成作品集

    想擺脫只會切版的新手前端工程師

    有學過基本的 JavaScript 語法，但對於進階的應用不熟悉，也沒有學過任何前端框架，透過大量的實戰講義 + 情境實作範例，一次補足技能樹及產業經驗

    沒有學過任何框架或想學最新框架者

    專門針對入門者設計的框架課程，從了解什麼是框架，擺脫 Jquery 的思維，從 Vue2 學到 Vue3，具備 90% 企業需要的徵才條件

    帶你一步步突破職涯關卡

    flag關卡1
    student
    沒有程式基礎能力，轉職及學習門檻會不會很高？

    漸進式內容，從認識程式開始深厚 JavaScricpt 觀念，再教你如何面試

    step
    js

    為程式小白而設

    基礎入門課
    • ok了解業界好用的開發工具
    • ok從程式排版、命名規則、清楚註解、邏輯明確到版本控制，培養 coding 習慣
    • ok漸進式學習基礎語法、變數、陣列、迴圈、流程控制，培養程式邏輯能力
    • ok具備基本前端工程師技能
    js

    鍛鍊進階開發的能力

    中階實戰課
    • ok學會進階開發技巧
    • ok學習 JSON 應用，瞭解如何串伺服器與瀏覽器
    • ok攻略 axios 完成非同步處理使用
    • ok無痛升級 ES6，學習前後端分離，成為後端工程師的好隊友
    js

    下一階段的求職能力

    面試及工作指南
    • ok常見面試考題詳解，除了JavaScript 外，連常見的 CSS 題目都有講解
    • ok演算法解題，掌握演算法原理及思維
    • ok統整面試最愛考的 JavaScript 觀念題
    • ok框架實務經驗分享
    • ok團隊合作開發經驗分享
    yellow arrow
    flag關卡2
    student
    花錢花時間學習，卻做不出符合產業期待的作品集？

    實作大量課堂練習 ，豐富你的作品集功能，省時又省力

    js
    step

    練習一、網頁計時器

    教你用 JavaScript 必備Method - setTimeout() 打造計時器，並透過實作瞭解 setTimeout() 與 setInterval() 的差異

    js
    step

    練習二、照片牆

    認識從 DOM 物件及事件到照片牆展示、切換的技術，進階完成照片牆自動輪播技巧

    js
    step

    練習三、選單動畫

    整合 CSS ＆ jQuery 完成選單動畫效果

    flag關卡3
    student
    專案上需要立刻使用框架，但我完全沒學過該怎麼辦？

    從零開始帶你開發大型 SPA 網頁，擁有 框架應用實戰力

    vue

    入門 3 步驟，快速體驗真實開發流程，擁有 6 大實戰力

    vue
    • ok 了解框架是什麼，以及 Vue 3 的基礎架構
    • ok 對於資料綁定的概念清楚，且明白生命週期的定義
    • ok 針對不同情境，知道該如何選擇對的 API 使用方式
    • ok 知道如何設定 Vue-cli，處理開發問題
    • ok 能夠選擇適合的套件，並整合進 Vue 專案中
    • ok 能夠使用 Vuex 管理平台級的龐大資料，省去 30% 工作時間
    flag關卡4
    student
    官方文件、實體課程都試了，還是落後產業一大截？

    緊扣業界最新發展趨勢，打造 Vue2 ＆Vue3 即戰力

    vue

    當你和小明一樣，有個專案需求要用到 Vue3 ……

    • ok 提煉未來幾年都不過時的硬技能，學會業界愛用框架 No.1
    • ok 課程隨著 Vue 的最新版本 更新內容，並探討實際運用技巧
    • ok 除了教授 Vue2 外，也能帶你將舊專案 無痛升級至 Vue3
    flag關卡5
    student
    只會基礎框架，不懂前後端分離架構？

    學會 前端必備神器 Nuxt.js，做出具備 SEO 的 SSR 網站

    vue

    精準 3 步驟，掌握直達 senior 的關鍵 5 大能力

    step
    • ok 理解從 Vue-cli 所轉換 NUXT.js 的差別有哪些
    • ok拒絕重工，熟悉 SSR 製作上面的一些規範
    • ok 知道怎麼進行 Server 的相關設定
    • ok 能夠獨自規劃整個 API 的管理，以及在 Nuxt.js 的使用配合
    • ok 能夠修改頁面單獨處理的資料

    加碼課程精選 12 大主題

    live

    不藏私前端資源，一次打包

    講師介紹

    成智遠 Mike

    從設計師轉職的資深前端工程師，擅長互動技術與網頁前端，累積超過 500 個小時以上的授課經驗及多年的業界實務經驗。

    facebookgithubyoutube
    mike-lecturer

    Work

    • HiSKIO 前端技術顧問
    • Victor 資深前端工程師 & Team lead
    • Portal Network 資深前端工程師
    • 痞客邦PIXNET 資深前端工程師
    • 致理科技大學數位媒體設計系 網頁設計業師
    • AmazingTalker 資深前端工程師
    • 米蘭營銷策劃股份有限公司 前端工程師

    Meetup & Courses

    • 台北前端社群 版主
    • 台中前端社群 講者
    • Vue.tw 講者
    • THE F2E精神時光屋 講者
    • 跨國知名企業公司專業技能內訓講師

    一天只花 22 元學習，
    就能成為前端全方位人才！

    超早鳥優惠

    無觀看期限6 堂線上課程

    • 現代 Javasricpt 職人之路入門篇｜中階實戰篇｜面試篇
    • 2022 Vue3 專業職人入門篇｜進階篇｜加值篇

    無觀看期限12 場加碼課程

    • 每堂不同主題，從線上課程內容再延伸補足業界知識

    無觀看期限專屬社團解惑

    • 與其他開發者一起交流，順利排解學習關卡
    分期 0 利率
    US$1,002.63 US$267.77

    您可能會有這些疑問

    • Q 購買課程後，若發現自己不適合，是否有對應的退費方案？

      若您於購買課程後未觀看試閱章節以外之內容（付費內容），並於購買後 7 日內向客服
      （support@hiskio.com）提出退費申請，可全額退費；若您於購買後 8 - 14 日提出申請，可退課程購買實際
      支付 30%費用；若您於購買後超過 14 日起恕不受理退費申請，詳細可參考「課程退費規範」。

    • Q 報名課程前可以先預覽教材嗎？

      線上課程都有包含多個「試閱影片」，可以幫助你了解老師教學風格及課程實際教學內容喔！

    • Q 線上課程跟加碼課程有什麼不同？

      加碼課程是搭配 6 堂線上課程的內容去作延伸，因此兩者的教學內容是完全不一樣的喔！
      1. 線上課程：針對基礎語法、進階操作，搭配大量的講義及實作練習，幫助你扎實打底。
      2. 加碼課程：會針對更多業界會用到的範例、工具、流程進行講解，也有可能邀請其他業界講者來交流，幫助你補足業界的知識。

    • Q 需要有什麼技術門檻才能參加這個養成營？

      有 HTML & CSS 基礎即可參加「打造前端職人力：JavaScript + Vue3 + Nuxt.js」。

    沒解決到您的問題嗎？

    搭配學習

    HTML5+Animate CC 無痛上手網頁動畫與遊戲互動

    適合對⾼互動性網站及遊戲有興趣的人，讓你獨立設計並透過程式製作出互動式動畫網頁，提升使用者體驗

    了解更多

    開發人員工具組合包｜Git + Docker

    學會 Git 享受程式碼版本控管的威⼒，精熟 Docker 自由自在的創造各種測試環境，無須再一一安裝虛擬機，踏上高效開發之路

    了解更多

    工程師學接案｜WordPress 接案養成包

    從 WordPress 主題開發到實際接案須知大攻略，培養你的開發能力，實作客製化企業形象網站，讓接案效率、接案收入通通提升

    了解更多
    mikerocket

    學習時總是遇到問題，沒人解決嗎？

    別擔心，加入學員專屬交流社團！我會在線上即時替大家解題，讓我帶你成為符合業界期待的前端工程師吧！