拖到最後要來還債了qq 來寫連接資料庫的部分Step1: 建立 server 資料夾這裡是用 postgres mkdir server cd server n...
傳統的 loading 的寫法長得像底下這個樣子: <div v-if="loading">載入中...</div>...
Toast 元件是一種短暫的提示訊息，目的是讓使用者知道當前做的事情是成功還是失敗，以下來看看如何建立這個元件 基本範例 Step 1: 建立 Toast 元件...
專案越來越大的時候，可能導致載入速度變慢，這時候可以用動態載入元件和 router 的 lazy loading，讓開啟時更快速。 為什麼需要 Lazy Loa...
有時候可能打到一半不小心關掉，文章就這樣啪..沒了，所以今天想嘗試看看加入自動保存功能來解決這個問題會使用到 watch 深度監聽和 localstorage...
之前有寫道 props 和 emits 父元件和子元件相互傳資料的方式，那 v-model 是把這兩個東西包起來的語法，可以用 v-model 同時完成資料的傳...
Vue 提供的 <transition> 元件，能讓元素進出畫面時自動套用動畫效果，不用額外的 JS，只須加上 class 名稱就能做到 相對應 c...
Vue 提供的指令像是 v-if、v-for 等等，除了這些指令外，我們也可以自定義一個指令 v-xxx 出來 範例 app.directive('focus'...
生命週期是什麼 每一個元件都有自己的生命週期（Lifecycle），當元件被建立、掛載到畫面、資料變化、最後被移除時，Vue 都會在這些階段呼叫特定的 hook...
watch 是用來即時監聽資料變化，像是使用者輸入搜尋關鍵字，要即時更新結果、表單內容變更時，要自動儲存等等，這些都需要偵測資料的變化。 基本範例 <sc...
到目前為止前面有寫到兩種資料傳遞的方式，分別是 Props 和 Pinia，今天來寫另一種傳遞方式 Provide/Inject，最後再總結一下這三個。 為什麼...
為什麼需要 Teleport？ 在 Vue 中，元件會隨著父元件渲染在 DOM 裡，但像 Modal、Notification 等等這類 UI，通常需要顯示在最...
雖然還沒到最後一天，但今天打算嘗試將 vue 部署到 github pages 上 (絕對不是在逃避串接資料庫資料ww原本以為 Github Pages 只能部...
今天直接大忘記qaq翻了一下筆記決定寫跨元件資料傳遞的部分，直接看例子吧將 <card-emit></card-emit> 中的資料傳遞...
Slot 插巢 突然不知道該寫什麼 qaq 回去看了一下筆記，發現好像可以寫寫 slot可以在父元件中插入內容到子元件的位置，也就是讓外層可以直接操作內層的 H...
Pinia 是由 Vue 官方所推出的狀態管理工具，主要目的是當資訊在不同元件中共用時傳來傳去很麻煩，因此可以使用 Pinia 將狀態存到 store 中使用。...
今天想要來看看在 vue 中如何連到不同頁面，以 HTML 來說，可以使用 a href 連到相應的 html 檔，但是 vue 的檔案都是以 .vue 結尾，...
這次我們不聊「綁定」了XD 我們來聊聊比較簡單的，也就是「條件」，相信各位讀者應該對這個不陌生吧？這篇的概念會非常簡單，因此我們會快速帶過去。 想到條件，讀者會...
在 Vue 3 的 Composition API 裡，Composable 函式是一種把可重複使用的邏輯抽取出來的方式。先來看看一個範例: Composabl...
上一篇我們講了雙向綁定，讓使用者輸入東西能馬上同步到程式變數，這很方便。但很多時候，開發者希望使用者「做一個動作」才觸發某件事情，例如：點擊按鈕才送出表單、滑鼠...
昨天寫了 Vue 的 Options API，它用 data、methods、computed 來分門別類。這種寫法清楚、直觀，但在會有「邏輯分散」的問題。於是...
上一篇我們提到「單向綁定」，了解到了他是作為「單向」的。本篇我們來講雙向吧！ 什麼是雙向綁定？ 一樣意思，假設今天我們有一個很厲害的機器，上面有個按鈕，可以讓該...
在 Vue 3 推出之前，Vue 2 只有一種寫法 —— Options API。它的特色是：用一個物件把所有功能分區塊寫清楚。 資料 → data() 方法...
上一篇我們聊了 Vue 的基本語法，應該已經慢慢上手了吧？那這一篇我們就要來講一個前端框架裡面非常重要的觀念 單向綁定。這個名詞可能聽起來有點抽象，但其實概念超...
昨天做了「分享經驗」的表單，可以輸入學校、系所、經歷與結果。但仔細想想，如果使用者亂填，資料格式就會變很亂，所以今天要來處理表單驗證，確保輸入格式正確。 為什麼...
上一篇我們聊了 Vue2 與 Vue3 的差別，這篇我們就來聊聊「Vue 的基本語法」吧！我們現在就真的要來進入語法的部分了。 插值語法（Interpolati...
今日目標按下分享經驗後跳出表單，填寫完後按分享經驗按鈕就可以囉 實作分享表單 在 src/components 中新增 NewPostModal.vue <...
上一篇我們聊到了 Components 的使用方式。那讀者可能會想：網路上有些文章教 Vue2，有些文章教 Vue3，那這兩個到底差在哪？今天我們就來聊聊 Vu...
上一篇我們聊到了 Component，也做了一個小小的卡片。今天我們就要來講一個常常會讓新手有點混亂的東西，那就是 Composition API 跟 Opti...
今日目標： 表格下方加入頁數，每頁 10 筆資料 若頁數 <= 1，則不顯示頁數切換 設計 Pagination.vue 在 src/componen...
Zoey
TershiXia
iThome鐵人賽
看影片追技術