指令介紹 開始進入指令的章節，先前有提到，在 Vue 中，只要看到 v- 開頭的東西，就是指令。 指令的用途很多，例如：資料綁定、事件綁定、條件判斷、迴圈等等。...
Web Speech API 可讓您將語音資料合併到 Web 應用程式中。分兩個功能：(Speech Synthesis)語音合成（文字轉語音）和(Speech...
👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。 建立路由頁面 建立 About 頁面 在 pages 目錄下...
前言 為了不重複造輪子，在專案中導入現成的套件是常見的做法，但若這個套件在 Nuxt 3 沒有專用的模組或插件，再導入的過程中可能會遇到一些問題，多數情況我們可...
前言 今天來補完 Vue 資料加工的最後一塊拼圖，監聽器。 在 computed 的內容中有提到，如果在 computed 寫 set 語法，不要寫出有副作用的...
本篇開箱Web Speech API提供了瀏覽器內建的文字轉語音功能。 大家應該用過Google的語音功能吧？其實我們可以透過Web Speech API就...
👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。 使用 NuxtIcon 模組 安裝 NuxtIcon 套件...
前言 Nuxt 3 預設的自動載入 (Auto Imports)，其中包含了 composables 與 utils 目錄，這兩個目錄通常會用來定義一些專案中常...
前言 今天聊聊 Vue 實體中的 methods， 中文叫做「方法」。 如同我們在說「物件的方法」一樣，Vue 世界如果說到「方法」，其實就是在講函式(func...
👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。 建立插件來整合 Vue 3 套件 安裝 Vue Scroll...
前言 如果你只習慣使用 Vue 單純做客戶端渲染 (CSR)，對於 Nuxt 的伺服器端渲染 (SSR) 模式還不是那麼的熟悉，你可能會在開發過程有些時候明明記...
前言 我們已經知道模板語法中可以直接寫 JS 表達式，也知道表達式的邏輯可以抽方法來重複使用。 實務上還有一種情況，是需要「依據資料」整理出「對資料的說明」，簡...
本篇開箱的是vue-ellipsis-3，是一款簡單上手就能實現的文字縮略元件。 相信大家在網頁功能上一定會碰到這個需求，超過某個寬度時要出現...省略號（...
👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。 建立與使用組合式函式 在 composables 目錄下建立...
前言 在 Nuxt 3 中，你可以直接使用 useAsyncData、useFetch、useLazyAsyncData、useLazyFetch 函式來發送網...
模板語法 先說一個觀念：模板，其實不完全等於 HTML，只是剛好 Vue 使用的模板語法，完全支援 HTML。所以我們使用 Vue 的時候如果提到的「模板」，可...
👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。 建立與使用第一個元件 在 components 目錄下建立一...
前言 Nuxt 3 內建基於檔案的路由可以快速實現頁面的路由配置，我們只需要在 pages 目錄下建立頁面，Nuxt 將會自動載入 Vue Router 來實現...
前言 你可能會疑惑，我們還沒接觸元件，為什麼現在在講元件的生命週期 事實上，一個 Vue 實體，就是一個元件，所以我們只要開始使用 Vue 之後，就必須跟元件的...
👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。 建立第一個布局模板 在 layouts 目錄下建立一個檔案...
前言 我們在使用 Node 開發時，可能會碰到需要使用環境變數來設定不同情境所執行的邏輯，也可能是要避免在設定檔中或專案推送至遠端版控倉庫時暴露敏感資訊。 你可...
前言 標題又出現了一個看起來很難懂的專有名詞：狀態。 這篇文章來聊聊 Vue 的「狀態」是什麼意思。 在開始說狀態之前，先簡單說一下 setup() 生命週期鉤...
👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。 建立第一個路由頁面 在 pages 目錄下建立一個檔案 ./...
Vue 的核心 這個主題寫在這篇其實有點「晚」了 不過也因為寫在這篇，相信有追完前面幾篇的讀者，已經能體會 Vue 有多「漸進」了。 之前有提到，尤大大當初只是...
前言 Nuxt DevTools 是一個強大的視覺化除錯工具，，整合開發了許多工具與功能在除錯分析上它可以幫助你更快速的了解 Nuxt 專案，提升開發者體驗，本...
來嘗試在 NX 中建立 Vue 元件庫 lib。 跟 Nuxt 一樣，目前官方沒有支援 Vue 的擴充，所以要手動設定。 首先建立一個基於 Vite 的 js...
👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。 專案目錄結構 .nuxt 目錄 開發環境下由 Nuxt 產生...
經歷了前面幾篇文章，讀者大概已經對框架有最基本的認識。 我們來 "Get our hands dirty"，開始寫扣吧！ 建構 Vue 框架...
前言 Nuxt DevTools 是一個強大的視覺化除錯工具，Nuxt DevTools 整合開發了許多工具與功能在除錯分析上它可以幫助你更快速的了解 Nuxt...
寫Vue的時候，偶爾會需要使用watch去監聽某個state的變動，來去進行一些邏輯操作。在接觸React之後，我發現React也有一個類似用途的hook，這個...
imall
切版姐姐
Ryan
Jasper
文科少女
iThome鐵人賽
看影片追技術