iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 0 留言 659 瀏覽

鐵人賽 Vue.js DAY 25

深入 Vue.js 世界 : 30 Days 核心概念與實作系列第 25 篇

技術 DAY 25 - Vue SPA 單頁式/ MPA 多頁式 / Nuxt SSR / CSR

DAY 25 - Vue SPA 單頁式/ MPA 多頁式 / Nuxt SSR / CSR 今日前言接下來會提到 Nuxt 渲染方式，那就不得不提到本身...

阿蘇蘇 ‧ 2023-10-10 ‧團隊大船要開囉

0 Like 0 留言 950 瀏覽

鐵人賽 Modern Web DAY 14

前端技能樹的十萬個為什麼系列第 14 篇

技術 Day 14 - 為什麼要用 React Router

前言現在逛網站，其實愈來愈熟悉連續不間斷的操作體驗，也愈來愈沒耐心，如果按了按鈕還會跳白色畫面等個幾秒鐘，即便只是閃一下，都會默默在心裡扣分XD 而 Reac...

ycchiuuuu ‧ 2022-09-29

0 Like 0 留言 771 瀏覽

技術 Java 開發 WEB 的好平台 -- Grails -- (3) 建立一個 SPA 的 Grails 專案

或許有人會問「那我要開發 SPA 網站時，要如何跟 Grails 搭配呢？」。這個問題的答案很簡單，Grails 已經設想到這情況。在使用 IntelliJ-I...

wureka ‧ 2021-11-13

1 Like 0 留言 1102 瀏覽

鐵人賽 Modern Web DAY 11

關於我作夢變成工程師這檔事（Angular 篇）系列第 11 篇

技術第 11 天範本驅動表單的動態檢核訊息｜ngSubmit

前情提要昨日實作其中一個英雄表單欄位「姓名」後，演示了如何使用 FormControl 表單控制項搭配範本參考變數（Template Reference）來掌...

tomasysh ‧ 2021-09-26

0 Like 0 留言 5820 瀏覽

鐵人賽自我挑戰組 DAY 29

不用前端框架手把手打造基礎SPA網站系列第 29 篇

技術 [DAY29]番外篇-使用fetch傳送表單資料

昨天我們介紹fetch用get方式來請求資料，並將取得的資料轉為JSON格式做運用，今天要來介紹fetch的post方法，用非同步的方式來傳送表單資料。以下開始...

river_huang ‧ 2020-10-13

0 Like 0 留言 1939 瀏覽

鐵人賽自我挑戰組 DAY 28

不用前端框架手把手打造基礎SPA網站系列第 28 篇

技術 [DAY28]番外篇-使用fetch發送請求

大家好，距離完賽越來越近了，過完最後一天的雙十連假，心情也開始憂鬱了QQ，還好本系列複雜的文章差不多都介紹完了，終於不用再熬夜了。什麼是fetch? 今天要來...

river_huang ‧ 2020-10-12

0 Like 0 留言 4094 瀏覽

鐵人賽自我挑戰組 DAY 27

不用前端框架手把手打造基礎SPA網站系列第 27 篇

技術 [DAY27]番外篇-用Javascript在SPA中實做Bootstrap Modal 之二

延續昨日的主題，我們用Javascript搭配Bootstrap，完成了Modal模組化實做Alert Modal(警告視窗)，為了延伸更多的互動，今天再來嘗試...

river_huang ‧ 2020-10-11

2 Like 0 留言 15857 瀏覽

鐵人賽自我挑戰組 DAY 26

不用前端框架手把手打造基礎SPA網站系列第 26 篇

技術 [DAY26]番外篇-用Javascript在SPA中實做Bootstrap Modal

大家好，前幾天實做中有用到Bootstrap UI的Modal(彈出互動視窗)元件，因應這幾年使用者越來越注重UI的精緻程度，所以應用在開發上也會常來取代瀏覽器...

river_huang ‧ 2020-10-10

0 Like 0 留言 5299 瀏覽

鐵人賽自我挑戰組 DAY 23

不用前端框架手把手打造基礎SPA網站系列第 23 篇

技術 [DAY23]進階應用 - 將網址參數傳入元件

大家好，我們今天來點特別的，前面我們在實做Router的篇章中，成功運用正規表示式比對網址hash的部份，來找出對應的路徑和元件。不過有使用過框架的大大們就知道...

river_huang ‧ 2020-10-07

0 Like 0 留言 1604 瀏覽

鐵人賽自我挑戰組 DAY 22

不用前端框架手把手打造基礎SPA網站系列第 22 篇

技術 [DAY22]進階應用 - 元件內部共用函式調用

在開發階段通常會建立許許多多的函式來開發功能，為了有效管理程式碼，有時會重複地使用部份函式，所以我們今天要來實做在SPA中，如何管理並使用共用的函式，以下正式開...

river_huang ‧ 2020-10-06

0 Like 0 留言 1768 瀏覽

鐵人賽自我挑戰組 DAY 21

不用前端框架手把手打造基礎SPA網站系列第 21 篇

技術 [DAY21]進階應用 - 監聽事件的處理(下篇)

大家好，延續昨天的主題，我們希望可以對父層元件body使用新增/移除eventListeners來綁定監聽事件，並且需要一個方法，可以在切換頁面後移除曾經註冊監...

river_huang ‧ 2020-10-05

0 Like 0 留言 3672 瀏覽

鐵人賽自我挑戰組 DAY 20

不用前端框架手把手打造基礎SPA網站系列第 20 篇

技術 [DAY20]進階應用 - 監聽事件的處理(上篇)

今天要來談談SPA監聽事件的處理，由於篇幅的關係，文章分成上下兩篇，那麼就開始今天的主題吧。我們知道Javascript可以監聽瀏覽器事件，而且可以針對不同事件...

river_huang ‧ 2020-10-04

0 Like 0 留言 1325 瀏覽

鐵人賽自我挑戰組 DAY 19

不用前端框架手把手打造基礎SPA網站系列第 19 篇

技術 [DAY19]進階應用 - 元件內部State的應用

什麼是State 當我們在設計某些功能時，會需要把值暫時保存起來並存至變數供日後使用，state就像component裡的變數，當UI要顯示某個state，就可...

river_huang ‧ 2020-10-03

0 Like 0 留言 1276 瀏覽

鐵人賽自我挑戰組 DAY 18

不用前端框架手把手打造基礎SPA網站系列第 18 篇

技術 [DAY18]進階應用 - SPA簡易生命週期實現

什麼是生命週期在進入這個主題前，首先需要了解什麼是網頁的生命週期。在以往傳統網頁，每頁都是獨立分開的個體，生命週期的起算，從網頁開始讀取，到DOM(Docum...

river_huang ‧ 2020-10-02

0 Like 0 留言 1979 瀏覽

鐵人賽自我挑戰組 DAY 17

不用前端框架手把手打造基礎SPA網站系列第 17 篇

技術 [DAY17]進階應用 - 幫你的SPA套上Bootstrap

前面我們以原生Javascript手動完成SPA的基礎架構，從建立Component，到設定Route與Router，並搭配Webpack進行模組化的開發。前面...

river_huang ‧ 2020-10-01

1 Like 0 留言 1805 瀏覽

鐵人賽自我挑戰組 DAY 16

不用前端框架手把手打造基礎SPA網站系列第 16 篇

技術 [DAY16]手動打造SPA - 建立Router與Route(下篇)

大家好，昨天我們建立了Route並設定好路徑與匹配對應的元件，今天目標要來繼續完成Router。Router作為判斷符合設定的路徑並匹配對應的Component...

river_huang ‧ 2020-09-30

0 Like 0 留言 2607 瀏覽

鐵人賽自我挑戰組 DAY 15

不用前端框架手把手打造基礎SPA網站系列第 15 篇

技術 [DAY15]手動打造SPA - 建立Router與Route(上篇)

昨天我們建立了Component做為SPA裡的頁面之後，再來要建立一種方式，可以動態判斷網址與對應的頁面元件，SPA中的路由(Router)與路徑(Route)...

river_huang ‧ 2020-09-29

0 Like 0 留言 1133 瀏覽

鐵人賽自我挑戰組 DAY 14

不用前端框架手把手打造基礎SPA網站系列第 14 篇

技術 [DAY14]手動打造SPA - 建立Component

上一篇我們使用Node建立了基本的開發環境與安裝套件後，今天就來建立元件(Component)吧！前面有提到SPA render的原理，以及建立Componen...

river_huang ‧ 2020-09-28

0 Like 1 留言 1829 瀏覽

鐵人賽自我挑戰組 DAY 13

不用前端框架手把手打造基礎SPA網站系列第 13 篇

技術 [DAY13]手動打造SPA - 環境初始化建置

經過前面漫長的鋪陳，差不多是時候來進行SPA完整的實做了，接下來我們就來試試用Node搭配原生JS建立單頁應用網站吧! 建立專案這邊我們先新建一個專案資料夾，...

river_huang ‧ 2020-09-27

1 Like 0 留言 5261 瀏覽

鐵人賽自我挑戰組 DAY 12

不用前端框架手把手打造基礎SPA網站系列第 12 篇

技術 [DAY12]無痛模組化Javascript，匯出引入so easy

相信大家應該都有這樣的經驗，當同一隻JS裡程式碼越寫越多，維護起來是一件很頭痛的事。如果將一隻JS拆分多個檔案出來，雖然是拆開了，但相互調用變數只能透過全域變數...

river_huang ‧ 2020-09-26

1 Like 0 留言 2395 瀏覽

鐵人賽自我挑戰組 DAY 9

不用前端框架手把手打造基礎SPA網站系列第 9 篇

技術 [DAY09]小試身手-使用hash做出SPA

大家好，昨天我們用history API來實做簡單的SPA，今天我們要來實做第二種方式，使用location.hash做出SPA。準備畫面跟昨天模式一樣，先...

river_huang ‧ 2020-09-23

0 Like 0 留言 1662 瀏覽

鐵人賽自我挑戰組 DAY 8

不用前端框架手把手打造基礎SPA網站系列第 8 篇

技術 [DAY08]小試身手-使用history做出SPA

大家好，自從開賽已過了一周了，首先給自己一點掌聲，耶呼，大家一起繼續努力吧! 第一周主要聊些SPA的基本概念，今天我們來點有趣的，直接用簡單的範例來試做SPA...

river_huang ‧ 2020-09-22

0 Like 0 留言 3365 瀏覽

鐵人賽自我挑戰組 DAY 7

不用前端框架手把手打造基礎SPA網站系列第 7 篇

技術 [DAY07]SPA路由的應用(下篇)

各位好，延續昨天的內容，今天要說明如何透過監聽事件，來得知網址產生變化後的行為: 我們知道可以用Javascript讓網址產生了變化，但仔細想想，要怎麼知道在網...

river_huang ‧ 2020-09-21

0 Like 0 留言 1735 瀏覽

鐵人賽自我挑戰組 DAY 6

不用前端框架手把手打造基礎SPA網站系列第 6 篇

技術 [DAY06]SPA路由的應用(上篇)

大家好，在昨天有提到server side與client side運作的原理，今天我們進一步來談談SPA在路由上是如何應用的，並將搭配實例來說明。當我們要造訪...

river_huang ‧ 2020-09-20

0 Like 0 留言 2299 瀏覽

鐵人賽自我挑戰組 DAY 5

不用前端框架手把手打造基礎SPA網站系列第 5 篇

技術 [DAY05]Server Side Render與Client Side Render

我們先前在Day2 3分鐘帶你初步認識SPA 的文章初步介紹過SPA，主要是用前端client side render的方式。另外在前兩天我們也提到了，前端可以...

river_huang ‧ 2020-09-19

0 Like 0 留言 1831 瀏覽

鐵人賽自我挑戰組 DAY 4

不用前端框架手把手打造基礎SPA網站系列第 4 篇

技術 [DAY04]淺談前端SPA框架-以React為例(下篇)

在了解什麼是render後，傑森從React官網看到另一個範例，有段文字這樣寫道: Component 使你可以將 UI 拆分成獨立且可複用的程式碼什麼是...

river_huang ‧ 2020-09-18

0 Like 0 留言 2821 瀏覽

鐵人賽自我挑戰組 DAY 3

不用前端框架手把手打造基礎SPA網站系列第 3 篇

技術 [DAY03]淺談前端SPA框架-以React為例(上篇)

既然要自己寫SPA，我們先來談談前端框架，本文分成上下篇，這邊重點不在教會你使用，而是想告訴你框架做了些什麼，以下用React來當例子: 傑森是一名網頁設計師，...

river_huang ‧ 2020-09-17

0 Like 0 留言 2488 瀏覽

鐵人賽自我挑戰組 DAY 2

不用前端框架手把手打造基礎SPA網站系列第 2 篇

技術 [DAY02]3分鐘帶你初步認識SPA

近年來SPA在前端已是非常火紅的名詞，英文全名是Single Page Application，中文叫做單頁應用程式，即使你不了解它，應該也聽過一些。與SPA...

river_huang ‧ 2020-09-16

0 Like 0 留言 2091 瀏覽

鐵人賽自我挑戰組 DAY 1

不用前端框架手把手打造基礎SPA網站系列第 1 篇

技術 [DAY01]前言-踏上SPA學習之旅

大家好，I am Yellow River，這次是第一次報名自我挑戰賽，題目是：「不用前端框架手把手打造基礎SPA」。先簡單介紹一下自己，小弟任職過3年網頁設...

river_huang ‧ 2020-09-15

0 Like 2 留言 6308 瀏覽

鐵人賽 Modern Web DAY 4

關於我用 Laravel 寫 SPA 卻不寫 API 的那檔事系列第 4 篇

技術 Day 04 Inertia.js 的 Hello world

裝完 Laravel 後，我們就要開開心心地開始開發啦！首先第一步就是熟悉的 Laravel Router，把預設的 Welcome 視圖換成 Inertia...

Lucas Yang ‧ 2020-09-06