iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

我的Vue學習筆記 系列

去年底剛踏入程式世界,順利從行銷轉職前端,框架一直是想認真深入的課題,雖然斷斷續續學了一點,但都沒有持續,學學忘忘....
所以希望透過這次的鐵人賽挑戰自己30天接觸vue,一個月內學會框架!!!

和兩個朋友組了團,這更激勵了自己要去完成這項挑戰,期待30天後我們的成長。

鐵人鍊成 | 共 30 篇文章 | 4 人訂閱 訂閱系列文 RSS系列文 團隊寫 code 需要講幹話
DAY 1

Day01-為什麼我要學Vue/Vue簡介

我的夢想就是帶這一台筆電走遍全世界,「成為一個工程師似乎可以完成這個夢想」,於是在去年底毅然決然的投入程式語言,後來也很順利的在網站接案公司任職。 距離夢想其實...

2021-09-16 ‧ 由 hsiu753 分享
DAY 2

Day02-Vue.js的實體

分解Vue 1. 實體物件 利用createApp({...})建立一個物件實體,也就是vue的本體。 2. option 實體物件的核心,用來定義狀態和事件...

2021-09-17 ‧ 由 hsiu753 分享
DAY 3

Day03-資料加工與邏輯整合(methods v.s. computed)

網頁製作完成,在檢查的時候卻發現有錯的表格內容,而同樣的表格內容卻在多個頁面出現,要改就要重工五次,這就是我時常碰到的問題。不僅浪費時間難維護,也有可能手誤其中...

2021-09-18 ‧ 由 hsiu753 分享
DAY 4

Day04-Vue指令

昨天提到綁定的概念,v-開頭的就是Vue下使令語言,今天就要來研究它們到底有哪些還有能做什麼! v-bind 屬性綁定 (簡寫':') HTML模板裡面的{{....

2021-09-19 ‧ 由 hsiu753 分享
DAY 5

Day05-v-on事件處理

Vue中還有一個很重要的指令就是事件綁定v-on,讓DOM可以去做更多的事情。 v-on事件綁定(簡寫'@') 使用的方式為v-on:[事件名稱]="...

2021-09-20 ‧ 由 hsiu753 分享
DAY 6

Day06-條件判斷與列表渲染

v-指令最後一章,就是v-if系列還有v-show, v-show 和v-if不一樣的地方在接收到false時,會用display:none的方式隱藏。 v-...

2021-09-21 ‧ 由 hsiu753 分享
DAY 7

Day08-元件特性

元件是Vue最強大的功能之一,可以將重複的程式碼封裝,提高效率和維護性。 元件組織 把網頁分成區塊,區塊內還可以在分區塊,每個區塊都有各自的模板、樣式,與行為邏...

2021-09-22 ‧ 由 hsiu753 分享
DAY 8

Day07-生命週期

前面幾天稍微懂Vue能做到哪些是情,今天就要來深入了解Vue的生命週期,看他怎麼從無到有來處理我們對他下的指令。 狀態更新與畫面同步 scrollHeight...

2021-09-23 ‧ 由 hsiu753 分享
DAY 9

Day9-元件溝通傳遞(part1)

元件之所以很強大是他還有個資料傳遞功能,讓各個元件互相溝通,今天就要來研究他到底要怎麼傳資料! props引用外部資料 在元件上用v-bind將props的資料...

2021-09-24 ‧ 由 hsiu753 分享
DAY 10

Day10-元件溝通傳遞(part2)

沒有props還可以傳資料嗎 v-bind和v-on在沒有props的情況下一樣可以得到父層的資料。 <div id="app"&gt...

2021-09-25 ‧ 由 hsiu753 分享