iT邦幫忙

vue3相關文章
共有 252 則文章
鐵人賽 Modern Web DAY 6

技術 [Day06] Vue i18n - Number Formatting (Currency 貨幣)

在本地化 (localize) 專案時,我們可能會遇到需要處理金錢、價錢等貨幣的問題,在顯示價錢時我們會需要依據當前的語系顯示相對應的貨幣符號 ,例如: &lt...

鐵人賽 Modern Web DAY 19

技術 [Day19] Vue 3 單元測試 (Unit Testing) - Event Handling

Event Handling 在開發元件時一定少不了會需要觸發事件的時候,像是 click 事件、input 事件等等,所以我來用簡單的 Counter 來示範...

鐵人賽 自我挑戰組 DAY 24

技術 vue3 Composition API 學習手冊-24 單文件元件設計

之前在「vue.js 3.x 學習手冊 (19) 組件的綜合練習」文章中有提到,如果需要跨文件取用元件的話,需先了解webpack和vue-cli的使用,而前幾...

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

技術 D12 - 歡迎光臨遊戲大廳:使用 Vue Router 切換頁面

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

鐵人賽 Modern Web DAY 24

技術 [Day24] Vue3 E2E Testing: Cypress 基本結構

今天這篇文章主要會介紹 Cypress 的基本結構以及常見的語法,那我們馬上開始吧! 基本結構 Cypress 的測試基本結構是由 Test Group, Te...

鐵人賽 自我挑戰組 DAY 5

技術 vue3 Composition API 學習手冊-5 事件 修飾符

上一篇文章提到了Vue結合了事件上的用法,這篇文章來加強一下事件上的使用: 事件修飾符 事件修飾符在vue裡面也是極為好用,透過下面這個範例來說明: <...

鐵人賽 Modern Web DAY 18

技術 [Day18] Vue 3 單元測試 (Unit Testing) - Conditional rendering & Elements visibility

Conditional Rendering 在寫元件時最常見的就是會使用 v-if 來動態插入和刪除元素,我們馬上來看看下面的範例程式。 const Compo...

鐵人賽 自我挑戰組 DAY 12

技術 vue3 Composition API 學習手冊-12 實作 多層次動態選單

在經歷了前幾篇文章的分享後,這篇文章想要整合一下前面所提到的進度,來製作一個整合性的範例,幫助大家停下腳步想想,除了每個項目分別的作用之外,有沒有什麼事可以透過...

鐵人賽 Modern Web DAY 21

技術 [Day21] Vue 3 單元測試 (Unit Testing) - Props & Computed

Props 與 Computed 是開發元件最常使用的屬性,下面的範例是一個運用 Props 與 Computed 的簡單例子。 import { ref, c...

鐵人賽 自我挑戰組 DAY 30

技術 vue3 Composition API 學習手冊-30 實戰API練習

前面文章提到許多前、後端分離的開發方式,也模擬過很多次資料來自於外部(json)的開發,今天跟大家介紹一個網站,能讓我們真正模擬網頁資料來自於後端工程師所提供A...

鐵人賽 自我挑戰組 DAY 19

技術 vue3 Composition API 學習手冊-19 組件的綜合練習

Vue3 Composition API的文章寫到了Component的階段,想要來整理一下前面的進度,來製作一個綜合的案例,這個案例的規劃如下: 製作一個F...

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

技術 D13 - 來布置一下吧

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

鐵人賽 Modern Web DAY 29

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

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

鐵人賽 Modern Web DAY 30

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

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

鐵人賽 自我挑戰組 DAY 2

技術 vue3 Composition API 學習手冊-2 Virtual DOM所帶來的好處

前一篇文章提到,其實並不是每一個專案都適合使用框架進行開發,應當是了解框架能夠帶來的優點後,在針對自己常接觸的專案進行評估導入,像我身邊許多朋友做的是中、小企業...

鐵人賽 Modern Web DAY 3

技術 【初始ノ章】測試建置:在自己的專案加入單元測試來學測試

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

鐵人賽 自我挑戰組 DAY 20

技術 vue3 Composition API 學習手冊-20 vue cli 環境架設

像前面文章中提到vue是一套漸進式的框架,他適合在各種不同的需求中使用,無論你是只想用它來綁定一些表單資料或是使用他Virtual DOM特性,甚至更深入的使用...

鐵人賽 自我挑戰組 DAY 4

技術 vue3 Composition API 學習手冊-4 事件

接續昨天的範例,我們透過下拉式選單來改變vue中的資料,視圖就會跟著連動改變,這部分是透過Javascript原生的事件去觸發函數來執行,也是在網頁中常見的動作...

鐵人賽 自我挑戰組 DAY 26

技術 vue3 Composition API 學習手冊-26 Dynamic Route

延續上一篇文章,今天來介紹動態路由,在瀏覽網頁的時候如果大家有注意,許多網頁在瀏覽上都會經由網址上傳遞參數後來決定頁面內顯示的內容,例如: 雖然頁面中顯示的...

鐵人賽 Modern Web DAY 3

技術 [Day03] Vue i18n - Message Format Syntax

紅框中的句子 Welcome to Your Vue.js App 如果我們想要將其中的 Vue.js 變成隨時可以替換時該怎麼辦? 上一篇我們介紹的基礎用法...

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

技術 D21 - 大海、浮冰、企鵝勒?:使用 babylon.js 打造 3D 遊戲

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

鐵人賽 Modern Web DAY 22

技術 [Day22] Vue 3 單元測試 (Unit Testing) - Testing Vuex

今天這篇文章主要想介紹兩個重點: 測試使用 Vuex 的元件 測試 Vuex 本身 Testing Component with Vuex 下面是一個使用了...

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

技術 D14 - 裝飾大廳細節

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

鐵人賽 Modern Web DAY 26

技術 [Day26] Vue3 E2E Testing: Cypress 實戰之 Todo MVC (中)

前情提要 昨天,我們為了讓大家更加了解 Cypress 的語法以及要如何攥寫 E2E 測試,所以開始規劃為 Vue.js • TodoMVC 攥寫 E2E 測...

鐵人賽 Modern Web DAY 1

技術 【初始ノ章】前言與 TOC

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

鐵人賽 Modern Web DAY 9

技術 【概念ノ章】測試脈絡-3. 決定測試情境與測試案例

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

鐵人賽 Modern Web DAY 20

技術 [Day20] Vue 3 單元測試 (Unit Testing) - Form Elements Handling

幾乎每個網站都會使用到表單元素 (Form Elements),例如登入頁、註冊頁就有非常多個輸入框(<input>)在其中,又或者是網站的 hea...

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

技術 Day.14 Vue3 介紹 Part 9

今天介紹 watchEffect 與 Lifecycle hooks watchEffect const count = ref(0) watchEffect...

鐵人賽 Modern Web DAY 26

技術 [前端暴龍機,Vue2.x 進化 Vue3 ] Day26. Vue3 Composition API 使用(二)

前一篇說到 該怎麼寫 data 的資料,找回雙向綁定機制 !!!這邊先小小的補充一下 XD 在 Options API 我們 data 裡定義到的東西都可以被...

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

技術 Day.7 Vue3 介紹 Part 2

今天介紹 Vue 3 的一項優化:Global API Treeshaking Vue 2 有些全域 API 例如 Vue.nextTick、Vue.set這些...