iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

Web Component 網頁元件之路 系列

當我是 React 工程師時 , 我使用 Material-UI ,
當我是 Vue 工程師時 , 我需要用 Element-UI ,
那我換到 Angular 時 , 我需要學新的一套 UI 框架 (っ °Д °;)っ
有沒有不更換 UI 框架的方法呢 ?
基於上方的問題 , 我踏上了 Web Component 網頁元件的旅途
希望各位看官喜歡這 30 天的沿途風景 <( _ _ )>

鐵人鍊成 | 共 30 篇文章 | 6 人訂閱 訂閱系列文 RSS系列文
DAY 11

[Day11] - 利用 Proxy 來監聽資料的變化

在 connectedCallback 初始建立時 , 我們需要處理 html 如何呈現 在 attributeChangedCallback 屬性變更時 ,...

2021-09-15 ‧ 由 Tree 分享
DAY 12

[Day12] - 利用 Button 範例 - 解說直接修改 Dom 與 data-binding 的差異

在 React 跟 Vue 中我們可以較為輕鬆的利用資料 來做 render 對應的話畫面生出來 不用像 Jquery 時期 , 改變資料時 , 需要將對應的...

2021-09-16 ‧ 由 Tree 分享
DAY 13

[Day13] - 利用 Button 範例 - 解說 render 函式

昨天我們解說了 , Jquery 跟 Vue 兩種處理 Dom 的模式 在文末 , 提到了 Web Component 中沒有 Vue 可用 , 不過我們可以建...

2021-09-17 ‧ 由 Tree 分享
DAY 14

[Day14] 利用 Vue CLI 3 來建立 Web Components 的 JS 檔

前面花了大把的時間 , 來建立跟 Vue 很像的 Web Components 其實 Vue CLI 也有提供建立 web-component 的方法 下方來說...

2021-09-18 ‧ 由 Tree 分享
DAY 15

[Day15] - 利用 direflow.io 將 React Components 轉換成 Web Components

昨天解說 Vue 如何製作 Web-Component 今天來說明一下 , 那 React 如何製作 Web-Component 呢 ? 可以利用 direfl...

2021-09-19 ‧ 由 Tree 分享
DAY 16

[Day16] - 在 Vue 中引入現成的 Web Component

當我們拿到一個現有的 Web Component 時 , 如果直接在 Vue 專案中使用會抱錯 今天來解決這個 issue 吧 ! 利用 vue-cli...

2021-09-20 ‧ 由 Tree 分享
DAY 17

[Day17] - 在 React 中引入現成的 Web Component

當我們拿到一個現有的 Web Component 時 , 如何在 React 專案中引用呢 ? 利用 [create]-react-app](https:/...

2021-09-21 ‧ 由 Tree 分享
DAY 18

[Day18] - 打包 Element-UI 的 Vue Component to Web Component

day-14 我們說明了 , 如何將 Vue 的 Component 轉換成 Web Component day-17 說明了 , 如何在 React 專案中...

2021-09-22 ‧ 由 Tree 分享
DAY 19

[Day19] - MyRedux 手動製作簡易版 Redux

利用 Redux 當 React Component 中的資料發生變化時 , 告知 Vue Component 資料發生變化 make a proxy as...

2021-09-23 ‧ 由 Tree 分享
DAY 20

[Day20] - 串接 React Component 與 Vue Component 的 DATA

使用組件跟組件的組合 , 形成一個頁面 勢必會遇到經典的組件傳值 issue (下圖左側) 以大家常使用的 Facebook 為例 , 顯示使用者資訊的區塊...

2021-09-24 ‧ 由 Tree 分享