iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

前端我又來了 - 30天 Vue學好學滿 系列

繼上屆自我挑戰完JavaScript後,這次決定進一步從框架下手,剛好目前工作上使用了Vue,雖然已經使用一陣子了,但整體對前端框架以及CSS的應用還是不太熟悉,又到了強迫自己每天學習的時候了,走起!

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

[30天 Vue學好學滿 DAY1] 參賽前言

動機 去年0前端基礎用JavaScript作為主題參加了自我挑戰,近期從原本的Java純後端實習生默默變成全端工程師了,目前使用的是Vue + Spring b...

2021-09-01 ‧ 由 分享
DAY 2

[30天 Vue學好學滿 DAY2] Vue.js介紹

核心概念-漸進式框架(progressive framework) 一個完整的頁面是由各個組件(component)組成,並關注於各組件的渲染,並透過綁定或全域...

2021-09-02 ‧ 由 分享
DAY 3

[30天 Vue學好學滿 DAY3] 專案建置&除錯套件

前置作業安裝 nodevuevue-cli vue-cli(Vue.js Command-Line Interface) 快速搭建專案的指令 內建Hot-Re...

2021-09-03 ‧ 由 分享
DAY 4

[30天 Vue學好學滿 DAY4] Vue-cli 基本架構

Vue-cli 專案基本架構 favicon.ico:僅用於 index.htmlindex.html:網頁入口文件 <!-- div = 區塊 &amp...

2021-09-04 ‧ 由 分享
DAY 5

[30天 Vue學好學滿 DAY5] 生命週期

Vue生命週期(Life Cycle) 每個實例從被初始化,掛載到DOM、更新,到最後被銷毀的歷程。而vue提供了一系列生命週期的函式,則稱為生命週期鉤子(Li...

2021-09-05 ‧ 由 分享
DAY 6

[30天 Vue學好學滿 DAY6] 計算屬性(Computed)

計算屬性(Computed) 無傳入值具回傳值(return)對來源屬性進行操作-> 觸發即使來源變數無實際異動(true -> true),也進行...

2021-09-06 ‧ 由 分享
DAY 7

[30天 Vue學好學滿 DAY7] 監聽器(Watch)

Watch 監聽器 具比較傳(old & new)無回傳值(return)監聽變數發生異動-> 觸發監聽變數無實際異動(true -> tr...

2021-09-07 ‧ 由 分享
DAY 8

[30天 Vue學好學滿 DAY8] v-bind

v-bind 屬性綁定 將屬性綁定於 HTML 中,可綁定Data、Class、Stylev-bind: -> 可簡化為 :好處: 定義初始值於data後...

2021-09-08 ‧ 由 分享
DAY 9

[30天 Vue學好學滿 DAY9] v-if & v-show

v-if 條件式渲染 :true -> 渲染可使用於template標籤中 可進行斷判斷: data中的變數 方法回傳 一段判斷邏輯 v-else 需...

2021-09-09 ‧ 由 分享
DAY 10

[30天 Vue學好學滿 DAY10] v-for 列表渲染

v-for 基於數組、物件透過迭代、遍歷對前端進行渲染。 item in itemsitems: 數據源item: 元素別名index: 當前索引key: 追蹤...

2021-09-10 ‧ 由 分享