iT邦幫忙

鐵人檔案

第 12 屆 iT 邦幫忙鐵人賽
回列表
自我挑戰組

跟 VueJS 認識的30天 系列

最近學習到 VueJS,想趁這次的自我挑戰更熟悉VueJS 這個框架,並製作出一些東西(還沒想好XD)。

參賽天數 4 天 | 共 21 篇文章 | 28 人訂閱 訂閱系列文 RSS系列文
DAY 1

[DAY01]跟 Vue.js 認識的30天 -前言

其實早在8月就有想過要參加這一次IT鐵人幫,但是那時候還深陷在六角學院「 JS 作品直播班 」的作業泥淖中,也一直不確定自己的主題要訂甚麼,後來才決定寫 Vue...

2020-09-15 ‧ 由 Celeste 分享
DAY 2

[DAY02]跟 Vue.js 認識的30天 - Vue 實體的生命週期(Lifecycle Hooks)及模板語法(Template Syntax)

學了 VueJS 一段時間,總是會不定期的回頭看下面這張圖: 這張圖從上到下就是 Vue 實體產生的一系列過程,並且在過程中不同階段,會運行一些生命週期鉤子(...

2020-09-16 ‧ 由 Celeste 分享
DAY 3

[DAY03]跟 Vue.js 認識的30天 - Vue 的資料計算(computed)

在講計算(computed)之前,先來說說 Vue 自己擁有的屬性 $data: 以[DAY02]跟 Vue.js 認識的30天 - Vue 的模板語法(Tem...

2020-09-17 ‧ 由 Celeste 分享
DAY 4

[DAY04]跟 Vue.js 認識的30天 - Vue 的資料偵聽(watch)

之前也都沒使用過 watch ,所以趁這個機會好好了解一下它。 如何使用偵聽屬性(watch) 基礎範例 const vm = new Vue({ el:'...

2020-09-18 ‧ 由 Celeste 分享
DAY 4

[DAY05]跟 Vue.js 認識的30天 - Vue 的屬性綁定

很多時候我們會利用 class 來切換樣式,這時候其實就可以利用 Vue 的指令 v-bind 來動態切換 class 。 v-bind:class 屬性綁定...

2020-09-21 ‧ 由 Celeste 分享
DAY 4

[DAY06]跟 Vue.js 認識的30天 - Vue 的條件渲染

在 JS 中我們是利用 if(condition){statement1}else{statement2} 來設定條件並決定執行哪一段陳述式(statement...

2020-09-21 ‧ 由 Celeste 分享
DAY 4

[DAY07]跟 Vue.js 認識的30天 - Vue 的列表渲染

v-for 就是 JavaScript 裡的迴圈,基於一組資料來製作相同元素區塊。 先簡單講一下 JavaScript 裡 for...in 、 for...o...

2020-09-23 ‧ 由 Celeste 分享
DAY 4

[DAY08]跟 Vue.js 認識的3天 - Vue 的事件監聽

在 JS 中有監聽器 addeventListener ,而 Vue 也有自己一套 DOM 元素監聽器的指令 v-on , Vue 也配置了幾個修飾符來替代像是...

2020-09-28 ‧ 由 Celeste 分享
DAY 4

[DAY09]跟 Vue.js 認識的30天 - Vue 的資料雙向綁定

在別人都完成30天鐵人賽的路上,我真的是太難了QQ,我才發現我一個禮拜的產量竟然只有1-2篇,在看文件的時候才發現自己之前練習 Vue 遇到的問題,真的是絕大部...

2020-10-06 ‧ 由 Celeste 分享
DAY 4

[DAY10]跟 Vue.js 認識的30天 - Vue 的基本模組(`component`)概念

Vue 的模組 - component 作用 Vue 的模組 component 是可以重複使用的 Vue 實例,所以也擁有 data、computed、wa...

2020-10-13 ‧ 由 Celeste 分享