Vue 出一個電商網站
4.7 (613 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,185 students enrolled

Vue 出一個電商網站

從基礎開始,完整學習 Vue.js 開發流程
4.7 (613 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,185 students enrolled
Last updated 4/2020
Traditional Chinese
Price: $84.99
30-Day Money-Back Guarantee
This course includes
  • 15.5 hours on-demand video
  • 22 articles
  • 1 downloadable resource
  • 2 Practice Tests
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • 完整了解 Vue 的運行概念
  • 學會使用 Vue 串接後端 API
  • 使用 Vue Cli (或不使用) 都可以完成一個互動網頁作品
  • 具有獨立完成一個 Vue 應用程式的能力
Course content
Expand all 138 lectures 15:52:46
+ 介紹
4 lectures 06:37
課程最終任務說明
00:10
六角學院線上社團
00:32
+ 基礎 Vue.js 概述
16 lectures 01:11:53
課程資源連結
01:16
VSCode Preview on Web Server 替代套件
00:21
應用程式建立
06:28
雙向綁定的資料
04:58
MVVM 的概念
04:51
v-bind 動態屬性指令
03:51
v-for 動態產生多筆資料於畫面上
05:33
使用 v-on 來操作頁面行為
05:06
預先定義資料狀態的重要性
01:54
透過修飾符,讓 v-on 操作更簡單
07:36
v-class 動態切換 className
03:47
computed 運算功能
02:28
Methods 與 Computed 的使用情境
00:19
Vue 表單與資料的綁定
07:32
元件基礎概念
05:37
基礎章節測驗
5 questions
+ 製作一個 Todo List 來小試身手吧
8 lectures 37:36
這個範例要練習什麼!?
01:47
套用版型及建立代辦事項列表的資料
09:07
刪除陣列上的特定資料
03:18
製作頁籤分類的功能
08:25
雙擊修改資料內容
08:33
刪除項目補充說明
04:48
換你來試試看,完成這份作業吧
01:21
實戰體驗 - Tode List 的資源連結
00:17
+ 進階模板語法介紹
9 lectures 01:10:49
模板資料細節說明
06:17
動態切換 ClassName 及 Style 多種方法
12:13
v-for 與其使用細節
16:30
v-if 與其使用細節
10:06
Computed 與 Watch
08:46
表單細節操作
06:24
v-on 的頁面操作細節
08:20
Template 章節作業說明
02:05
章節作業模板
00:08
+ Vue.js 元件
10 lectures 52:28
元件概念介紹
02:36
使用 x-template 建立元件
08:51
使用 function return 建構資料格式
01:50
props 基本觀念
04:15
props 使用上的注意事項
11:54
props 型別及預設值
04:45
emit 向外層傳遞事件
05:07
元件插槽
07:51
使用 is 動態切換元件
03:09
元件 章節作業說明
02:10
Vue 元件測驗
5 questions
+ JavaScript ES6
8 lectures 01:04:20
縮寫
05:52
箭頭函式與傳統函式
08:30
字串模板 Template String
05:53
常用陣列方法 (上)
09:09
常用陣列方法 (下)
06:01
ES6 小測驗
5 questions
+ Vue 常用 API
7 lectures 40:51
使用 Extend 避免重複造輪子
05:03
Filter 自訂畫面資料呈現格式
05:19
無法寫入的資料,用 set 搞定他
07:56
Mixin 混合其它的元件內容
03:41
使用 Directive 開發自己的互動 UI
08:07
Directive 細節說明
06:13
使用外部載入的套件
04:32
+ Vue Cli 的建置與運作原理
7 lectures 41:25
為什麼要學 Vue Cli
04:12
Vue Cli 2.x 與 Vue Cli 3.x 課程說明
00:11
Vue Cli 安裝相關資源
00:58
Webpack 腳本介紹 及 自定義環境變數
11:50
安裝套件在 Vue Webpack 中
09:09
+ Vue Router
8 lectures 42:41
本章節以後,提問的注意事項
00:21
使用 Vue Router 及配置路由文件
07:38
新增路由路徑及連結
06:26
製作巢狀路由頁面
04:24
使用動態路由切換頁面 Ajax 結果
07:04
命名路由,同一個路徑載入兩個頁面元件
07:02
Vue Router 參數設定
04:20
自定義切換路由方法
05:26
Requirements
  • 需要準備一台 Windows / Mac 電腦
  • 具有 HTML, CSS 觀念,並且熟悉 JavaScript
  • 有習慣的文字編輯器或是可以使用我們推薦的 VSCode
Description

複雜邏輯簡單化!
使用 Vue.js 讓開發超優雅!

Vue.js 的雙向綁定特色,讓許多剛接觸的開發者愛不釋手,大幅減短開發所需要的程式碼,且簡化許多開發上的邏輯。

且不斷壯大的社群,更延伸出許多開發工具,無論是活動網頁、控制台、SPA(單頁式應用程式) 甚至是搭配 Webpack 都有完整的解決方案,讓入門、資深開發者都可相互配合。

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

中文學習超 Easy 套件資源豐富多

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

雙向綁定技術 資料邏輯超簡單

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

元件化開發增加程式碼可用性

Vue.js 非常強調元件化模組,在此概念下許多程式碼都可以不斷重複使用;且多人開發時搭配 Vue.js 的簡單邏輯,可減少開發上的衝突,讓團隊程式碼具有更穩固的一致性。

本課程將會包含以下內容:

  •  Vue 原理與運作
  • Vue 與 Webpack Cli 工具使用
  • Vue Router
  • 提供範例 API,開發出一個電商網站
Who this course is for:
  • 聽過 Vue js,並對此感興趣的開發者
  • 想要有更好前端開發體驗的開發者
  • 有單頁應用程式開發需求者