所以我們要怎麼實現彩帶的效果呢？用大量的 div 嗎？ 其實還真的可行，只是畫面可能會卡到爆炸。(›´ω`‹ ) 為了效果與性能兼具，這裡使用 canvas 繪...
在我們剛開始踏入Vue的世界是透過Node.js來安裝最新版本的Vue專案，其底層建構器就是Vite負責。但網路很多資源都還是應用Vue CLI寫出來的範本，究...
怎麼是梗圖開場 XD （來源：網路） 前幾天我們介紹了 Vue 中響應式的基礎 ref 以及 Proxy 的機制，今天直接來看另一種用法 reactive...
發想 某些網頁為了獎勵使用者特定操作，會在網頁上噴出彩帶效果。 讓我們來設計一個隨時隨地都可以慶祝的拉炮元件吧！(≧∀≦)ﾉ🎉 類似以下影片。( ´ ▽ ` )...
一開始只看到中譯想說到底為什麼要叫「生命週期鉤子」，看到Hooks…好吧。在之前的ToDoList練習還尚未學習Vue生命週期的概念，所有狀態和動作在頁面都亂亂...
前兩天認識到 ref 綁定「物件」、Vue 會將其包裝成一個 Proxy 物件的時候，點了官方文件放的 MDN，發現完全看不懂，想說沒關係～好像可以先無視它～結...
第一步老樣子就是來新增測試檔案。◝( •ω• )◟ e2e\components\text-characters-transition.spec.ts impo...
在上篇我們提到：當用 ref 綁定響應式的數據，會產生一個 RefImpl 的物件，而它提供了 value 屬性讓我們存取其中的值。 不過使用的兩個範例都是綁定...
引用Vue Components的原則，是透過父元件上import的方式，父元件中也可能存在許多子元件…這樣一個串一個的關係就成了樹狀結構的「元件樹」。今天我們...
還講到 debug 快笑死 XD 讓我們切入今天的正題 ref 不然要寫不完了 定義 ref 是 Vue 3 中的一個組合式 API，負責綁定和管理「響應...
現在讓我們用更多範例讓使用者更了解「逐字轉場」元件吧。ヽ(●`∀´●)ﾉ 切分文字 展示如何自定義切分文字。 src\components\text-chara...
昨天提到了ES6的模組化概念、也稍微提到了Module與Components間的相似卻有著些許差異之處，趁著記憶猶新，再繼續看Vue Components！ C...
昨天我們介紹了 JS 表達式如何在 Vue 綁定，今天一起來看一下「指令」怎麼實現這樣的功能吧！粗淺的帶大家一起走過幾個語法的小小應用～ 定義 指令？ 官方文件...
開始單元測試前，先讓我們設定一下測試範圍，避免執行到 e2e 測試的部分。 vitest 可以和 vite 共用設定檔，所以我們在 vite 新增設定即可。 v...
昨天我們講到了屬性綁定，而 Vue 也可以用「JS 表達式」來綁定數據，偶們看看故事會如何發展下去⋯⋯ 定義 官方文件：在 Vue 模板內，JavaScrip...
基本結構 第一步先來建立基本樣式，需求提到「預設 p 標籤，切分後的文字使用 span 標籤，且需要符合 a11y」。 可以想像結構如下圖。 讓我們加入 te...
學完了SCSS基本語法，馬上就是現學現賣的時間！一樣叫出我們To Do List的css表重新改寫（現在回頭來看…真是慘不忍睹） 在Vue專案加入SCSS 上網...
昨天提到了 Vue 中的模板語法 Mustache 和 v-html，今天來看看「屬性綁定」。 定義 屬性綁定可以響應式的綁定「HTML」的 id、src、cl...
發想 讓每個文字都有進入進出動畫。( •̀ ω •́ )✧ 可以應用在滾動出現文字或者遊戲對話逐字出現效果。 類似以下影片效果。( ´ ▽ ` )ﾉ 規格 外觀...
今天我們正式來學習 Vue 基本的模板語法啦！ 文本插值 使用的是 Mustache 語法，即雙大括號 {{ }}。 我們來看看實際例子～ 範例 在 Must...
接下來讓我們進行 e2e 測試吧！( •̀ ω •́ )✧ e2e 測試和單元測試差在哪？e2e 測試會著重於在接近真實環境下進行測試，透過 Playwrigh...
延續昨天，我們已經完成了To Do List的新增與刪除功能。實戰演練中少不了的就是CRUD，今天我們要來完成剩下「修改」與「頁籤搜尋」功能！ 修改功能 滑鼠...
用途 在前端開發中，表格元件（Table）通常是用來展示大量資料的最佳方式。特別是當資料需要被排序、搜尋或分頁顯示時，構建一個高效且可擴展的表格元件變得尤為重要...
終於進入到實戰演練的環節，拿出我們前天建立好的專案，準備來練習To Do List！◎題外話：今天原本感覺時間很充裕，還在慢慢刻樣式…結果也花太多時間在喬css...
大家好！承前兩天，我們使用 Vite 建置了 Vue 專案，並且理解了它的資料夾結構，今天一起來更深入看一下這個專案是怎麼「組」起來的。 從 App.vue 根...
元件測試完成後，讓我們新增更多範例吧！( ‧ω‧)ノ╰(‧ω‧ ) 新增範例 與其使用大量文字描述參數用途，不如提供情境完整的範例，可以讓使用者有更具體的理解。...
現在讓我們對元件進行單元測試吧 單元測試的原則為「把待測物當成黑盒子，專注於測試公開介面」，也就是說我們只會針對元件的 template、props、event...
昨天我們已經把一個最簡單的 Vue 專案在本地 run 起來了（請為自己掌聲鼓勵）⋯⋯今天一起看一下這個專案的資料夾結構吧！ 專案主結構 行前通知 由於這個專案...
本章節是實作範例的前哨站，我們將接續使用上篇後半段建立的專案練習。不過，在開始寫code之前，先來搞懂Vue專案結構！ ├── public | └── fa...
經過前兩天的介紹，小菜菜已有大致了解 Vue 的概念了，今天來嘗試遵循官方文件的步驟，看看如何把一個最基本的 Vue 專案在本地 run 起來！兩種方法：CLI...
鱈魚
ivytien
++
jerrythepotato
iThome鐵人賽
看影片追技術