iT邦幫忙

vue3相關文章
共有 411 則文章
鐵人賽 Modern Web DAY 29

技術 Day 29: Vue 響應式基礎 - watch & computed 不踩坑

前言 在 Day 9 和 10 的文章中,我們提到 Vue 3 響應式基礎 - reactive & ref,主要用來攔截資料的讀取跟寫入,讓 Vue...

鐵人賽 Modern Web DAY 18

技術 Day 18: v-slot 到底用在哪?從應用學 v-slot 語法

前言 要在父子元件之間傳遞變數或內容的時候,我們可以使用 props,但如果想要傳遞進去的是一段 template 片段,就要使用到 slot。 最簡單明瞭的...

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

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

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

鐵人賽 Modern Web DAY 19

技術 Day 19: 你可能不知道的 v-model - 為何多選綁定陣列不能用 reactive()?

前言 在處理響應式多選表單時,使用 v-model 綁定陣列類型的資料,用 ref() 沒問題,但用 reactive() 卻行不通QQ~為什麼~~~ 就是下面...

鐵人賽 自我挑戰組 DAY 10

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

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

鐵人賽 Vue.js DAY 13
Vue3歡樂套件箱耶 系列 第 13

技術 開箱13:圖片轉文字不專業版~Tesseract.js範例應用

本篇開箱Tesseract.js是能圖像中取得文字的工具 介紹 Tesseract.js 是一個 JavaScript 函式庫,它是基於 Google 的...

鐵人賽 Modern Web DAY 9

技術 真的好想離開 Vue 3 新手村 - Day 9: v-for 與他的坑 feat. key & v-if

Outline 語法簡介 v-for 與 key 的關係 為什麼要綁定 key 什麼狀況下不能用 index 作為 key v-if & v-...

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

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

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

鐵人賽 Modern Web DAY 22

技術 Day 22: Composition API async setup() + await 的限制

上集回顧 Composition API 元件中的 setup() 函式可以作為非同步函式使用,在內部可以使用關鍵字 await 等待非同步陳述式執行。 一切聽...

技術 如何用 Google Sheets / Excel 當作資料庫?

文章出處 Google 試算表名稱是 Google Sheets,但為了讓大家好理解,以下也會稱 Google Excel。 這一篇說明如何把 Googl...

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

技術 D05 - 飄吧!多邊形!

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

鐵人賽 Modern Web DAY 29

技術 【語法ノ章】測試替身(Test Double)feat. Vitest Mocking API(Function, Globals & Modules)

本系列文已重新編排並新增內容出版成冊,若您喜歡透過書籍來閱讀的話,歡迎至天瓏書局下單選購唷! ShawnL - Vue.js 3前端測試入門從這裡開始...

鐵人賽 Modern Web DAY 4

技術 【初始ノ章】測試建置:Vitest Config Setting

本系列文已重新編排並新增內容出版成冊,若您喜歡透過書籍來閱讀的話,歡迎至天瓏書局下單選購唷! ShawnL - Vue.js 3前端測試入門從這裡開始...

鐵人賽 Modern Web DAY 1

技術 Day_01: 讓 Vite 來開啟你的Vue 前言

Hi Da Gei Ho~ 初次見面,我是Winnie~ 我是一位剛轉職六個月的菜鳥前端(前身是網頁設計師),如果對於我的轉職的過程有一絲好奇的朋友的可以看看...

鐵人賽 Vue.js DAY 2
Vue3歡樂套件箱耶 系列 第 2

技術 開箱2:最愛跟你拖拖拉拉了~vue.draggable範例應用

本篇開箱的是vue.draggable.next,是一款簡單上手vue3的拖曳插件也就是vue.draggable升級版本。 ▲ 官方典型範例示意圖 介紹...

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

技術 D09 - NestJS 是啥?好吃嗎?

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

鐵人賽 Modern Web DAY 27

技術 Day 27: 從 VueUse - useAsyncState 認識 Composable 和非同步處理

前言 會想寫這個題目有兩個原因: 想認識 composable 函式,體驗 Composition API 的強大之處,為什麼可以讓跨元件複用程式碼變得更方便...

鐵人賽 Modern Web DAY 12

技術 Vue3 + TypeScript 好搭檔 - D12

Vue3 + TS Vue3全面可以無縫搭配TS寫法,不用再安裝其他有的沒有的套件!(超棒!) 在Vue裡面使用TS就是在這邊宣告: <sciprt la...

鐵人賽 自我挑戰組 DAY 3

技術 vue3 Composition API 學習手冊-3 起手式

上一篇文章介紹過了選擇使用前端框架的因素,若你的專案符合使用他的條件,或是你現在正在找一份前端工程師的工作,那認識框架就變成勢在必行的功課了,我們選擇介紹的前端...

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

技術 D10 - 讓前後端接上線:使用 Socket.IO 進行連線

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

鐵人賽 自我挑戰組 DAY 23

技術 vue3 Composition API 學習手冊-23 安裝scss編譯器

當我們透過vue-cli來建置專案後,因為預設也會幫我們安裝好webpack打包工具,所以我們可以開始使用scss來撰寫我們的樣式檔,這會讓管理上變得比較方便,...

鐵人賽 Vue.js DAY 2
試試用Vue建立網站吧 系列 第 2

技術 Day2-試試Vue3-建立vite專案

(1)建立 vite 專案透過命令提示字元以 npm 方式建立 vite 專案。 STEP1. 開啟命令提示字元視窗Windows 作業系統中點擊開始>搜...

鐵人賽 Modern Web DAY 8

技術 [Day08] Storybook - 基本介紹 & 安裝

Credit: https://www.behance.net/gallery/35988339/Style-guide-e-commerce-web-app...

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

技術 Day.11 Vue3 介紹 Part 6

今天介紹一些 v-model 在 v3 一些改動以及新特性 v-model 搭配 Computed 使用 這個範例只有在 Vue 3 的文件中出現不過看起來 V...

鐵人賽 Modern Web DAY 30

技術 Day 30: Vue 3 響應式原理 - effect 如何響應 (無敵簡化版)

註:本篇屬於沒有很重要,但我很好奇系列 這篇不會著重在原始碼,主要是介紹 Vue 是用什麼概念去蒐集依賴。主要學習資源是 Vue Mastery、官網文件和部份...

鐵人賽 Vue.js DAY 3
試試用Vue建立網站吧 系列 第 3

技術 Day3-試試Vue3-引入Bootstrap套件

(1)安裝 Bootstrap 套件bootstrap 最新版本請參考這個網站。 Visual Studio 「工具列/終端機/新增終端機」開啟終端機並輸入以下...

鐵人賽 自我挑戰組 DAY 1

技術 vue3 Composition API 學習手冊-1 框架的選擇與導入

在撰寫這篇文章的時候vue 3已經來到了RC9的階段,雖然說可能與正式推出會有差距,但理論上差異應該不會太大,而本系列的文章也不是站在“升級”的角度來進行介紹,...

鐵人賽 自我挑戰組 DAY 27

技術 vue3 Composition API 學習手冊-27 以前叫mixin的東西

前幾篇文章已經介紹過vue的元件化設計的特色,不僅僅是頁面中的小元件,我們甚至可以將整個頁面都做成一個元件,今天來分享的是除了元件能共用之外,連函數也可以共用,...

鐵人賽 自我挑戰組 DAY 6

技術 vue3 Composition API 學習手冊-6 雙向資料綁定

在之前的範例掩飾中,我們透過一個下拉式選單更改後來改變網頁中的值,實現的方法有兩種: 不使用框架,透過Script進行資料更新與畫面更新 使用vue框架,透過...

鐵人賽 Vue.js DAY 6
試試用Vue建立網站吧 系列 第 6

技術 Day6-試試Vue3-表單使用Vee Validate驗證

基本上表單驗證前後端都需要做,前端可做簡單的基礎驗證(如 mail 須為正確格式、必填欄位等),後端則負責較嚴謹的驗證。此篇針對註冊頁面的表單增加 Vee Va...