iT邦幫忙

鐵人檔案

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

勇者鬥Vue龍 系列

用30天介紹前端框架Vue.js

鐵人鍊成 | 共 32 篇文章 | 214 人訂閱 訂閱系列文 RSS系列文 團隊一閃一閃小星星
DAY 11

Vue.js Core 30天屠龍記(第11天): 樣式綁定

前面講了 Class 的特殊綁定方式,今天要來看看樣式的綁定方式。 字串綁定 Style 是 Key Value 做為一組,單個 DOM 元素可以設置多個 St...

2018-10-26 ‧ 由 Peter Chen 分享
DAY 12

Vue.js Core 30天屠龍記(第12天): 條件渲染

本文會介紹可以依照條件變化改變渲染元素的 Directives ,分別是以 v-if 、 v-else-if 及 v-else 為一組的條件渲染 Directi...

2018-10-27 ‧ 由 Peter Chen 分享
DAY 13

Vue.js Core 30天屠龍記(第13天): 列表渲染

在 vue 中,要在頁面上綁定資料時會使用不同的 Directives 或是模板語法做操作,但這些綁定方式都是針對單純的資料格式,當資料是一個複雜的結構像是陣列...

2018-10-28 ‧ 由 Peter Chen 分享
DAY 14

Vue.js Core 30天屠龍記(第14天): 響應系統

到現在我們對改變 vue 實體上的資料就可以重新渲染畫面這件事已經習以為常了,但實際上是如何運作的呢? 今天會介紹 Vue.js 如何以它的響應系統同步資料及頁...

2018-10-29 ‧ 由 Peter Chen 分享
DAY 15

Vue.js Core 30天屠龍記(第15天): 使用 `set` 新增實體中的屬性

在 vue 中,建立實體後才加入的屬性因為沒有被給予 getter 及 setter ,所以不會被響應系統察覺,但使用 set 方法加入的屬性則會被賦予 get...

2018-10-30 ‧ 由 Peter Chen 分享
DAY 16

Vue.js Core 30天屠龍記(第16天): 事件處理

Vue.js 中可以使用 v-on 監聽 DOM 事件,當事件觸發時可以叫用設定的函數或是 JavaScript 陳述式做相關的處理。 使用 JavaScrip...

2018-10-31 ‧ 由 Peter Chen 分享
DAY 17

Vue.js Core 30天屠龍記(第17天): `v-on` 的修飾符 Part 1 - 事件修飾符

講解事件時有提到 v-on 所綁定的事件後面可以以點( . )來區隔事件及修飾符,像是 @click.prevent 中 click 是事件,而 prevent...

2018-11-01 ‧ 由 Peter Chen 分享
DAY 18

Vue.js Core 30天屠龍記(第18天): `v-on` 的修飾符 Part 2 - 按鍵修飾符

當我們監聽鍵盤或是按鈕事件時,通常會需要設定要以哪一個按鈕觸發事件,一般寫 JavaScript 時要在進入事件時先判斷是否為目標按鍵後才能做想做邏輯處理, V...

2018-11-02 ‧ 由 Peter Chen 分享
DAY 19

Vue.js Core 30天屠龍記(第19天): 表單綁定

目前為止我們使用了 v-bind 及 {{}} 綁定資料至模板上,但這兩個方式都是從 view model 到 view 的單向綁定,而模板上如果有 input...

2018-11-03 ‧ 由 Peter Chen 分享
DAY 20

Vue.js Core 30天屠龍記(第20天): 組件基礎

Vue 的應用程式由多個實體所串連,形成一棵組件樹,它只會有一個根節點,就是 new Vue 的實體,底下都是稱為 Component 的組件,組件的開發方式跟...

2018-11-04 ‧ 由 Peter Chen 分享