探索細膩互動設計，從零開始實踐 Vue.js 微交互動效 歡迎來到「微交互特輯」！今天我們將一起深入探索那些讓畫面更有溫度的小巧思。 無論是按鈕按下的瞬間、滑鼠滑過的細微變化，還是輸入框那輕輕一閃...
目錄 v-if 條件渲染指令 - 單個元素 v-if 條件渲染指令 - 多個元素 v-show 條件渲染指令 - 單個元素 v-if vs v-show 總結 小試身手 v-if 條件渲染指令...
昨天我們介紹了 JS 表達式如何在 Vue 綁定，今天一起來看一下「指令」怎麼實現這樣的功能吧！粗淺的帶大家一起走過幾個語法的小小應用～ 定義 指令？ 官方文件以這張圖，說明了「指令」的主要組成：「名...
計算屬性 讓我們在上一步的 todo 列表基礎上繼續。現在，我們已經給每一個 todo 添加了切換功能。這是通過給每一個 todo 對象添加 done 屬性來實現的，並且使用了 v-model 將其綁...
在 Vue 3 中，混入（Mixins）是一種復用邏輯的手段，允許我們將通用的功能提取到可重複使用的代碼塊中，並將其應用於多個組件。混入可以包含組件的生命周期鉤子、方法、數據和其他選項。在 Vue 3...
列表渲染 我們可以使用 v-for 指令來渲染一個基於源數組的列表： <ul> <li v-for="todo in todos" :key="to...
Vue 3 引入了強大的 Teleport API，它讓開發者可以輕鬆地將一部分的 DOM 結構渲染到應用中的其他位置，甚至超出 Vue 應用的根範圍。在某些情況下，像是模態窗口、工具提示、彈出式菜單...
使用 Vue <TransitionGroup> 打造出色的卡片動態效果 是否覺得網站上的卡片或列表元素看起來呆板？新增或移除元素時，總是顯得「生硬」且缺乏流暢感？想像每次卡片新增或刪除...
昨天我們講到了屬性綁定，而 Vue 也可以用「JS 表達式」來綁定數據，偶們看看故事會如何發展下去⋯⋯ 定義 官方文件：在 Vue 模板內，JavaScript 表達式可以被使用在如下場景上： 在...
在現代 Web 應用中，表單驗證是一個非常常見且重要的需求，它確保用戶輸入的數據符合預期並能夠被系統正確處理。在 Vue 3 中，除了依賴現成的第三方表單驗證庫（如 VeeValidate 和 vue...