iT邦幫忙

vue3相關文章
共有 252 則文章
鐵人賽 Modern Web DAY 1
派對動物嗨起來! 系列 第 1

技術 D01 - 沒時間解釋了,快上車!:使用 Vue、babylon.js、NestJS 打造派對遊戲

本系列文已改編成書「甚麼?網頁也可以做派對遊戲?使用 Vue 和 babylon.js 打造 3D 派對遊戲吧!」 書中不只重構了程式架構、改善了介面設計,還新...

鐵人賽 自我挑戰組 DAY 13

技術 vue3 Composition API 學習手冊-13 生命週期

前一篇文章,介紹到我們如何用已經學習到的進度製作一個連動的選單,其實大家應該不難發現在Javascript的程式中,實際上邏輯運算相關的程式碼並不多,反而是描述...

鐵人賽 Modern Web DAY 4

技術 真的好想離開 Vue 3 新手村 - Day 4: 從 npm run build (vite build) 簡單認識打包

誰適合看這篇 不知道 npm run dev、npm run build、npm run preview 的用處 不知道「打包」做了哪些事?為什麼前端需要打包...

鐵人賽 Modern Web DAY 11

技術 真的好想離開 Vue 3 新手村 - Day 11: 從原生 JS 理解 Vue 3 響應式基礎 - reactive & ref (下)

Outline 上集回顧 reactive() 特性與限制 什麼情況會失去響應性 ref() 特性與限制 什麼情況會失去響應性 兩個比一比...

鐵人賽 Modern Web DAY 2

技術 [Day02] Vue i18n - 導入 & 基礎用法

i18n 全寫為 internationalization,俗稱的多國語系也常被稱之為本地化 (Localization)。 隨著現在網路的發達和資訊的流通...

鐵人賽 Modern Web DAY 17

技術 Day_17 : 讓 Vite 來開啟你的Vue 之 取得 模板元素 ref

Hi Dai Gei Ho~ 我是Winnie~ 突然想來說說:其實這篇應該要與上篇的 資料定義 ref 一起的,會拉出成為一篇的主要原因是因為當時自己對Vu...

鐵人賽 Modern Web DAY 6
全端成長之旅 系列 第 6

技術 Day.6 Vue3 介紹 Part 1

第一個差異是 Vue 實例的建立方式在 v2 大家通過 new Vue 建立根實例,而 v3 改為使用 createApp import { createApp...

鐵人賽 Modern Web DAY 25

技術 Day 25: 來發 API 吧!Pinia 語法學完馬上用

前言 在 Day 21: 來發 API 吧!Async Composition API setup() 中,是在元件準備渲染時,才在 setup 內發 API...

鐵人賽 自我挑戰組 DAY 18

技術 vue3 Composition API 學習手冊-18 組件emit的用法

上一篇文章我們提到Components可以接收父層傳遞過來的參數進行處理,這次我們首先就來看看子層通知父層的方法。 利用上一篇文章的最後一個範例來進行說明,當時...

鐵人賽 Modern Web DAY 3
派對動物嗨起來! 系列 第 3

技術 D03 - 建立專案:完成 Vue、NestJS、TypeScript 開發環境

本系列文已改編成書「甚麼?網頁也可以做派對遊戲?使用 Vue 和 babylon.js 打造 3D 派對遊戲吧!」 書中不只重構了程式架構、改善了介面設計,還新...

鐵人賽 Modern Web DAY 5

技術 真的好想離開 Vue 3 新手村 - Day 5: Option API 和 Composition API 比一比

前言 Vue 3 提供 Option API 和 Composition API 兩種寫法,Option API 是延伸自 Vue 2 的寫法,Composit...

鐵人賽 Modern Web DAY 7

技術 真的好想離開 Vue 3 新手村 - Day 7: 深入了解 <script setup> 語法糖

誰適合看這篇 想知道 &lt;script setup&gt; 的優點 跟我一樣很好奇為什麼 &lt;script setup&gt; 效能比較好...

鐵人賽 自我挑戰組 DAY 14

技術 vue3 Composition API 學習手冊-14 透過axios載入外部json

在前面“多層次動態選單”的文章中,我們把選單資料放在Javascript中進行描述,可以發現整支Javascript中邏輯運算的部分極少,大多都是描述頁面資料的...

鐵人賽 Modern Web DAY 4
派對動物嗨起來! 系列 第 4

技術 D04 - 門面怎麼可以沒有背景

本系列文已改編成書「甚麼?網頁也可以做派對遊戲?使用 Vue 和 babylon.js 打造 3D 派對遊戲吧!」 書中不只重構了程式架構、改善了介面設計,還新...

鐵人賽 Modern Web DAY 1

技術 真的好想離開 Vue 3 新手村 - Day 1: 前言之系列簡介

前言的前言 嗨,我是安揪拉,住在 Vue 新手村大概一個多月,接下來要一邊寫鐵人賽、一邊接案,希望能成功活下來 QQ,真的好想離開 Vue 3 新手村啊~我蒐集...

鐵人賽 Modern Web DAY 2
派對動物嗨起來! 系列 第 2

技術 D02 - 來打個草稿吧

本系列文已改編成書「甚麼?網頁也可以做派對遊戲?使用 Vue 和 babylon.js 打造 3D 派對遊戲吧!」 書中不只重構了程式架構、改善了介面設計,還新...

鐵人賽 Modern Web DAY 16

技術 [Day16] Vue 3 單元測試 (Unit Testing) - Vue Test Utils + Jest 基本介紹 & 安裝

什麼是單元測試? 單元測試 (Unit Testing) 是針對程式碼的最小單位來進行正確性檢驗的測試工作,並確保程式碼不會在迭代維護的過程中出現 Bug,通過...

鐵人賽 Modern Web DAY 12

技術 真的好想離開 Vue 3 新手村 - Day 12: 認識 nextTick 與 DOM 響應更新時機 feat. template ref

前言 Vue 在官方文件 - Reactivity Fundamentals 中,正式進入 reactive() 和 ref() 之前,先提到了 nextTic...

鐵人賽 Modern Web DAY 6
派對動物嗨起來! 系列 第 6

技術 D06 - 打造遊戲選單按鈕:利用 SVG 產生文字外框

本系列文已改編成書「甚麼?網頁也可以做派對遊戲?使用 Vue 和 babylon.js 打造 3D 派對遊戲吧!」 書中不只重構了程式架構、改善了介面設計,還新...

鐵人賽 Modern Web DAY 27

技術 [前端暴龍機,Vue2.x 進化 Vue3 ] Day27. Vue3 ref & reactive 小練習

說了那麼多,感覺還是有點模糊~ 沒關係,我可能也差不多 ( 哈哈 所以還是透過實作練習,讓自己更了解,看見那更明朗的天空吧 目標 : 透過串接 API 接收取到...

技術 Vue3 串接 Google OAuth 登入 【2022 最新】

前言 大家好,我是 Ryan,這篇文章是我參與 iThome 2022 鐵人賽時與大家分享使用 Nuxt 3 串接 Google OAuth 登入的額外分享,因...

鐵人賽 Modern Web DAY 17

技術 [Day17] Vue 3 單元測試 (Unit Testing) - Vue Test Utils + Jest 基本範例 & 核心語法

在開始進入複雜的內容之前,我想先帶大家認識幾個會大量出現在每一個測試程式碼裡的核心語法,這些語法如果不了解的話可能就沒辦法看懂之後的測試程式碼,所以我們趕快開始...

鐵人賽 Modern Web DAY 7
派對動物嗨起來! 系列 第 7

技術 D07 - 開趴前先 loading 一下:使用 Pinia 與 Composition API

本系列文已改編成書「甚麼?網頁也可以做派對遊戲?使用 Vue 和 babylon.js 打造 3D 派對遊戲吧!」 書中不只重構了程式架構、改善了介面設計,還新...

鐵人賽 自我挑戰組 DAY 10

技術 vue3 Composition API 學習手冊-10 計算屬性的setter

如前一篇所提Computed能夠自動監看指定的數據,當數據發生變化後自動重新計算結果,但如果我們想直接修改Computed的結果,在沒有使用Setter的狀態下...

鐵人賽 Modern Web DAY 10

技術 真的好想離開 Vue 3 新手村 - Day 10: 從原生 JS 理解 Vue 3 響應式基礎 - reactive & ref (上)

前言 一開始認識 reactive() 跟 ref() 真的超困惑,不理解兩者背後的差別,只能硬記個別的使用方式和限制,一直到了解他們背的原理,才有「啊哈~」的...

鐵人賽 Modern Web DAY 21

技術 Day 21: 來發 API 吧!Async Composition API setup() feat. <Suspense>

前言 接下來幾天會以「在 Vue 3 Composition API 處理非同步( 發 API )」為主軸,從新手的角度出發,告訴大家可以在哪些地方、時機發 A...

鐵人賽 Modern Web DAY 8
派對動物嗨起來! 系列 第 8

技術 D08 - 載入就應該要有載入的樣子

本系列文已改編成書「甚麼?網頁也可以做派對遊戲?使用 Vue 和 babylon.js 打造 3D 派對遊戲吧!」 書中不只重構了程式架構、改善了介面設計,還新...

鐵人賽 Modern Web

技術 [專案上線第01天] - 新來的主管說要寫 Vue Test Utils 單元測試

前言 該系列是為了讓看過Vue官方文件或學過Vue但是卻不知道怎麼下手去重構現在有的網站而去規畫的系列文章,在這邊整理了許多我自己使用Vue重構很多網站的經驗...

鐵人賽 Modern Web DAY 15

技術 Day 15: 在 Vue 專案使用 Sass/SCSS +共用變數 (feat. Vite)

Outline 主要分成四個部份 安裝 Sass 預處理器,在 SFC 檔使用 SCSS 撰寫 style 區域引入 SCSS 樣式或變數 全域引入 SCSS...

鐵人賽 Modern Web DAY 5
派對動物嗨起來! 系列 第 5

技術 D05 - 飄吧!多邊形!

本系列文已改編成書「甚麼?網頁也可以做派對遊戲?使用 Vue 和 babylon.js 打造 3D 派對遊戲吧!」 書中不只重構了程式架構、改善了介面設計,還新...