Vue 專案基本目錄結構 my-vue-app/├── node_modules/ # 外部套件庫├── public/ #...
是一種前端框架（如 React, Vue）用來提升效能的概念，它在記憶體中用 JavaScript 物件模擬真實的 DOM 結構（DOM Tree），當資料變動...
生命週期有選項式跟組件式兩種寫法，語法都不同，這邊介紹選項式的語法。當在定義元件時，會將它們作為一個屬性或選項加入到匯出物件中，其值是一個函數。使用時寫出名字，...
在Vue中，this可以「直接讀取」內層的屬性，原因是因為Vue會在背後自動生成componentInstance，這方式讓使用者可以簡潔性的呼叫(少打字)。...
文本插值{{}} 最基本的數據綁定形式。將 Vue 數據值（例如 msg）當作純文本，直接插入到畫面的指定位置，使用的是“Mustache”語法(雙大括號{{}...
前言（魔力為何而生） 現實世界裡，飲料店就像不斷增生的魔物圖鑑：新品、季節款、價格波動從不手軟。手刻一份 menu.json 還好，但多店共管就很痛。今天把 D...
到最後一天啦，想來寫寫第一次參加的心得 原本報名下去很有決心，想要在八月底完賽，沒想到就被我這樣一拖再拖...中間有很多次超想放棄，但想想寫了一些了，放棄好像有...
本來就一直想要做一個屬於自己的作品集網站，剛好趁著這次鐵人賽的機會和挑戰，用 30 天的時間把它實現！ 但最難的其實不是寫程式，而是從「草稿」開始。要先規劃 U...
前言：AI 魔法師的日常需求 在現代的飲料魔法世界裡，秘書（或飲料召喚師）每天都要替團隊點飲料。但想想看——每次都要手動輸入整份菜單？茉莉綠茶、波霸奶茶、珍珠紅...
拖到最後要來還債了qq 來寫連接資料庫的部分Step1: 建立 server 資料夾這裡是用 postgres mkdir server cd server n...
傳統的 loading 的寫法長得像底下這個樣子: <div v-if="loading">載入中...</div>...
前言：魔法的自由變化骨架 在 Vue 的魔法世界中，我們已經掌握了許多強大的咒語：組件化、狀態管理、路由守衛、國際化...但今天，我們要學習的是最為優雅的魔法之...
這一個月來我做了什麼： 前置規劃 思考整體資訊架構、CIS 色彩、UI 排版 Figma - 從線稿到 mockup 單一專案作品集呈現，想要傳遞的內容 &g...
Toast 元件是一種短暫的提示訊息，目的是讓使用者知道當前做的事情是成功還是失敗，以下來看看如何建立這個元件 基本範例 Step 1: 建立 Toast 元件...
前言: 魔法師的視覺化水晶球 在現代前端開發中，資料視覺化已成為不可或缺的核心技能。無論是產品經理需要洞察用戶行為，還是管理者要掌握營運全貌，都需要透過圖表來...
前言｜為何需要這兩大神器？ 在真實專案裡，訊息傳遞可以分為兩派魔法： 非阻斷提醒（Toast）- 像是AI或是輔助天使提醒：飛過耳邊的小提醒，幾秒自動離場。...
專案越來越大的時候，可能導致載入速度變慢，這時候可以用動態載入元件和 router 的 lazy loading，讓開啟時更快速。 為什麼需要 Lazy Loa...
前言 在魔法學院裡，有個小秘密：真正的高階魔法師，不只是讓咒語發動，更要讓過程優雅。 你是否曾經打開一個網站，點下按鈕後畫面突然「啪！」地一閃？那種突兀的切換，...
有時候可能打到一半不小心關掉，文章就這樣啪..沒了，所以今天想嘗試看看加入自動保存功能來解決這個問題會使用到 watch 深度監聽和 localstorage...
前言 相信到這個地步，我們身為厲害的魔法師一定會需要與各國的魔法師交流~這時候就需要多國語言的處理~!! 今天我們把語言切換這門魔法真正施展起來！在小型專案裡，...
之前有寫道 props 和 emits 父元件和子元件相互傳資料的方式，那 v-model 是把這兩個東西包起來的語法，可以用 v-model 同時完成資料的傳...
前言 在飲料魔法學院裡，每一個元件（Component）都不是靜止的存在。它們誕生於魔法師的召喚（onMounted），在運行中感受能量波動（watch / w...
Vue 提供的 <transition> 元件，能讓元素進出畫面時自動套用動畫效果，不用額外的 JS，只須加上 class 名稱就能做到 相對應 c...
前言 在魔法學院裡，並非每個房間都對所有人敞開。有的房間需要通行證（token），有的房間只對長老（admin）開放。今天，我們在 Day15 的「傳送門術（V...
Vue 提供的指令像是 v-if、v-for 等等，除了這些指令外，我們也可以自定義一個指令 v-xxx 出來 範例 app.directive('focus'...
前言 在第 1–14 天，我們把「點餐術」練到能下單、驗證、統計，還會和伺服器對話。但真正的產品，還需要清晰的入口與可分享的路徑——這就是 Vue Router...
生命週期是什麼 每一個元件都有自己的生命週期（Lifecycle），當元件被建立、掛載到畫面、資料變化、最後被移除時，Vue 都會在這些階段呼叫特定的 hook...
更： 如果上線的網站是純靜態，不需打任何api，才適合用 github pages 部署！ 部署步驟 首先要建立一個 github repo，且要把專案 g...
一、需求分析：為什麼需要傳送門？ 在魔法學院裡，巫師們不可能永遠只待在大廳（App.vue）。有時候要去「點餐之塔」下訂單，有時候要前往「結算之室」檢視總金額，...
watch 是用來即時監聽資料變化，像是使用者輸入搜尋關鍵字，要即時更新結果、表單內容變更時，要自動儲存等等，這些都需要偵測資料的變化。 基本範例 <sc...
科技狗(柯基狗)
Zoey
huahaubuhau
iThome鐵人賽
看影片追技術