iT邦幫忙

vue學習筆記相關文章
共有 402 則文章
鐵人賽 Vue.js DAY 25
Vue 新手學習紀錄 系列 第 25

技術 Day 25 | 自動保存表單內容

有時候可能打到一半不小心關掉,文章就這樣啪..沒了,所以今天想嘗試看看加入自動保存功能來解決這個問題會使用到 watch 深度監聽和 localstorage...

鐵人賽 Vue.js DAY 24
Vue 新手學習紀錄 系列 第 24

技術 Day 24 | v-model 雙向綁定

之前有寫道 props 和 emits 父元件和子元件相互傳資料的方式,那 v-model 是把這兩個東西包起來的語法,可以用 v-model 同時完成資料的傳...

鐵人賽 Vue.js DAY 23
Vue 新手學習紀錄 系列 第 23

技術 Day 25|Vue Transition

Vue 提供的 <transition> 元件,能讓元素進出畫面時自動套用動畫效果,不用額外的 JS,只須加上 class 名稱就能做到 相對應 c...

鐵人賽 Vue.js DAY 22
Vue 新手學習紀錄 系列 第 22

技術 Day 22 | 自定義指令

Vue 提供的指令像是 v-if、v-for 等等,除了這些指令外,我們也可以自定義一個指令 v-xxx 出來 範例 app.directive('focus'...

鐵人賽 Vue.js DAY 21
Vue 新手學習紀錄 系列 第 21

技術 Day 21 | Vue 生命週期

生命週期是什麼 每一個元件都有自己的生命週期(Lifecycle),當元件被建立、掛載到畫面、資料變化、最後被移除時,Vue 都會在這些階段呼叫特定的 hook...

鐵人賽 Vue.js DAY 20
Vue 新手學習紀錄 系列 第 20

技術 Day 20 | watch 即時監聽資料變化

watch 是用來即時監聽資料變化,像是使用者輸入搜尋關鍵字,要即時更新結果、表單內容變更時,要自動儲存等等,這些都需要偵測資料的變化。 基本範例 <sc...

鐵人賽 Vue.js DAY 19
Vue 新手學習紀錄 系列 第 19

技術 Day 19 | 跨元件資料傳遞 Provide/Inject

到目前為止前面有寫到兩種資料傳遞的方式,分別是 Props 和 Pinia,今天來寫另一種傳遞方式 Provide/Inject,最後再總結一下這三個。 為什麼...

鐵人賽 Vue.js DAY 18
Vue 新手學習紀錄 系列 第 18

技術 Day 18 | Teleport: 讓 Modal 浮在最上層

為什麼需要 Teleport? 在 Vue 中,元件會隨著父元件渲染在 DOM 裡,但像 Modal、Notification 等等這類 UI,通常需要顯示在最...

鐵人賽 Vue.js DAY 17
Vue 新手學習紀錄 系列 第 17

技術 Day 17 | Vue 部署到 Github Pages 上

雖然還沒到最後一天,但今天打算嘗試將 vue 部署到 github pages 上 (絕對不是在逃避串接資料庫資料ww原本以為 Github Pages 只能部...

鐵人賽 Vue.js DAY 16
Vue 新手學習紀錄 系列 第 16

技術 Day 16 | Mitt 跨元件傳遞資料

今天直接大忘記qaq翻了一下筆記決定寫跨元件資料傳遞的部分,直接看例子吧將 <card-emit></card-emit> 中的資料傳遞...

鐵人賽 Vue.js DAY 15
Vue 新手學習紀錄 系列 第 15

技術 Day 15 | Slot 是什麼

Slot 插巢 突然不知道該寫什麼 qaq 回去看了一下筆記,發現好像可以寫寫 slot可以在父元件中插入內容到子元件的位置,也就是讓外層可以直接操作內層的 H...

鐵人賽 Vue.js DAY 14
Vue 新手學習紀錄 系列 第 14

技術 Day 14|用 Pinia 管理全域狀態

Pinia 是由 Vue 官方所推出的狀態管理工具,主要目的是當資訊在不同元件中共用時傳來傳去很麻煩,因此可以使用 Pinia 將狀態存到 store 中使用。...

鐵人賽 Vue.js DAY 13
Vue 新手學習紀錄 系列 第 13

技術 Day 13|Vue Router

今天想要來看看在 vue 中如何連到不同頁面,以 HTML 來說,可以使用 a href 連到相應的 html 檔,但是 vue 的檔案都是以 .vue 結尾,...

鐵人賽 Vue.js DAY 13

技術 Day 12 - 我們來學「條件」吧!

這次我們不聊「綁定」了XD 我們來聊聊比較簡單的,也就是「條件」,相信各位讀者應該對這個不陌生吧?這篇的概念會非常簡單,因此我們會快速帶過去。 想到條件,讀者會...

鐵人賽 Vue.js DAY 12
Vue 新手學習紀錄 系列 第 12

技術 Day 12 | Composable 函式: 模組化程式邏輯

在 Vue 3 的 Composition API 裡,Composable 函式是一種把可重複使用的邏輯抽取出來的方式。先來看看一個範例: Composabl...

鐵人賽 Vue.js DAY 12

技術 Day 11 - 那「事件綁定」呢?

上一篇我們講了雙向綁定,讓使用者輸入東西能馬上同步到程式變數,這很方便。但很多時候,開發者希望使用者「做一個動作」才觸發某件事情,例如:點擊按鈕才送出表單、滑鼠...

鐵人賽 Vue.js DAY 11
Vue 新手學習紀錄 系列 第 11

技術 Day 11|Composition API 入門

昨天寫了 Vue 的 Options API,它用 data、methods、computed 來分門別類。這種寫法清楚、直觀,但在會有「邏輯分散」的問題。於是...

鐵人賽 Vue.js DAY 11

技術 Day 10 - 雙向綁定又是什麼?

上一篇我們提到「單向綁定」,了解到了他是作為「單向」的。本篇我們來講雙向吧! 什麼是雙向綁定? 一樣意思,假設今天我們有一個很厲害的機器,上面有個按鈕,可以讓該...

鐵人賽 Vue.js DAY 10
Vue 新手學習紀錄 系列 第 10

技術 Day 10|Options API 入門

在 Vue 3 推出之前,Vue 2 只有一種寫法 —— Options API。它的特色是:用一個物件把所有功能分區塊寫清楚。 資料 → data() 方法...

鐵人賽 Vue.js DAY 10

技術 Day 9 - 單向綁定是什麼?

上一篇我們聊了 Vue 的基本語法,應該已經慢慢上手了吧?那這一篇我們就要來講一個前端框架裡面非常重要的觀念 單向綁定。這個名詞可能聽起來有點抽象,但其實概念超...

鐵人賽 Vue.js DAY 9
Vue 新手學習紀錄 系列 第 9

技術 Day 9|用 vee-validate 做表單驗證

昨天做了「分享經驗」的表單,可以輸入學校、系所、經歷與結果。但仔細想想,如果使用者亂填,資料格式就會變很亂,所以今天要來處理表單驗證,確保輸入格式正確。 為什麼...

鐵人賽 Vue.js DAY 9

技術 Day 8 - 我們來看看基本語法吧!

上一篇我們聊了 Vue2 與 Vue3 的差別,這篇我們就來聊聊「Vue 的基本語法」吧!我們現在就真的要來進入語法的部分了。 插值語法(Interpolati...

鐵人賽 Vue.js DAY 8
Vue 新手學習紀錄 系列 第 8

技術 Day 8|實作新增資料

今日目標按下分享經驗後跳出表單,填寫完後按分享經驗按鈕就可以囉 實作分享表單 在 src/components 中新增 NewPostModal.vue &lt...

鐵人賽 Vue.js DAY 8

技術 Day 7 - 淺談 Vue2 與 Vue3 的差別

上一篇我們聊到了 Components 的使用方式。那讀者可能會想:網路上有些文章教 Vue2,有些文章教 Vue3,那這兩個到底差在哪?今天我們就來聊聊 Vu...

鐵人賽 Vue.js DAY 7

技術 Day 6 - Composition API 及 Option API 是什麼?以及差別是?

上一篇我們聊到了 Component,也做了一個小小的卡片。今天我們就要來講一個常常會讓新手有點混亂的東西,那就是 Composition API 跟 Opti...

鐵人賽 Vue.js DAY 7
Vue 新手學習紀錄 系列 第 7

技術 Day 7|分頁 Pagination

今日目標: 表格下方加入頁數,每頁 10 筆資料 若頁數 <= 1,則不顯示頁數切換 設計 Pagination.vue 在 src/componen...

鐵人賽 Vue.js DAY 6
Vue 新手學習紀錄 系列 第 6

技術 Day 6|呈現詳細資訊

今天主要要做一個詳細資訊的呈現,整個資料呈現做完之後覺得把所有資訊放在一個表格裡面有點亂,所以想說試試看寫一個詳細資料呈現的方式,剛好會用到 Day4 所寫到的...

鐵人賽 Vue.js DAY 5

技術 Day 4 - Vue 的檔案結構

前一篇文章,我們已經把 Vue 給安裝起來了,接下來我們就要開始介紹 Vue 的檔案結構以及程式碼結構。那我們廢話就不多說了,開始吧! 檔案結構介紹 我們在寫...

鐵人賽 Vue.js DAY 5
Vue 新手學習紀錄 系列 第 5

技術 Day 5|Computed + filter 製作簡易搜尋功能

今天打算製作簡易的搜尋功能,會使用到 v-model 和 computed 的概念 v-model 用來雙向綁定資料 computed 用來根據輸入自動計算結...

鐵人賽 Vue.js DAY 4
Vue 新手學習紀錄 系列 第 4

技術 Day 4|Props 與 Emit: 資料如何在元件之間傳遞

Day3 的文章有使用到資料傳遞,感覺開發上會蠻常用到的,今天就稍微深入了解一下兩個的區別 Props:由外向內傳資料 靜態傳入最簡單的情境是父元件直接把一個靜...