第一步老樣子就是來新增測試檔案。◝( •ω• )◟ 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...
現在有需求和規格了，讓我們開始開發吧。 基本結構 第一步先來建立基本樣式，需求提到「除了按鈕本體，在按鈕離開後，會有『拓印』留在原地」。 所以應該要有個容器，裡...
今天我們邀請到 Vue 來幫自己自我介紹 定義 官方文件：Vue (發音為 /vjuː/，類似 view) 是一款用於構建用戶界面的 JavaScript 框...
昨天我們談到了為什麼要學習React,今天我們就開始動手學習，作為一個有Vue開發經驗的開發者，我們會特別注意React和Vue的異同。 開發環境設置 首先,讓...
所有的開發第一步一定是通靈，喔不對，是分析需求。(≖‿ゝ≖)✧ 你一定在想這個元件又沒什麼功能，是要寫個雞毛需求。( ・ิω・ิ) 其實你說得很對，不過這就和練...
前幾天，我們從Playground的佈局下手，已經保證一個自適應的窗口來容納canvas，並獲得游標的位置，現在，讓我們延續昨天的基礎，設計更靈活的菜單收納方法...
回來做元件！ 今天接著介紹如何利用模板動態生成DOM，並比較 React 和 Vue 的不同實作方式。 Functional component vs Com...
鱈魚
++
ivytien
jerrythepotato
Moscle.dev
iThome鐵人賽
看影片追技術