iT邦幫忙

vue3相關文章
共有 81 則文章
鐵人賽 Modern Web DAY 27

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

前情提要 前兩天,我們開始為 Vue.js • TodoMVC 攥寫 E2E 測試,並分別在 Cypress 實戰之 Todo MVC (上) 完成了 C...

鐵人賽 Modern Web DAY 26

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

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

鐵人賽 Modern Web DAY 25

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

在經過前兩天簡單的介紹 Cypress,現在我想透過一個實際的範例來讓大家更加了解 Cypress 以及到底如何攥寫 E2E 測試。 Vue3 E2E Te...

鐵人賽 Modern Web DAY 30

技術 [前端暴龍機,Vue2.x 進化 Vue3 ] Day30.Vue3 網頁小遊戲(完結篇) | ♾ 台版魷魚遊戲,玩?還是不玩?

終於~ 來到鐵人賽的最後一天啦 今天的工作就是把小專題剩下的功能給完成,為這次的鐵人賽歡呼~ 完賽啦!!! 我的 vue 翻牌配對小遊戲 修改為按下卡牌後只將該...

鐵人賽 Modern Web DAY 24

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

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

鐵人賽 Modern Web DAY 29

技術 [前端暴龍機,Vue2.x 進化 Vue3 ] Day29.Vue3 網頁小遊戲(一) | ♾ 台版魷魚遊戲,玩?還是不玩?

免責聲明: 最近跟著中了"魷魚遊戲"的毒,哈哈哈 這個遊戲,相信大多數的人都有玩過~ 不過,我們的遊戲沒有大筆獎金,也不需要打打殺殺 XD...

鐵人賽 Modern Web DAY 23

技術 [Day23]Vue3 E2E Testing: Cypress 基本介紹

What's Cypress Cypress 是 Vue.js 官方推薦的一個 E2E Testing Library,也是這次 E2E Testing 主題所...

鐵人賽 Modern Web DAY 22

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

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

鐵人賽 Modern Web DAY 28

技術 [前端暴龍機,Vue2.x 進化 Vue3 ] Day28.Vue3 小補充 Magic ~

下面來介紹一下,Vue 3 的一些小小魔法(個人覺得很 Magic ~ 哈哈), 有些是補充說明, 有些可能會很少使用到,就連官方都有提醒 " 請謹...

鐵人賽 Modern Web DAY 27

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

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

鐵人賽 Modern Web DAY 21

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

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

鐵人賽 Modern Web DAY 20

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

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

鐵人賽 Modern Web DAY 26

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

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

鐵人賽 Modern Web DAY 25

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

在 Composition API 當中我們可以將響應式資料和相關業務邏輯結合到一起,是因為 Vue3 的 setup 方法 setup setup 是 V...

鐵人賽 Modern Web DAY 19

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

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

鐵人賽 Modern Web DAY 24

技術 [前端暴龍機,Vue2.x 進化 Vue3 ] Day24.Vue3 Options API & Composition API 介紹

在 Vue3 中我們可以使用 Options API 或是 Composition API 選擇一種方式來撰寫,下面來看看甚麼是 Options API ? 甚...

鐵人賽 Modern Web DAY 18

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

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

鐵人賽 Modern Web DAY 23

技術 [前端暴龍機,Vue2.x 進化 Vue3 ] Day23.正式進化-Vue3 起手式

ゴキゲンな蝶になって きらめく風に乗って 今すぐキミに会いに行こう 余計な事なんて忘れた方がマシさ .... Vue2.x 進化 回憶起當時的數碼寶...

鐵人賽 Modern Web DAY 17

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

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

鐵人賽 Modern Web DAY 16

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

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

鐵人賽 Modern Web DAY 15

技術 [Day15] Storybook - Publish Storybook (Static web application & Chromatic)

我們透過前幾天介紹的所有內容 Storybook - 基本介紹 & 安裝 Storybook - What's a story and how...

鐵人賽 Modern Web DAY 17

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

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

鐵人賽 Modern Web DAY 14

技術 [Day14] Storybook - Colors & Typography

Storybook 除了可以為元件攥寫 Story 以外,也可以攥寫純內容的說明文件,不過純內容的說明文件只能使用上一篇所介紹的 MDX 格式,所以如果還太不熟...

鐵人賽 Modern Web DAY 13

技術 [Day13] Storybook - MDX

MDX 是 Storybook 提供的另一種攥寫文件的格式,MDX 結合了 Markdown 和 JSX 的標准文件格式,使我們可以用一些 Markdown 語...

鐵人賽 Modern Web DAY 12

技術 [Day12] Storybook - Writing Docs

DocsPage DocsPage 是由 Storybook Docs 所提供的頁面,無需任何的設定自動就會從 Stories 和元件中的 props, emi...

鐵人賽 Modern Web DAY 11

技術 [Day11] Storybook - Controls

Storybook 有一個很強大的輔具工具 Controls ,它提供一個 GUI 介面讓我們可以即時的調整元件的參數,必且會立即在 Canvas 中改變元件的...

鐵人賽 Modern Web DAY 10

技術 [Day10] Storybook - Configure story rendering

在 Storybook - 基本介紹 & 安裝 有提到 .storybook/preview.js 這支 js 檔是用來控制 Story 呈現的方式,它...

鐵人賽 Modern Web DAY 12

技術 Day_12 : 讓 Vite 來開啟你的Vue 之 來!開始你的 Vue 3

Hi Dai Gei Ho~ 我是Winnie~ 進入Vue章節前的 溫腥提醒: 在之後的文章中,預計不會針對 Vue 的基本使用做深入的講解(如:v-mod...

鐵人賽 Modern Web DAY 9

技術 [Day09] Storybook - What's a story and how to write

Story 是元件呈現狀態的描述,開發者可以為每個元件攥寫多個 Story,也就是說元件可能會因為不同的參數組合而有不同的樣貌,而我們可以透過定義 Story...

鐵人賽 Modern Web DAY 8

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

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