iT邦幫忙

鐵人檔案

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

用範例理解 Vue.js 系列

因為官方範例多只有片段的程式碼,沒有實際的範例,個人喜歡先看結果,再深入理解背後的原理。
因此想將官方範例整理成一個個檔案,並統一放在一個 github repository,方便學習中的人節省一點時間成本。
鐵人賽之後,這些文章內容也會額外和本人的 mentor Summer ,再共同整理成公司內部新人訓練教材的一部分。

參賽天數 30 天 | 共 30 篇文章 | 137 人訂閱 訂閱系列文 RSS系列文 團隊露天廢物
DAY 1

達標好文 用範例理解 Vue.js #1:前言

之前只稍微用過 AngularJS,目前公司前端是用 Vue。希望透過這三十天整理筆記,記錄自己的學習過程。 這三十天的內容會以 2.x為主,畢竟還很菜的我沒...

2017-12-11 ‧ 由 HunterLiu 分享
DAY 2

用範例理解 Vue.js #2:用七個官方範例初步認識 Vue.js

非常偷懶的把官方介紹七個範例照打,目的在於粗略了解 Vue 在幹麻。 可以點擊各個範例的 fiddle 連結自行修改和觀看結果。 Vue example 01...

2017-12-12 ‧ 由 HunterLiu 分享
DAY 3

用範例理解 Vue.js #3:Vue Instance & Instance Lifecycle Hooks

Vue Instance 每個 Vue 的應用都是通過 new Vue() 來建立 Vue Instance 建立 Vue Instance 下面建立了一個名...

2017-12-13 ‧ 由 HunterLiu 分享
DAY 4

用範例理解 Vue.js #4:Virtual DOM

概述 DOM 是文檔對像模型(Document Object Model)的簡寫,在瀏覽器中我們可以使用 js 來操作 DOM,但是這樣的操作性能很差,於是...

2017-12-14 ‧ 由 HunterLiu 分享
DAY 5

用範例理解 Vue.js #5:Template Syntax

連續寫了 Vue Instance, Lifecycle Hook, Virtual DOM 有點快要腦中風,今天就先回到寫幾個基礎範例喘息一下。至於執行結果...

2017-12-15 ‧ 由 HunterLiu 分享
DAY 6

用範例理解 Vue.js #6:Computed vs Methods

接下來的幾天會分別介紹四個屬性,並互相比較倆倆之間差異和使用時機。 computed methods filters watch Computed 如果在...

2017-12-16 ‧ 由 HunterLiu 分享
DAY 7

用範例理解 Vue.js #7:Filters vs Computed

Filters Vue.js 允許自定義過濾器,過濾器分為本地和全域。使用方法分為兩種: 模板運算後方加上管道符號| {{ value | filter...

2017-12-17 ‧ 由 HunterLiu 分享
DAY 8

用範例理解 Vue.js #8:Watch vs Computed

Watch 雖然在大多數情況下,Computed 更合適,但有時仍需要使用 Watch。 Watch vs Computed 附上 fiddle (https...

2017-12-18 ‧ 由 HunterLiu 分享
DAY 9

用範例理解 Vue.js #9:v-bind and Class Bindings

在 Vue 中,綁定樣式分為 Binding HTML Classes 或是 Binding Inline Styles。通常為了分離 HTML 和 CSS,...

2017-12-19 ‧ 由 HunterLiu 分享
DAY 10

用範例理解 Vue.js #10:Conditional Rendering

今天是鐵人賽第 10 天,我開始了另一個自我挑戰賽,題目為「三十天學 LodashJS」,也是不知道哪來的勇氣發佈自己寫的糞Code在網路上。我認為要多認識強者...

2017-12-20 ‧ 由 HunterLiu 分享