Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
用 VueJS 搭配 Firebase 實作一個部落格網站
Rating: 4.5 out of 5(85 ratings)
243 students

用 VueJS 搭配 Firebase 實作一個部落格網站

學習使用 Vue.js 開發網站，建立你的作品集/部落格網站。從基礎開始到上架至 Firebase Cloud
Created byHappy Coding 快樂學程式
Last updated 3/2020
Chinese (Traditional)

What you'll learn

  • VueJS 概念與完整教學
  • 學會使用 Vue 串接 Firebase Cloud API
  • 使用 Vue Cli 起手專案
  • 學習單向資料流 Flux 概念
  • 用 Vuex 導入資料流向
  • 建置一個 CRUD 的部落格

Course content

4 sections • 39 lectures • 8h 33m total length

  • Vue js課程前言6:56

    • 門課程會做什麼？

    • 上完這門課程會得到什麼？

    • 這門課程會使用到哪些工具？

    • 課程資源（共享資料夾）

  • Vue js簡介與Vue官方文件介紹12:22

    MVVM架構、Vue與Jquery的差別、官方文件瀏覽

  • Vue CDN使用，Vue App Initialization8:22

    了解Vue實例掛載在DOM的概念

  • v-bind 屬性綁定與資料插值16:57

    介紹模板概念與資料插值

  • v-model 雙向綁定14:40

    介紹雙向綁定以及資料渲染

  • v-if 條件渲染與v-for 列表渲染23:57

    利用條件以及迴圈方式渲染資料，控制模板的架構

  • Methods 方法與事件處理13:41

    介紹Vue實例操作資料的方法，以及事件觸發方法控制資料

  • Computed 計算屬性與 Filters 資料過濾15:22

    介紹資料計算與過濾器

  • Watch 監聽資料9:43

    介紹監聽器以及如何利用監聽資料變動取代事件觸發

  • Vue-CLI 介紹與環境建置8:37

    • 環境建置教學 → nvm安裝、node.js安裝、Vue-CLI安裝

    • Vue-CLI 基本介紹

  • Vue專案建置、腳手架介紹14:14

    • 了解如何利用Vue-CLI自動建立本地專案，以及如何挑選所需要的預設Package

    • 了解腳手架配置與如何注入資料

  • Lifecycle - Vue實例的生命週期21:14

    • 了解Vue的根實例與組件的生命週期（mounted,created,updated......）

    • 介紹各個生命週期鉤子( hook )的使用時機

  • Components 組件介紹20:45

    • 了解組件掛載概念

    • 了解組件與根實例資料串接概念（props）

    • 了解如何注入組件並掛載於根實例

  • Components 組件在Vue-Cli中的使用14:09
  • 利用組件重構首頁與Bootstrap-Vue快速建構基本樣式25:03

    • 瀏覽Bootstrap-Vue 官方文件

    • 介紹Bootstrap-Vue基本使用方式

  • 用 Vue 建置首頁

Requirements

  • 不需要嚴謹的程式背景，願意思考學習
  • 有操作 Mac/Windows 電腦的基礎
  • 具備快樂學習的心情與一個假日
  • 具有 HTML, CSS 觀念，有操作過 JavaScript

Description

身為網頁設計師的你，想要擁有作品轉型成前端嗎？不懂網頁需要有人一步步帶你完成網站。想要學習 VueJS 仍沒有時間好好靜下心來學習。這次參與至該堂課，將是幫助你完成自己部落格網站的契機。

你為什麼需要上這堂課？

VueJS 是前端必懂三大網頁框架之一，由前 Google 中國工程師(Evan You)所開發，除了擁有豐富的中文資源以外，更在開發過程中有著 89% 的開發者滿意度。作為UI/UX設計師、前端開發者、後端工程師，甚至是剛入門網頁開發的新手都能以簡單的方式進行開發。其中更包括宣告式語法與 MVVM 方式，解決以往傳統 Javascript 是以命令式方式操作 DOM 文件，進行複雜的處理並且沒有智慧性。透過雙向綁定的概念，其友善程度會大幅降低對於資料的理解。

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

這堂課程分為四個大章節。從基礎 VueJS 介紹與官網文件做分享，使用開發者常用的編輯器 VScode（Windows/Mac 皆能安裝使用）去製作一個完整 CRUD 的部落格網站。上完這堂課，你將擁有自己建置部落格網站的能力，跟著講師一起使用 VueJS 完成。在開發一個應用其結構是相當重要的，因此這堂課會教你學習 Vuex 單向資料流向的結構處理，避免過去資料混亂，而無法駕馭除錯的情形。並且我們將串接 Google 提供的雲端服務 Firebase 去進行網站資料串接。Firebase 提供你儲存資料以及友善的 API，對於小型企業/個人都是很好的選擇方案。串接 Firebase API 並上線你的部落格，完成你的一個作品。

  • VueJs 基本介紹與運作。

  • Vuex 單向資料流的處理。

  • Firebase Cloud 串接 CRUD 。

  • 讓網站部署至 Firebase，正式上線。



關於這堂課

快樂學程式在台灣擁有超過 1000 人參與的在地社群活動。截至 2020 年我們已經舉辦超過兩年的社群與活動，每個月皆有程式思維相關的聚會與交流，深耕社群並參與推廣工程思維，讓非本科系的男孩女孩皆能一窺程式的風趣與培養解決問題的能力。這次與 Glove 推出這堂「用 VueJS 搭配 Firebase 實作一個部落格網站」，內容屬於入門並有完整串接實作，從 VueJS 到串接部署至 Firebase Cloud 等一個個逐步講解。做為上課學員的你可以在裡面跟著一起練習，反覆操作完成一個屬於你的 VueJS 部落格：）

Who this course is for:

  • 對前端開發有興趣，並有聽過 VueJS
  • 對完整建立一個部落格有興趣
  • 嘗試接觸串接 API 對完成一個作品動力

Report abuse