iT邦幫忙

元件開發相關文章
共有 39 則文章
鐵人賽 Modern Web DAY 17

技術 【Day17】常見切版應用(1)可滑動的文章頁面

前些日子裡,我們將網頁三件套的基礎語法都大致講解完畢了,但理論往往是需要以實作結果去支持的,雖然有了計算機這一作品,但網頁中幾乎是用不到該功能 ── 所以本日的...

鐵人賽 Modern Web

技術 Day 31:「不夠吃了...哪裡還有紅蘿蔔?」- Tailwind 和 Vue 的資源分享

大家有體會到自己建立元件的樂趣嗎? 如果沒有也沒關係~因為接下來會分享一些相關資源哦! 其實兔兔知道的資源並不是很多啦,因為兔兔的東西都會自己重造輪子 XD 不...

鐵人賽 Modern Web DAY 30

技術 Day 30:「很刺眼,這樣太亮了啦!」- 深色模式切換開關

「最近眼睛都一直盯著電腦,超痠的」「而且這台螢幕還壞掉,不能調整亮度」 這樣啊 ... 辛苦了,不過可以不用調亮度啊,把主題換成深色主題就好了! 「深色主題?...

鐵人賽 Modern Web DAY 29

技術 Day 29:「欸!你填一下這張表!」- 彈跳視窗、Modal

「注意,您的表單尚未填寫完成」 好,我知道了。 (按下確定) 欸? 為什麼關不掉!?不是按下確定就要關掉了嗎? 這是誰做的爛東西啊,看我怎麼整死你!   (開...

鐵人賽 Modern Web DAY 28

技術 Day 28:「今天幾月幾號啊?」- 簡易日曆

「今天是幾月幾號啊?」 今天是 ... 等等!不准看電腦上的! 你先等我造出一個,我們要看日期 ... 就看我們自己做的日曆! (這兔是有什麼毛病,連這個時候...

鐵人賽 Modern Web DAY 27

技術 Day 27:「流浪到淡水!」- 手風琴選單

嘿,今天是怎樣?都沒有人交作業,是不是昨天的太小菜一疊了! 今天是昨天的延伸,但說難也難不到哪裡去啦~ 因為相信經過前面的兩天,應該已經很清楚步驟了吧? 跟前...

鐵人賽 Modern Web DAY 26

技術 Day 26:「按鈕博物館」- 輕鬆變化各種按鈕元件

哈囉大家好~不知道昨天的進度條做的怎麼樣? 想要交作業的人可以貼在昨天的留言區給我呦! 那我們今天的內容也很簡單,二話不說,要開始囉? 前置作業 跟昨天的環...

鐵人賽 Modern Web DAY 25

技術 Day 25:「好慢喔,下載多少了?」- 進度條

終於到了我們的元件篇啦!!! 今天是第一個元件,所以稍微簡單一點。我們要來做下載的進度條~ 前置作業 我們這次要使用的專案環境是 Vue 的,所以之前建立過...

鐵人賽 Modern Web DAY 24

技術 Day 24:「Switch 也要換遊戲片啦~」- Slot 插槽

不知道大家有沒有買 Switch 呢? 雖然兔兔沒有 Switch,但我知道有遊戲片都不便宜呀! 然後,遊戲總會有玩膩的時候這時候就要把記憶卡插槽裡的卡片拿出...

鐵人賽 Modern Web DAY 23

技術 Day 23:「兒子,這是你的零用錢」- 元件間的資料傳遞

兔大夫:「請問是兔豪的家屬嗎?」 兔豪爸:「是,我就是。 請問我鵝子他...」 兔大夫:「抱歉,我盡力了 ...」 「他得的是一種 "會常常跟你討零...

鐵人賽 Modern Web DAY 22

技術 Day 22:「您好,歡迎登入 Vuta 奇幻世界」- 事件處理

「燈愣~」 (以下為系統登入事件的自動通知) 「您好,兔兔」「歡迎登入 Vuta 奇幻世界」 咦 ...?系統登入事件?摁,我昨天是有登入沒錯。 「燈愣~」...

鐵人賽 Modern Web DAY 21

技術 Day 21:「爸爸說,家裡要重新裝潢了」- 關於樣式的屬性綁定講解

兔女鵝:「爸爸,兔兔昨天講的好難」「有一大堆東西要記起來,要學不動了 QQ」 兔跋:「一定是家裡的裝潢太壓抑,要換!」 兔女鵝:「不是,爸爸...應該跟裝潢沒...

鐵人賽 Modern Web DAY 20

技術 Day 20:「資料拿來我就幫你改」- Vue 基礎觀念及常用語法

嘿~昨天的內容還行嗎? 「兔兔,昨天突然就接收到大量語法!」 齁,這個我就要說聲不好意思~原本是應該先介紹基本觀念,但我們今天基本觀念要寫在 SFC 裡面練習...

鐵人賽 Modern Web DAY 6

技術 Day 06 - Design System — 為什麼前端工程師也該知道它?

新章 突入!終於進入到期待已久的第二章 Design System 啦! 那在講 Design System 之前想要先提到一個觀念:「前期規劃 > 實作...

鐵人賽 Modern Web DAY 19

技術 Day 19:「通通拿去做雞精啦!」- Vue SFC

嗨大家~昨天有沒有試著用 Creator 建立專案呢! 沒有的話現在趕快去複習哦,因為我們今天會用到~ 之前有說過 Vue 是漸進式的,所以你用多用少都可以,...

鐵人賽 Modern Web DAY 5

技術 Day 05 - 行前說明 — UI 元件分類你知多少?

今天是行前說明的最後一篇了,前面幾篇都是很架構面的知識,而今天要講的就是真的很貼近 UI 元件的分類系統了。 首先想先回答一個問題:「UI 元件為什麼要分類呢...

鐵人賽 Modern Web DAY 18

技術 Day 18:「極速開發」- Vitawind

「閃電 + 疾風的組合嗎? 不錯不錯!」 既然我們之前都說了要用 Vue + Tailwind 來製作元件,那建立一個專案把這兩個東西安裝在一起總是必要的吧?...

鐵人賽 Modern Web DAY 4

技術 Day 04 - 行前說明 — 談談元件化開發與開發流程

如昨天預告的一樣,今天來介紹元件化開發的技術背景,它是什麼、為什麼重要,最後再講一下元件的開發流程。 首先,「元件化開發」是由於前後端分離跟前端框架的興起而達成...

鐵人賽 Modern Web DAY 17

技術 Day 17:「我們,是好朋友哦~」- Vue 簡介

嗨各位,Tailwind 篇結束了,不知道會不會有人敲碗更多呢? 還想知道更多的話也沒有問題~不過今天要進入全新的篇章! 要說為什麼的話 ... 因為要想讓...

鐵人賽 Modern Web DAY 3

技術 Day 03 - 行前說明 — 在 MVC & MVVM 的 UI 元件

相信網路上其實已經有不少文章在談架構了,我的資歷也尚淺,今天雖然會介紹架構,但是主要會側重的點會是在 UI 元件在這樣的架構中的角色定位,我們可以如何去思考,...

鐵人賽 Modern Web DAY 16

技術 Day 16:「寶藏,都藏在那裡了!」- Tailwind JIT 模式

JIT、JIT 的叫了這麼多天,終於就是今天了!今天就是要來講解 JIT 模式哦~~ JIT 模式真的快非常非常多,快到你覺得你前面幾天根本在浪費人生 XD...

鐵人賽 Modern Web DAY 2

技術 Day 02 - 行前說明 — 網頁微切版架構 和 UI 元件

作為正式開始的第一篇要來講的是很基礎的網頁切版和怎麼去看網頁中有哪些元件,會分兩部分: 網頁微切版架構:讓還不太熟網頁的人理解一般網頁 UI 的架構大概會怎麼...

鐵人賽 Modern Web DAY 15

技術 Day 15:「你真的不減肥嗎...?」- Tailwind 的生產環境優化

兔大媽:「百貨公司在跳樓...大!拍!賣!!!(口水)」「趕快來去搶!!!」 (兔大媽掏出了小卡進行一番熱血的戰鬥) 兔大媽:「哇,害啊,買太多提不回家了....

鐵人賽 Modern Web DAY 1

技術 Day 01 - 行前說明 — 關於 UI 元件你所該知道的事

大家好,我是讀哲學讀到寫 Web 的 Parker ,到現在約有兩年左右的開發經驗,遙想當初真的是完完全全從 0 開始,在這過程中,除了 HTML、CSS、J...

鐵人賽 Modern Web DAY 14

技術 Day 14:「怎麼跟阿嬤的裹腳布一樣啦!」- 提取成元件

「噁 ... 那條是什麼鬼東西啦!」「對啊 ... 也太可怕了吧 ...」 「嘔! 還很臭欸 ...」「那是阿嬤的裹腳布吧!!!!」 「不是啦 ...,那個就...

鐵人賽 Modern Web DAY 13

技術 Day 13:「誰還在背字典?」- Tailwind IntelliSense 插件

嗨大家好,昨天建立的如何呢!我想應該不會遇到太多的困難吧~ 雖然上次沒有明講,但我想應該大部分人都是用 VS Code 在開發吧? 既然如此我們就來介紹個好用...

鐵人賽 Modern Web DAY 12

技術 Day 12:「我可不可以 CDN 就好?」- Tailwind 安裝及設定

前面的功能介紹和小練習都度過了,我們現在要來學習如何安裝和設定囉!!! 不過說到安裝啊,有些人可能會想: 「兔兔!如果我只是想要做簡單的應用和練習呢? 還要安...

鐵人賽 Modern Web DAY 11

技術 Day 11:「動起來!動起來!」- 用 Tailwind 簡單做出過渡和動畫效果

還記得我們在之前做過變化模式嗎?沒錯,就是滑鼠懸停之後會變色的那個。 我們今天呢,就是要來幫它們加上過渡效果和動畫! 今天我們就不多講廢話了,直接開始吧! ...

鐵人賽 Modern Web DAY 10

技術 Day 10:「伸縮自如的,橡膠...」- 斷點 / RWD

大家昨天的作業有寫嗎?應該寫得很開心吧 XD 是啊,畢竟可以用這麼簡單的方式來完成,就能觸發 hover 之類的狀態然後改變樣式。這可是原本純 CSS、Sas...

鐵人賽 Modern Web DAY 9

技術 Day 09:「啊~不要碰我!我會變色~」- 變化模式 (Variants)

欸欸欸!別誤會啊!可別讀完標題就跑掉了。 「可是兔兔,你那個標題不妥吧!」 齁,我才是覺得你想的不妥咧~那個是會變顏色的意思啦! 今天,就是要來介紹一些像是滑...