iT邦幫忙

鐵人檔案

第 12 屆 iThome 鐵人賽
回列表
Modern Web

Déjà-vu ? 要 Vue 過才知道 系列

還沒學完 JavaScript 就要來學框架,傳說中的 Vue 比其他的框架容易上手,那麼就來試試吧!把學習 Vue 的過程記錄下來,希望會有更深刻的印象。

鐵人鍊成 | 共 30 篇文章 | 15 人訂閱 訂閱系列文 RSS系列文
DAY 11

Vue 表單元素資料的雙向綁定 v-model

魔鏡的神奇之處就是會出現不同於鏡子前的影像,那和螢幕有什麼不ㄧ樣? 之前的幾天我們有說到 Vue 的運作是用資料來驅動(渲染)畫面,聽起來好像是「單向的」操...

2020-09-26 ‧ 由 tsuifei 分享
DAY 12

v-on 監聽事件與修飾符

人一生的「幸福指數」呈現 U 型曲線分佈,猜猜哪一個年紀歲數是 U 的低端? 在介紹 Vue 的修飾符(Modifiers)之前我們來複習一下和修飾符一起搭...

2020-09-27 ‧ 由 tsuifei 分享
DAY 13

Vue 實作一個簡單的 Todo List [上]

是誰把日子拆成七天來過的?五天不是也不錯? 以往原生的 JavaScript 來寫 Todo List 的時候,需要處理許多事件監聽、取值以及排序的問題,但...

2020-09-28 ‧ 由 tsuifei 分享
DAY 14

Vue 實作一個簡單的 Todo List [下]

像隻無頭蒼蠅一樣的學習ㄧ定會徒勞,但有時我們成了無頭蒼蠅卻不自知,唉。 在上一篇我們討論到在實作之前,先把需要的功能和邏輯一一列出來,包含可能會用到的 v-...

2020-09-29 ‧ 由 tsuifei 分享
DAY 15

Vue 的實例與生命週期 Instance-life-cycles

是否世間萬物都有週期?那會一直輪週期的就叫做輪迴嗎? 說到 Vue 的生命週期,相信大家都看過這張圖:lifecycle 在 Vue 所使用到的整個生命週期...

2020-09-30 ‧ 由 tsuifei 分享
DAY 16

Vue 過渡與動畫效果 Transitioning Single Elements/Component

人來就好了,何必還帶月餅與柚子?月餅是給嫦娥的、柚子是給兔子的。 原本在一般頁面要製造一些簡單的動畫效果,只要掌控 class 和 Css 就好了,但是如果...

2020-10-01 ‧ 由 tsuifei 分享
DAY 17

Vue.js 資料格式化的好幫手:過濾器 Filters

會不會,我們以後都會被 clone 老闆就不用請人了? 月球漫遊 有時我們拿到一包資料,需要透過過濾器來拿到我們想要的資料格式。例如我們可以透過一些外來的函...

2020-10-02 ‧ 由 tsuifei 分享
DAY 18

Vue 的其餘內建指令補充

我們總是和時間賽跑,卻忘記了沿途的風景有多美好。 前幾篇介紹了許多 Vue 專屬的內建指令用法,這裡要介紹最後幾個也會常用到的內建指令ref、v-cloak...

2020-10-03 ‧ 由 tsuifei 分享
DAY 19

Vue 自定義指令 Custom Directives

什麼時候會用到自定義指令?除了原本的默認內置指令,雖然 Vue 的元件是可以複用的,但有時候我們仍然需要對普通 DOM 元素進行不同效果的操作,這時候就會用到自...

2020-10-04 ‧ 由 tsuifei 分享
DAY 20

Vue.js 產品列表實作 (Part1)

重複的事情做多了就變成肌肉記憶,做到數不請就會變反射動作。 在認識了那麼多 Vue 的指令之後,ㄧ定會很想實際的動手做,我們就來做一個產品列表,並把我們之前...

2020-10-05 ‧ 由 tsuifei 分享