iT邦幫忙

鐵人檔案

2018 iT 邦幫忙鐵人賽
回列表
Modern Web

Vue.js 30天隨身包 系列

鐵人鍊成 共 30 篇文章 | 61 人訂閱 訂閱系列文 團隊30天熱度
DAY 1

Day01 - 輕量級Vue.js

什麼是Vue.js? 在這個網頁前端開發的工程,Google下的AngularJS與Facebook下的ReactJS,因為將前端的開發系統化,開發上比較方便...

2017-12-20 ‧ 由 Syuanhahaha 分享
DAY 2

Day02 - Web元件化系統

Web元件化系統是Vue.js一個很重要的概念,我們使用官網提供的一張圖來做詳細解釋 上方右圖是一個樹狀結構,Vue.js嚮往的就是先建立好根實體(Vue I...

2017-12-21 ‧ 由 Syuanhahaha 分享
DAY 3

Day03 - Instance Lifecycle

認識Instance Lifecycle與Instance Lifecycle Hooks 上圖為官網所繪製的Instance Lifecycle(生命週期)...

2017-12-22 ‧ 由 Syuanhahaha 分享
DAY 4

Day04 - Virtual DOM & V-Node

認識Virtual DOM DOM(Document Object Model)的中文翻成**「文件物件模型」**,是HTML、XML、SVG文件可以使用的一組...

2017-12-23 ‧ 由 Syuanhahaha 分享
DAY 5

Day05 - 建立環境與新增專案

大致了解Vue的一些比較重要特色之後,再來我們來看看怎麼建置Vue的環境與專案,要開始進行實作部分了。 建立環境 開始之前,電腦需要有Node.js環境與NPM...

2017-12-24 ‧ 由 Syuanhahaha 分享
DAY 6

Day06 - 熟悉Webpack專案架構

專案整體架構 當我們使用webpack樣板初始化一個完整的vue專案,該專案資料夾內基本架構如下圖: static資料夾內存放的是“真正的”靜態資源,他們不...

2017-12-25 ‧ 由 Syuanhahaha 分享
DAY 7

Day07 - 基本Webpack專案運作流程

在大致了解以webpack樣板建置的專案架構後,我們接下來來了解整個app運作流程。 當我們下npm run dev這個指令後,啟動http server,這個...

2017-12-26 ‧ 由 Syuanhahaha 分享
DAY 8

Day08 - [Directives] 資料綁定(Data Binding)

推薦好用的工具:Vue.js devtools 這篇介紹開始之前,最近發現一個開發vue時還不錯用的chrome插件,想推薦大家使用,這個插件是Vue.js d...

2017-12-27 ‧ 由 Syuanhahaha 分享
DAY 9

Day09 - [Directives] 屬性綁定(Class and Style Binding)

前一篇介紹的指令可以將資料與vue instance之間做綁定,那假設我們想讓HTML元素中的屬性和vue instance做綁定,Vue有提供一個指令v-bi...

2017-12-28 ‧ 由 Syuanhahaha 分享
DAY 10

Day10 - [Directives] 事件處理(Event Handling)

我們看到的網頁,了解使用者對UI元件的操作,不會只有是在表單元素內輸入或選擇內容,還有點擊按鈕或送出表單等等DOM事件,而事件的觸發會造成資料的異動,為了得知資...

2017-12-29 ‧ 由 Syuanhahaha 分享