在社群分享酷酷的元件時，有人問到「元件有沒有不需要依賴 Vue 的版本？」 當時沒有，現在有了！(≧∇≦)ﾉ 甚麼是 Web Component Web Com...
第一步老樣子就是來新增測試檔案。◝( •ω• )◟ e2e\components\slider-stubborn.spec.ts import { test,...
Hi 大家好，今天我們要來看的是「模板引用」的章節。還記得之前我們提到的 ref 嗎？ ref 除了可以用來綁定響應式的狀態，它還能被使用在 <templ...
不可能放這種迷因圖八 安安搭家，還記得我們在 computed 的章節 講到的嗎： 不應該在 computed 物件其中像上述談到的：變更值、狀態，非同...
提供更多範例，讓使用者了解此元件用法吧。( •̀ ω •́ )✧ 參數客製 展示客製化參數的效果。 src\components\slider-stubborn...
在開賽的前言有說過其實我不會.NET Core（之前都是用.NET而已），結果現在要用.NET Core MVC ft.Vue.js進行開發（？）要學就要一次學...
蛤肉，大家好。如標題所述，今天我們要來看 Vue 中一個重要的觀念：「生命週期」。 我們將會分為以下幾部分來學習： 生命週期定義 為什麼需要了解？ 初步概念...
我們的靜態網站已經順利Git上去了，但這樣就結束了嗎？NoNoNo…身為it人總是不能放棄每個能偷懶的環節（蛤），今天就要來善用現有技術來幫我們實現自動化的流程...
第一步來新增測試檔案。 src\components\slider-stubborn\slider-stubborn.spec.ts import { moun...
在 Vue 的宇宙裡，表單輸入綁定不再是令人頭痛的問題！有了 v-model，你只需要一句簡單的指令，就可以讓使用者的輸入與你的應用程式完美同步。無論是輸入框...
在這個系列中，我們一共實作了約 27 種不同的 Atomic Components。但在實際開發上，我們不總是只需要顧好 Client Side Render...
今天要來把我們先前辛苦寫的作品部署到GitHub！（Git應該都不用再多介紹大家都很熟了），但我們還是紀錄一下第一次部署Vue專案的過程，就怕太久沒碰之後就忘了...
基本結構 滑動條主體很單純，使用 div 就可以完成，不過握把的部分需要使用 SVG 實現。 結構概念如下圖： 「容器」負責包裝所有內容，並提供水平移動的基...
接觸過SPA（單頁應用）的世界後，現在來看SSR的資料我感到萬分痛苦…。我們先假想在不久後的將來，也許某天Boss說：「這個系統從SPA改成SSR」我們會想起這...
Rating 元件讓使用者可以對某項目進行評分，通常以星星或其他符號來表示評分等級。Rating 元件的核心功能是提供一種直觀的方式，讓使用者針對產品、服務或...
發想 設計一個停用時握把會被拉長的滑動條。 類似這樣。( ´ ▽ ` )ﾉ 規格 外觀設計 需要有軌道與握把 可設定握把顏色與尺寸 可設定軌道樣式 功能需求...
起初建立專案的時候，系統有詢問我們是否要導入Vue Router。用了是用了，不過它實質做了什麼改變呢？今天就來一探究竟吧！ 特色 Client端路由：客端將...
今天最後的任務就是端出剩下的購物車UI介面，再把所有資料都串在一起！究竟Product.vue和Cart.vue兩個子組件要如何做到即時同步呢？就讓我們繼續看下...
在 Vue 的世界裡，@ 符號如同我們日常生活中的耳朵，隨時靈敏地捕捉著周遭的聲音。今天，就讓我們一起探索 Vue 是如何巧妙地管理 DOM 事件的吧！🎧✨...
Radio 是一種表單控制元件，通常用於使用者在一組選項中選取一個。在 UI 呈現上，通常顯示為圓形按鈕，當用戶選中時，按鈕會顯示填滿狀態，表示該選項已被選中...
第一步老樣子就是來新增測試檔案。◝( •ω• )◟ e2e\components\wrapper-physics.spec.ts import { test,...
哈囉搭家，在昨天我們講到了列表渲染的用法 v-for，今天會來認識 key 這個屬性、Vue 的渲染模式「虛擬 DOM」以及 v-for 搭配 method 的...
提供更多範例，讓使用者了解此元件用法吧。( •̀ ω •́ )✧ 物體性質 調整物體性質，產生更多樣的交互作用。 src\components\wrapper-...
馬上來接續昨天的進度！我們刻好商品SFC、也測試父組件傳遞資料顯示正常，今天來處理商品數量和購物車icon，沒問題就直接開始囉！ 增刪商品數量 畫面上我們有四個...
開關（Switch）是用來表示 on 或 off 狀態的元件。它與 Checkbox 相似，但不同於 Checkbox 允許實現第三種中間狀態的選項，Swit...
開始測試前，讓我們在元件中新增一些對外屬性，方便進行測試吧。( ´ ▽ ` )ﾉ src\components\wrapper-physics\wrapper-...
對於基礎觀念和常用功能我們都有一定程度的概念了，最重要還是如何活用這些技術。今天的練習是購物車實作，試著先不參考網路範例…看看是否能順利寫出來吧！ ◎題外話：在...
Checkbox 是一個常見的網頁元件，單個使用時可以表示在兩種狀態之間切換，多個一起使用時則允許使用者在這些選項中選擇一個或多個。它適合用於問卷調查、偏好設...
今天要來說的是「列表渲染」。列表在這邊表達的是「清單、多個資料」的意思，而我們可以使用它，像迴圈一樣的遍歷、渲染出多個元素～（由於這個用法和 JS 有點相似，因...
讓我們來開發物理包裝器元件吧！ 鱈魚：「第一步從認識碰撞偵測演算法開始！◝(≧∀≦)◟」 路人：「不會吧！╭(°A ,°`)╮」 鱈魚：「的確不會，因為我也不太...
iThome鐵人賽
看影片追技術
看更多
鱈魚
++
ivytien
Alex Liu