iT邦幫忙

鐵人檔案

第 12 屆 iT 邦幫忙鐵人賽
回列表
Modern Web

初探Vue.js 30天 系列

Vue.js是目前三大前端框架之一,藉由30天的挑戰,整理並記錄Vue.js的特性。

本系列除了會探索Vue.js,在後半段也會結合axios、lodash搭配應用,以及使用laravel作為後端搭配服用!

初次參加鐵人賽,學習曲線較淺,多多包涵~

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

[Day 1] 菜鳥探頭前 - 說明會

前言 曾經的我們寫前端都使用容易上手的jQuery來開發各式各樣前端的需求,不過技術日新月異,前端技術發展迅速,因此在目前三大前端框架中選擇了Vue.js。 會...

2020-09-15 ‧ 由 Peter Lu 分享
DAY 2

[Day 2] 讓我看看! Vue

什麼是Vue? Vue是JavaScript前端"漸進式"框架,之所以稱為漸進式,是因為你不須一竿子把所有的東西都用上。 在原本使用Jque...

2020-09-16 ‧ 由 Peter Lu 分享
DAY 3

[Day 3] Vue Instance & Lifecycle 建立了什麼出來?

Vue Instance 使用 Vue constructor 建立 Vue instance「vm」 這個Instance vm就是擔任(MVVM)view...

2020-09-17 ‧ 由 Peter Lu 分享
DAY 4

[Day 4] v-bind 資料屬性給我綁起來!

v-bind 我們經常會使用Jquery對DOM的class, style, title等HTML屬性進行操作,在Vue則可透過v-bind指令,讓資料跟屬性...

2020-09-18 ‧ 由 Peter Lu 分享
DAY 5

[Day 5] v-on 聽聽看DOM事件

v-on 介紹 在瀏覽網頁時會觸發很多事件 (events) 的發生,這些動作稱為JavaScript DOM Event 熟悉的Jquery會用.on( ev...

2020-09-19 ‧ 由 Peter Lu 分享
DAY 6

[Day 6] v-model 雙向綁定-表單資料處理好幫手

v-model 前面講到v-bind是單向綁定,而今天就要來講雙向綁定的v-model(Two-way Binding) v-model常用於表單及元素來做雙向...

2020-09-20 ‧ 由 Peter Lu 分享
DAY 7

[Day 7] v-if/v-show 傻傻分不清楚

v-if v-if可以用來做條件渲染(Conditional Rendering),跟JavaScript的if陳述式裡的程式有點雷同,而Vue可以直接在Htm...

2020-09-21 ‧ 由 Peter Lu 分享
DAY 8

[Day 8] v-for 渲染列表

v-for介紹 v-for 指令,可以透過陣列、物件、常數做迴圈遍歷資料,然後渲染出相應的內容。 針對不同資料屬性[陣列、物件、常數、Template]做v-f...

2020-09-22 ‧ 由 Peter Lu 分享
DAY 9

[Day 9] Watch 逃不過的監聽

watch介紹 watch 監聽器,用以監聽某個變數,並在監聽的變數發生改變時,進行處理。 watch可以得到改變前與改變後的資料,而watch的相依性低,適用...

2020-09-23 ‧ 由 Peter Lu 分享
DAY 10

[Day 10] Computed 計算屬性 Setter/Getter

computed介紹 computed 中譯是計算,顧名思義是將複雜、重複的邏輯抽離,並使用computed處理。 在 Vue 中透過 computed 會...

2020-09-24 ‧ 由 Peter Lu 分享