👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。 客戶端渲染 Client-Side Rendering (C...
前言 Nuxt Image 是 Nuxt 的一個模組，顧名思義讓你可以在 Nuxt 專案中使用圖片時，可以幫助你最佳化圖片，Nuxt Image 它所做的是，使...
前言 今天要來講解v-bind的應用，以及它與class和style的綁定： 資料綁定提供了在HTML元素中靈活操作CSS類別列表和內聯樣式的解決方案，這是一...
DAY 14 - 狀態 (State) & Pinia 狀態管理工具 今日介紹 Vue.js 狀態及狀態管理工具，這篇比較偏觀念我們會先從基本概念...
本篇開箱Tesseract.js是能圖像中取得文字的工具 介紹 Tesseract.js 是一個 JavaScript 函式庫，它是基於 Google 的...
👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。 建立第一個 Server API 在 server/api...
前言 Nuxt 3 提供了一個路由中間件的框架，我們只要再專案目錄 middleware 下定義好路由中間件，就可以在路由切換之間來實現一些功能，包含了身份驗證...
前言 前一篇文章介紹了模板語法，今天我們將介紹Vue3的響應式基礎。在Vue3中，我們可以通過ref和reactive兩種響應式API創建響應式數據。ref和...
DAY 13 - 元件資料傳遞方式 props 、emit 元件資料傳遞方式 每個元件的資料都是獨立的，我們不能直接修改元件裡的資料，所以要透過專門的資料...
V14_快速檢視Vue的功能(4)_Vue元件之間的props、emits與slots 接著從 Try the Tutorial 網頁來開始學習網址為 http...
Web Speech API 可讓您將語音資料合併到 Web 應用程式中。分兩個功能：(Speech Synthesis)語音合成（文字轉語音）和(Speech...
👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。 建立路由頁面 建立 About 頁面 在 pages 目錄下...
前言 為了不重複造輪子，在專案中導入現成的套件是常見的做法，但若這個套件在 Nuxt 3 沒有專用的模組或插件，再導入的過程中可能會遇到一些問題，多數情況我們可...
前言 在前一篇文章中，介紹了Vue3的模板語法，讓我們對Vue3的模板有了初步的認識。今天我們要來介紹Vue3中非常重要的一個部分 —— 指令(Directi...
DAY 12 - 拆 ! 拆 ! 拆 !，將 Vue 元件化 ( Component ) 元件的概念 什麼是元件( Component ) ? 我們在開發...
V13_快速檢視Vue的功能(3)_Vue的生命週期與監看 接著從 Try the Tutorial 網頁來開始學習網址為 https://vuejs.org/...
👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。 使用 NuxtIcon 模組 安裝 NuxtIcon 套件...
前言 Nuxt 3 預設的自動載入 (Auto Imports)，其中包含了 composables 與 utils 目錄，這兩個目錄通常會用來定義一些專案中常...
V12_快速檢視Vue的功能(2)_v-if條件及v-for迴圈操作 接著從 Try the Tutorial 網頁來開始學習網址為 https://vuejs...
前言 昨天建置好環境後，今天終於能進入如何實際運用Vue這個框架的環節。 創建應用實例 第一步，創建Vue應用： import { createApp } f...
DAY 11 - V-for 渲染列表，輸入key值的重要性 v-for 渲染列表 我們什麼情況下會用到 v-for 呢 ?我有一大筆資料想要讓他依序顯示...
👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。 建立插件來整合 Vue 3 套件 安裝 Vue Scroll...
前言 如果你只習慣使用 Vue 單純做客戶端渲染 (CSR)，對於 Nuxt 的伺服器端渲染 (SSR) 模式還不是那麼的熟悉，你可能會在開發過程有些時候明明記...
V11_快速檢視Vue的功能(1)_v-bind 綁定操作 經過前幾篇的發文，複習了一下在JS及CSS的基礎，在後面的發文中，可以更專注在Vue本身的特點及功能...
本篇介紹根據內容自動更新文字區域的高度的工具resize-textarea-vue3 <input>只能輸入單行，而<textarea&g...
前言 昨天創建完了Vue的環境，今天我們將會介紹旁邊資料夾分別負責放置哪些檔案。 專案架構 建完架構後，我們可以看到旁邊資料夾的結構如下： node_mo...
DAY 10 - 渲染的條件判斷，透過V-if /V-else 顯示畫面 一般 Dom 元素判斷 在一般我們操作 Dom 元素時，我們假入要判斷呈現的畫面...
V10_在vue之前_必備的CSS基礎(3)_SASS/SCSS控制 今天來探索一下有關CSS的SASS/SCSS控制 首先看一下MDN的說明https://d...
👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。 建立與使用組合式函式 在 composables 目錄下建立...
前言 在 Nuxt 3 中，你可以直接使用 useAsyncData、useFetch、useLazyAsyncData、useLazyFetch 函式來發送網...
Ryan
ch0902
阿蘇蘇
切版姐姐
jasonlee2357
iThome鐵人賽
看影片追技術