MCP（Model Context Protocol）是一項在人工智慧領域（AI）極具潛力的創新技術。它是由AI 領先企業 Anthropic開發的開放標準協議，用於讓 AI 模型（如 Claude）能安全地連接和操作外部工具、資料來源和服務。它建立了一個標準化的溝通橋樑，讓 AI 助手能夠超越純文字對話，實際與各種系統和應用程式互動。
MCP的影響力正在快速擴展。現在，越來越多主流工具也開始導入 MCP 的支援，透過整合 MCP，能更順暢地將這些資料傳遞給 AI 進行後續處理，大幅提升了工作流程的效率與精確度。MCP 定義了 AI 模型與外部資源之間的標準化介面，包括如何發現可用功能、如何安全地執行操作、如何處理權限和錯誤等。它採用 JSON-RPC 協議進行通訊，確保穩定性和互通性。
整合 MCP （Model Context Protocol）的主要好處如下：
以下根據官方的文件，列出幾個常的常用的MCP 伺服器 ：
更詳細的「Model Context Protocol servers」清單資訊可參考以下網站的說明：
https://github.com/modelcontextprotocol/servers
Claude Desktop是由 Anthropic 推出的桌面應用程式，整合強大的 AI 助理Claude，可進行對話、撰寫、編輯、分析，並支援 MCP 協議擴展外部工具控制功能。
整合「Claude Desktop」與Filesystem MCP伺服器帶來幾個重要好處：
這種整合特別適合開發者、內容創作者和需要頻繁處理檔案的專業用戶，讓Claude從純粹的對話助手進化為實際的工作夥伴。
在這篇文章中，我們將帶您一步步了解整合Claude Desktop與Filesystem MCP 伺服器的操作步驟，一旦熟悉了 Filesystem MCP 伺服器與 Claude Desktop 的整合流程，您將能夠靈活地將這種整合模式應用到其他支援 MCP 的工具上，例如，使用Visual Studio Code與GitHub Copilot Agent來叫用MCP 伺服器。這不僅能大幅提升您的工作效率，也將為您開啟更多運用 AI 技術於自動化資料處理、內容分析等領域的可能性。
Filesystem MCP伺服器可以安裝在本機電腦，或者使用Docker運行。我們以安裝在本機電腦為例，您需要先安裝 node.js應用程式。先瀏覽至官網：「https://nodejs.org/」下載安裝檔，本文使用的版本為「node-v22.16.0-x64.msi」，下載完成後在檔案總管雙擊檔案，使用預設選項進行安裝。
下一步安裝 Filesystem MCP伺服器，我們以使用「npm」工具程式為範例，它是 JavaScript 套件管理工具，用來安裝、管理與分享 Node.js 相依套件。只要安裝node.js就會順帶安裝「npm」工具程式。在作業系統命令提示字元輸入以下指令安裝Filesystem MCP伺服器，「-g」參數的意思是 global（全域安裝），安裝後可以在任何地方使用該套件：
npm i -g @modelcontextprotocol/server-filesystem
啟動整個流程最重要的一步：安裝Claude Desktop應用程式、註冊Claude帳號並登入Claude Desktop應用程式。瀏覽到官方網站：「https://claude.ai/download」，下載 Claude Desktop安裝程式，在本文撰寫時，以Windows 作業系統為例，下載下來的檔名為「Claude-Setup-x64.exe」，請參考下圖所示：
圖 2：下載「Claude Desktop」安裝程式
執行「Claude-Setup-x64.exe」檔案進行安裝。安裝完成後執行Claude Desktop應用程式，在應用程式的開始畫面，按一下「Get Started」按鈕，請參考下圖所示：
圖 3：執行「Claude Desktop」應用程式
Claude有Free版訂閱方案，要測試MCP，只需要註冊成Free版（免費版）訂閱即可。下一步登入Claude， 可選擇使用既有的「Google帳號」登入或「email」登入，請參考下圖所示：
圖 4：登入「Claude」
在Claude Desktop應用程式中，前往左上角的設定（Settings），在「Help」選單中點選「Enable Developer Mode」，啟用開發模式，請參考下圖所示：
圖 7：啟用開發模式
在「Enable Developer Mode」對話盒中選取「Enable」項目啟用開發模式，請參考下圖所示：
圖 8：選取「Enable」啟用開發模式
在Claude Desktop應用程式中，前往左上角的設定（Settings），在「File」選單中點選「Settings」，請參考下圖所示：
圖 9：設定（Settings）
下一步編輯組態設定檔，在「Settings」頁點選「Developer」>「Edit Config」，請參考下圖所示：
圖 10：「Edit Config」
接著會自動開啟檔案總管，並導覽到「claude_desktop_config.json」檔案所在資料夾，這個是 Claude Desktop應用程式的 MCP（Model Context Protocol）伺服器組態設定檔案。使用任何文書軟體開啟此檔案，然後加入以下設定內容：
{
"mcpServers": {
"filesystem": {
"command": "npx",
"args": [
"-y",
"@modelcontextprotocol/server-filesystem",
"/Users/Admin/Desktop",
"/Users/Admin/Downloads"
]
}
}
}這個 JSON 檔案配置的結構和功能說明如下：
接下來很重要，完成設定之後，請重新啟動Claude Desktop應用程式。
在Claude Desktop應用程式中，前往左上角的設定（Settings），在「File」選單中點選「Settings」。
在「Settings」頁點選「Developer」，這次應該可以看到MCP 伺服器正在執行中，請參考下圖所示：
圖 11：MCP 伺服器正在執行
回到Claude Desktop應用程式聊天視窗，此時會出現 MCP 工具的圖示，將滑鼠移動到「Search and tools」按鈕上方，點擊後應該能看到 Filesystem MCP 伺服器列在工具清單中，請參考下圖所示：
圖 12：Filesystem MCP 伺服器列在工具清單中
點選上個畫面的「filesystem」MCP 伺服器項目，則會列出 Filesystem MCP 伺服器提供的工具，從這個介面可以選擇停用或啟用工具，請參考下圖所示：
回到Claude Desktop應用程式聊天視窗，輸入參考提示如下：
你可以存取哪些資料夾?
這個提示的執行結果請參考下圖所示，您可以看到Claude Desktop應用程式利用Filesystem MCP 伺服器提供的「list_allow_directories」功能列出可存取的資料夾：
圖 14：利用「list_allow_directories」列出可存取的資料夾
下一步在Claude Desktop應用程式聊天視窗輸入參考提示如下，利用Filesystem MCP 伺服器列出檔案清單：
查一下/Users/Admin/Downloads資料夾有哪些檔案?
這個提示的執行結果請參考下圖所示：
在Desktop 資料夾建立一個MyFileList.txt文字檔，將Downloads資料夾中所有檔案名稱、檔案大小、建立時間、檔案類型製成清單寫到MyFileList.txt
圖 18：使用Filesystem MCP伺服器建立的檔案內容
MCP（Model Context Protocol）正在快速拓展其應用範圍，愈來愈多開發工具，例如Claude Desktop應用程式、Visual Studio Code 擴充程式（Extension）都開始支援 MCP以提升與 AI 模型整合的效率。透過 MCP，開發者能以一致且安全的方式，將上下文資訊與操作指令傳遞給 AI，進一步強化自動化流程的準確性與效能。MCP 定義了一套標準化的介面，用於管理模型與外部資源之間的互動，涵蓋功能探索、權限控制、錯誤處理等面向。通訊則採用 JSON-RPC 協定，確保跨平台的穩定性與相容性。
App增添一些動畫效果不只是讓畫面變得好看，它還能幫助使用者更直覺地理解您的應用程式在做什麼。透過漸變、滑動、縮放等動畫效果，使用者可以感受到操作的回饋，讓介面看起來更自然、更有互動性。這一篇文章將透過一個簡單的範例，教您如何在Angular中使用Animation API做一個可開關顯示區塊的動畫元件。
.png)
孟子曰：「惻隱之心，人皆有之；羞惡之心，人皆有之；恭敬之心，人皆有之；是非之心，人皆有之。惻隱之心，仁也；羞惡之心，義也；恭敬之心，禮也；是非之心，智也。」社交工程攻擊就是利用人性的弱點，透過說服欺騙和操縱受害者，洩露敏感機密訊息的一種技術。入侵者可以利用這一點，透過與員工建立社交關係，進一步獲取對組織未經授權的存取。因此，網路防禦者必須了解社交工程攻擊技術與技能，幫助保護使用者免於遭受這類的攻擊。儘管組織已採用了許多安全控制措施和政策，組織的敏感資訊仍有可能被攻擊者利用社交工程手段竊取，因為社交工程手段是針對人性的基本弱點。
作者：許薰尹
精誠資訊/恆逸教育訓練中心資深講師
這篇文章將介紹如何使用Vue.js與Vite設計一個簡易的購物網站，並整合了多個工具與插件，包括 Vue Router、Pinia、Element Plus 等，逐步說明從專案建立到功能實現的過程。
我們將從使用 Vite 建立專案開始，說明如何安裝 Vue Router 和 Pinia 插件，並介紹基於 Vue 3 的 UI 框架Element Plus，透過它提供豐富的組件如按鈕，結合其樣式檔案，提升網站視覺效果與開發效率。在狀態管理方面，使用 Pinia 取代傳統的 Vuex，提供輕量且直觀的全域狀態管理，以管理購物車商品。
組件UI設計部分，使用 Element Plus 的卡片元件展示商品圖片、名稱、價格。同時使用側邊欄顯示購物車商品，並透過 Element Plus 的對話視窗提升使用者的互動體驗。
作者：楊先民
精誠資訊/恆逸教育訓練中心資深講師
JSON 是種熱門的文字資料格式，用於在新式 Web 和行動應用程式中交換資料，它的全名是JavaScript Object Notation。 可用於將非結構化的資料儲存在記錄檔或是類似 Microsoft Azure Cosmos DB的 NoSQL 資料庫中。
許多 REST Web 服務會傳回已格式化為 JSON 文字的結果，或接受已格式化為 JSON 的資料。例如，大部分的 Azure 服務 (例如 Azure 搜尋服務、Azure 儲存體和 Azure Cosmos DB) 都具有傳回或取用JSON的 REST 端點。
JSON 也是用於透過 AJAX 呼叫在網頁和 Web 伺服器之間交換資料的主要格式。
【概述】
近年來，由於ChatGPT 與諸多AI 應用程式的快速發展、加上DeepSeek的橫空崛起，大幅度改變了我們的世界，在專案管理的領域亦復如此。常言道：「AI 不會取代人類，但擁有 AI 的人類將取代不具有 AI 的人類」 (AI won’t replace humans — but humans with AI will replace humans without AI.) 把這句話的「人類 (Humans)」改成「專案經理 (Project Managers)」一樣適用。 全球著名的資訊研究與顧問諮詢公司Gartner說：五年後 (2030年)，專案管理有80% 的工作會被AI取代，但這不表示專案經理會被取代，而是：若能善用AI，則專案管理的工作效率將會大幅度提升。 本文概述 AI 如何協助專案管理，從優化日常管理任務、到提高團隊績效和專案成果，AI 會是讓我們在競爭激烈的環境中保持領先地位的關鍵，它不是來取代專案經理，而是來幫助專案經理，強化他們的管理工作 (AI is here to argument PM)；「若不懂AI就BI（悲哀）了！」
文章編號： N250527301 出刊日期： 2025/5/14
在本站《BlazorBootstrap入門 - 1》、《BlazorBootstrap入門 - 2》、《BlazorBootstrap入門 - 3》系列文章中介紹了BlazorBootstrap套件基本入門，這篇文章再來談談BlazorBootstrap套件中提供的強大「Grid」元件，用來顯示表格式的資料。
以下的程式範例將延續《BlazorBootstrap入門 - 1》、《BlazorBootstrap入門 - 2》、《BlazorBootstrap入門 - 3》建立的專案來進行實作。
作者：許薰尹 精誠資訊/恆逸教育訓練中心資深講師
在《【讓GitHub Copilot更強大】GitHub Copilot擴充功能簡介-1》一文，介紹了GitHub Copilot 擴充功能，它是一個能讓 GitHub Copilot Chat 增加許多功能的工具，適合用於程式開發、查詢文件、AI輔助程式設計、資料檢索和執行特定操作等。這些擴充功能可以依據使用需求設為私有、公開並可分享，或在 GitHub Marketplace 上公開列出供大家下載。對於保護客戶資料的企業而言，可以選擇私有擴充功能來保障資訊僅在內部使用。若是小規模合作則可選擇公開並可分享的擴充功能，或將擴充功能上架至 GitHub Marketplace 以擴展影響力。
開發者可以使用 GitHub 提供的資源來自行設計 Copilot 擴充功能，其中包含程式碼範例、除錯工具、SDK 等。GitHub Codespaces 也支援在雲端設置和運行開發環境，並提供預先配置的工具如 Visual Studio Code，方便在不同設備上隨時隨地開發和協作。使用者可以建立一個簡單的 HTTP 伺服器，設定擴充功能的基本回應格式，並利用 createTextEvent 和 createDoneEvent 函數來控制回應流程。整合完成後，開發者可以進行測試，並調整連接埠的可見度設定為「Public」，確保外部應用程式可以正常訪問。
本篇文章將延續《【讓GitHub Copilot更強大】GitHub Copilot擴充功能簡介-1》文章的情境，介紹如何設計一個簡單的GitHub Copilot擴充功能。
繼續閱讀 →
現在的前端開發已不再只是「會用框架」那麼簡單，開發效率、程式碼可讀性、狀態管理效能都早已成為前端工程師的核心競爭力！
這篇文章是轉錄自 Brent Ozar 的文章，其中記錄了6個 SQL Server有史以來最佳的6個功能，以及8個最糟的功能，來特別轉錄一下，並且說出一下我自己的看法。
SQL Server 實質上的第一版，是 SQL Server 6.5版，算是微軟從 Sybase取得完整開發權力的第一個版本，也剛好是我個人開始學習 SQL Server的第一個版本，而對台灣而言 SQL Server 6.5是開始支援雙位元版本，也就是說支援中文的字集，意義也算重大，自己的 SQL的第一張證照也是 SQL Server 6.5版。就讓我們來看一下， Brent Ozar所認為的6個有史以來最佳的功能為何吧!
作者自己都說，有些觀點可能有些人會覺得很奇怪(這我也認同)，我們就來看看吧：
告訴你有些很奇怪。幾十年前，您可以用簡單的英語向資料庫伺服器詢問您想要什麼，然後得到結果。當微軟在 SQL Server 6.5 中推出該功能時，他們遠遠領先於時代，並最終在 2005 年將其刪除。我讚賞他們當時為了走在前沿所做的努力：他們盡了當時技術所能，我真的很感激他們沒有嘗試在 SQL Server 2025 中重新審視這一點。
當可用性組 (AG) 於 2012 年問世時，其旨在取代一大堆高可用性和災難恢復功能，每個功能都基於不同的技術並具有不同的控制。故障轉移叢集實例、資料庫鏡像、日誌傳送、雙向複製和 SAN 複製如今仍然存在，但微軟對 AG 的持續投資意味著它們可以作為許多雲端實施（包括可被管理的執行個體）的基礎。我確實希望他們能夠投入更多，使該技術更易於實施、配置和排除故障，但我仍然必須將 AG 納入此列表中。這是在正確的時間提出的正確想法，當它們問世時我真的很興奮。
回想起 2000 年至 2005 年 Crystal Reports 主導資料視覺化業務的時期真是令人難以置信。每個人都在各個地方使用它。它是中小型企業中事實上的標準，以至於微軟必須將 SQL Server Reporting Services 免費與您購買的 SQL Server 捆綁在一起，以保持競爭力。同樣，他們必須免費提供整合服務才能與 Informatica 等工具競爭。大約十年以來，微軟不斷對這些產品進行改進，如果你把自己的職業生涯押注於這些產品，那麼在很長一段時間內，你會做得相當不錯。如今，它們已經不再受歡迎，但是由於它們長期以來的良好表現，如果我不將它們列入這個名單，那我就是失職了。
直到大約十年前，建議開發人員使用哪些資料庫功能仍然是一件非常麻煩的事情。透明資料庫加密、分割區、資料列儲存索引、稽核、變更資料擷取和壓縮等功能僅在昂貴版本中可用。SQL Server 2016 SP1將這些功能引入標準版，讓開發人員的生活更加輕鬆。我敢打賭，這個決定經過了很多會議和爭論，但結果還是值得的。
現在我們認為它們是理所當然的，但在 SQL Server 2000 中，您不能只執行 SELECT 查詢來取得資料庫伺服器的健康和效能的診斷資料。今天，我們使用簡單的語言以相同的方式存取我們的用戶資料和伺服器的元數據，選擇它，處理它以進行報告，並對其採取行動。它並不完美，但它肯定比我們以前使用的 DBCC 命令要好。
您可能已經讀過這六個字七遍了，但您才剛開始了解微軟為 SQL Server 所做的最好的事情。為了真正理解這一點，請閱讀 .NET 的動盪歷史，它經歷瞭如過山車般的變化。有.NET、.NET Core、.NET Framework 4.0，又回到了普通的.NET，一路上 Windows Forms、Windows Presentation Foundation、Universal Windows Platform 也發生了巨大的變化……我什至無法形容開發人員為了繼續發布相同的應用程序，但採用了當前的最佳實踐，需要做多少工作。
另一方面，您在 2000 年編寫的查詢今天仍然有效，僅此而已。
當然，您可能會擔心由於執行計劃的變更而導致的查詢效能，但總的來說，您可以採用完全相同的資料庫應用程序，並將其連接到越來越新的 SQL Server 版本，而無需重寫應用程式本身。沒有 T-SQL 2000、T-SQL Core 或 T-SQL Framework 4.0。已經有棄用的功能，但這些幾乎都與管理有關，而不是會影響應用程式程式碼的變更。
這並不是說 T-SQL 停滯不前：微軟多年來一直在逐步增加新功能。並不是說所有這些增加的功能都是改進或沒有問題 - 但至少它們是不斷地添加，而不是要求應用程式進行更改以保持相同的功能水平。
GitHub Copilot Chat是一個超級聰明的聊天機器人，它可以幫你做很多程式開發相關的事情，而GitHub Copilot 擴充功能（GitHub Copilot Extensions）可以讓這個機器人裝上各種不同的工具，讓它變得更厲害！您可以使用 Copilot 擴充功能來擴展Copilot Chat 的能力！
繼續閱讀 →
目前越來越多企業採用AWS雲端，您是想要入門AWS領域，或對AWS解決方案有應用需求的IT人員?
透過AWS原廠授權教育訓練中心，可提供您最新、最全面的AWS技能培訓，讓您可依照角色或解決方案選擇適合需求的AWS課程進修，有系統地具備在AWS雲端中設計、部署和操作基礎設施和應用程式的技能，符合企業與IT人員的多元需求。
SQL Server 從SQL Server 2014 開始引入了「可更新」叢集資料行存放區索引(CCI)，可將分析速度提高高達100 倍的數量級，同時顯著減少儲存空間（通常為10 倍）。您的里程會有所不同。
Microsoft SQL Server 團隊強烈建議對較大表（> 100 萬行）的資料倉儲使用 CCI。 資料倉儲的典型建議部署是對事實資料表使用 CCI，對維度資料表使用傳統資料行儲存。但是，
你應該考慮對維度資料表使用 CCI，尤其是現在 SQL Server 2016 支援建立一個或多個傳統 btree 索引以實現高效的相等和較短的範圍搜尋。
<template> <div> <button @click="isShow=!isShow">切換顯示 <transition name="fade"> <p v-if="isShow">隱藏訊息</p> </transition> </div> </template> <script setup> import {ref} from 'vue' const isShow = ref(false); </script> <style scoped> .fade-enter-active, .fade-leave-active { transition: opacity 2s; } .fade-enter-from, .fade-leave-to { opacity: 0; } </style>
圖1：使用Vue.js原生動畫功能transition搭配v-if
由以上範例可以看出，雖然Vue.js精簡化了動畫效果的設計，但是還是必須要針對此動畫設計一組特定的CSS Class來做搭配，在開發上還是帶來了一些負擔。
有鑑於此，筆者向各位介紹一個方便好用又輕量化的動畫元件-AutoAnimate。(https://auto-animate.formkit.com/)
AutoAnimate 的核心理念在於提供一個「零設定」的動畫元件，它的目的是簡化在網頁應用中設計動畫效果的過程，讓開發者不用編寫複雜的 CSS 或 JavaScript 。只需將這個元件引入到Vue.js的專案中，就能輕鬆為網頁元素增加動畫效果，進而提升使用者操作體驗。
以下介紹AutoAnimate的安裝方式：
使用AutoAnimate的第一步，就是使用npm工具輸入以下指令，安裝元件至Vue.js的專案之中：
npm install @formkit/auto-animate
接著至main.js內，將AutoAnimate註冊至全域範圍，那之後其他的Component就可以直接使用了，main.js的程式碼如下：
import { createApp } from 'vue' import App from './App.vue' import { autoAnimatePlugin } from '@formkit/auto-animate/vue' createApp(App).use(autoAnimatePlugin).mount('#app')
以下為幾個以組合式API為主設計範例：
以下為未設置AutoAnimate的Component完整內容
<template> <h5>點選以下文字可移除</h5> <ul> <li v-for="item in items" :key="item" @click="removeItem(item)"> {{ item }} </li> </ul> </template> <script setup> import { ref } from 'vue' const items = ref(["台北", "台中", "高雄", "新竹", "台南"]) function removeItem(toRemove) { items.value = items.value.filter((item) => item !== toRemove) } </script> <style scoped></style>
可參考下圖，刪除成員時，並無動畫效果：
圖2：移除成員(無動畫效果)
接著，只要在父容器標籤<ul>中，加入AutoAnimate所提供的指示詞(Directive) v-auto-animate，就可以增加刪除成員時的動畫效果，加入後的標籤如下：
<ul v-auto-animate> <li v-for="item in items" :key="item" @click="removeItem(item)"> {{ item }} </li> </ul>
接著再次執行，即可得到動畫效果，如下圖所示：
圖3：移除成員(加入動畫效果)
以下為Component的完整內容：
<template> <div> <button @click="sortAsc">正排序 ↑</button> <button @click="sortDesc">反排序 ↓</button> <button @click="toggleEnable">切換動畫效果 ({{isEnable}})</button> </div> <ul ref="parent"> <li v-for="item in items" :key="item"> {{ item }} </li> </ul> </template> <script setup> import { ref } from 'vue' import { useAutoAnimate } from '@formkit/auto-animate/vue' const [parent , enable] = useAutoAnimate() const items = ref([30, 20, 10, 40]) const isEnable = ref(true); function toggleEnable(){ isEnable.value = !isEnable.value; enable(isEnable.value); } function sortAsc() { items.value.sort() } function sortDesc() { items.value.sort().reverse() } </script> <style scoped></style>
這個範例中定義了3個按鈕：
程式說明：
執行此範例後，將會呈現以下效果：當頁面開啟後，您可以點擊「正排序」或「反排序」按鈕，隨後下方的序列成員將以動畫形式重新排列，如圖4所示：
圖4：排列清單成員(有動畫效果)
接著，點選了「切換動畫效果(true)」的按鈕，即可將動畫效果關閉，此時點擊「正排序」或「反排序」按鈕，隨後下方的序列成員重新排列則無動畫效果，如圖5所示
圖5：排列清單成員(有動畫效果)
以下為Component完整內容：
<script setup> import { ref } from "vue" const faq = ref([ { id: "why_tokyo", question: "為什麼要去東京？", answer: `東京是一個充滿活力的城市，融合了傳統與現代文化。
從古老的神社到時尚的購物區，還有世界知名的美食與科技，
這裡提供多樣化的體驗，讓每個訪客都能找到自己喜歡的活動。`, }, { id: "why_london", question: "為什麼要去倫敦？", answer: `倫敦是歷史與現代交融的完美範例。著名的地標如大笨鐘、
倫敦塔和白金漢宮，使這座城市充滿了歷史意義。同時，
倫敦也以其博物館、劇院和國際美食而聞名，提供豐富的文化體驗。`, }, { id: "why_rome", question: "為什麼要去羅馬？", answer: `羅馬是古代文明的中心，擁有無數的歷史遺跡，
如羅馬競技場和萬神殿。漫步在這座城市中，您會感受到千年歷史的痕跡。
同時，羅馬也是義大利美食的故鄉，為美食愛好者提供了無數的驚喜。`, } ]) const current = ref(faq.value[0].id) function addNew(card) { faq.value.unshift({ id: "why_taipei", question: "為什麼要去台北？", answer: `台北是一座融合傳統與現代的城市，擁有豐富的文化景點
和迷人的自然風光。您可以參觀壯麗的台北101，或探索故宮博物院
的珍貴文物。夜市的小吃更是讓美食愛好者大快朵頤，
展現了台灣多元的飲食文化。`, }) } </script> <template> <div class="example accordion-example"> <button @click="addNew">增加一個新景點</button> <ul class="accordion" v-auto-animate> <li class="accordion-item" v-for="q in faq" :key="q.id" v-auto-animate> <div class="question" @click="current = current === q.id ? false : q.id"> {{ q.question }} </div> <p class="answer" v-if="q.id === current" v-html="q.answer" /> </li> </ul> </div> </template> <style scoped> ul { list-style-type: none; margin: 0; padding: 0; } li { display: block; background-color: var(--ui-light); border-radius: 0.5em; overflow: hidden; } [data-dark-mode="true"] li { background-color: var(--purple-d); } .question { padding: 1em; display: flex; align-items: center; cursor: pointer; } .question::before { content: "Q"; font-size: 1.5em; margin-right: 0.5em; color: var(--primary); } [data-dark-mode="true"] .question::before { color: var(--purple-m); } .answer { margin: 0 1rem; padding: 0 0 1rem 0; font-size: 0.875em; } </style>
這個範例中定義了2個點擊功能：
而上方的兩個點擊功能，如果都希望操作時能夠具有動畫效果，就必須要在各自的的父容器標籤加入[v-auto-animate]指示詞，此兩個父節點標籤分別為：
執行此範例後，將會呈現以下效果：當頁面開啟後，您可以點擊「為什麼要去東京？」、「為什麼要去倫敦？」或「為什麼要去羅馬？」按鈕，隨後該問題的下方將以動畫形式呈現出答案，如圖6所示：
圖6：使用動畫效果呈現各景點的答案
接著，點選了「增加一個新景點」的按鈕，就會看到清單內會使用動畫效果增加一個「為什麼要去台北？」的成員，並且在點選「為什麼要去台北？」的標題之後，隨後該問題的下方將也會動畫形式呈現出答案，如圖7所示：
圖7：使用動畫效果增加清單成員
AutoAnimate 是一個強大且易於使用的工具，它的「零設定」特性使其非常適合於開發過程中設計出動畫效果進而增進使用者的操作體驗。無論是在簡單的SPA 應用程式或是更複雜的動態系統中，AutoAnimate 都能輕鬆加入動畫，並讓清單異動時的視覺效果更為流暢自然，如有興趣可參考官網：https://auto-animate.formkit.com/
