Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ AWS Certified Developer - Associate
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Mindfulness Personal Development Meditation Personal Transformation Life Purpose Coaching Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee

This course includes:

  • 16 hours on-demand video
  • 24 articles
  • 1 downloadable resource
  • 2 practice tests
  • Full lifetime access
  • Access on mobile and TV
Development Web Development Vue JS

Vue 出一個電商網站

從基礎開始,完整學習 Vue.js 開發流程
Rating: 4.8 out of 54.8 (653 ratings)
2,225 students
Created by 卡斯伯 六角學院, 廖洧杰 liao, 六角 學院, 六角助教 六角學院
Last updated 11/2020
Traditional Chinese
30-Day Money-Back Guarantee

What you'll learn

  • 完整了解 Vue 的運行概念
  • 學會使用 Vue 串接後端 API
  • 使用 Vue Cli (或不使用) 都可以完成一個互動網頁作品
  • 具有獨立完成一個 Vue 應用程式的能力

Course content

14 sections • 143 lectures • 16h 30m total length

  • 課程最終任務說明
    00:10
  • Preview01:58
  • Preview03:57
  • 六角學院線上社團
    00:32

  • 課程資源連結
    01:16
  • Preview10:15
  • 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

  • 這個範例要練習什麼!?
    01:47
  • 套用版型及建立代辦事項列表的資料
    09:07
  • 刪除陣列上的特定資料
    03:18
  • 製作頁籤分類的功能
    08:25
  • 雙擊修改資料內容
    08:33
  • 刪除項目補充說明
    04:48
  • 換你來試試看,完成這份作業吧
    01:21
  • 實戰體驗 - Tode List 的資源連結
    00:17

  • 模板資料細節說明
    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

  • Preview07:46
  • Preview02:55
  • 生命週期章節小測驗
    2 questions

  • 元件概念介紹
    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

  • Preview09:39
  • Preview09:54
  • Preview09:22
  • 縮寫
    05:52
  • 箭頭函式與傳統函式
    08:30
  • 字串模板 Template String
    05:53
  • 常用陣列方法 (上)
    09:09
  • 常用陣列方法 (下)
    06:01
  • ES6 小測驗
    5 questions

  • 使用 Extend 避免重複造輪子
    05:03
  • Filter 自訂畫面資料呈現格式
    05:19
  • 無法寫入的資料,用 set 搞定他
    07:56
  • Mixin 混合其它的元件內容
    03:41
  • 使用 Directive 開發自己的互動 UI
    08:07
  • Directive 細節說明
    06:13
  • 使用外部載入的套件
    04:32

  • 為什麼要學 Vue Cli
    04:12
  • Vue Cli 2.x 與 Vue Cli 3.x 課程說明
    00:11
  • Preview06:58
  • Vue Cli 安裝相關資源
    00:58
  • Preview08:06
  • Webpack 腳本介紹 及 自定義環境變數
    11:50
  • 安裝套件在 Vue Webpack 中
    09:09

  • 本章節以後,提問的注意事項
    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,並對此感興趣的開發者
  • 想要有更好前端開發體驗的開發者
  • 有單頁應用程式開發需求者

Instructors

卡斯伯 六角學院
前端設計師、前端工程師
卡斯伯 六角學院
  • 4.6 Instructor Rating
  • 11,158 Reviews
  • 22,255 Students
  • 20 Courses

大家好,我是王志誠 (Casper),是由設計師轉為前端工程師,專長是視覺設計與前端整合、前端技術教育訓練、前端自動化,常用的工具、技術有 Sketch、Sass、Angular.js、Node.js、Gulp 等主流前端技術。

目前是高雄前端社群的核心成員,高雄前端社群除了會有中型的交流會、Workshop以外,還會舉辦 CSS 讀書會(每月1~2次),如果對 前端、CSS 有興趣,歡迎追蹤 FB / 高雄前端社群,將可以看到我們的活動。

廖洧杰 liao
前端工程師
廖洧杰 liao
  • 4.6 Instructor Rating
  • 11,158 Reviews
  • 22,255 Students
  • 20 Courses

你好,我是六角學院的校長,洧杰。

我是熱愛分享與交流的前端工程師,目前專注於兼容桌面/移動網頁前端開發,期間已協助數百位平面設計師,網頁設計師導入標準網頁設計。


如果你有意成為網頁設計師,前端工程師,歡迎參考我們的課程,我們是六角學院,希望能帶領您進入程式領域,線上帶您學到會 :D

 

六角 學院
Udemy 台灣合作夥伴
六角 學院
  • 4.6 Instructor Rating
  • 11,158 Reviews
  • 22,254 Students
  • 20 Courses

一次付費,終身複習 
隨著時代更新的線上數位教材
透過國際知名 Udemy 線上教育平台 
我們致力於優化程式教育的流程

我們承諾以下事項:

  • 一次付費,課程內容沒有期限
  • 課程內容更新,無需額外付費
  • 價格調整,已付費者不受影響
  • Udemy、Mail、Facebook 等各頻道發問一定會得到回答
  • 30 天內無條件退款


六角助教 六角學院
六角學院助教
六角助教 六角學院
  • 4.6 Instructor Rating
  • 10,274 Reviews
  • 22,215 Students
  • 18 Courses

六角學院 是一所線上程式開發學習單位,目前已累積超過 15,000 名學員,讓更多人藉由線上學習在職涯規劃上有更多的選擇是我們的使命是,如果您贊同我們的理念,歡迎加入六角。

我們將深入了解您想發展的領域,每位實習生我們都會量身打造專屬於您的舞台,並讓您實際瞭解公司營運 Know how。

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.