嗨一大家，記得之前我們在屬性綁定章節，有講到 CSS 樣式可以使用 v-bind 屬性綁定樣式嗎～ 但官方文件後來卻提到了： 但是，在處理比較複雜的綁定時，通...
<input> 作為表單控制元素，是網頁開發中最常見的元素之一。<input> 的不同 type 設定會影響顯示的 UI，以及它所代表...
提供更多範例，讓使用者了解此元件用法吧。◝( •ω• )◟ 發射參數 調整發射速度向量，就可以往任意方向發射。 src\components\util-part...
昨天重新回顧了我們在練習作品中常用的Vue語法及語法組成架構，今天再來接續介紹：還有哪些在我們這次改版練習ToDoList中遇到的常用屬性？ 本系列任務：改寫過...
我們接續響應式基礎的系列～今天帶大家看 computed 這個語法。 使用情境 computed？「計算」的意思。 那又是在計算什麼東西，為什麼 Vue 會有特...
記得我們在 ref 的篇章有講過「解包」嗎？官方文件在帶過 reactive 後，又細講了它倆解包的細節⋯⋯小菜菜在學習這邊的時候遇到了幾個蠻有趣的狀況坑，來跟...
還記得我們開賽第五天就在寫ToDoList了，結果現在連基本的指令都還沒完整講解（天啊），簡直像剛拿到新的空氣清淨機連內封膜都還沒撕就開始使用了！畢竟實戰演練總...
開始測試前，讓我們在 defineExpose 追加資料，方便進行測試。 src\components\util-party-popper\util-party...
所以我們要怎麼實現彩帶的效果呢？用大量的 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，今天我們要來完成剩下「修改」與「頁籤搜尋」功能！ 修改功能 滑鼠...
++
Alex Liu
鱈魚
ivytien
iThome鐵人賽
看影片追技術