今天最後的任務就是端出剩下的購物車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 ,°`)╮」 鱈魚：「的確不會，因為我也不太...
今天我們進入「條件渲染」的章節囉～將分為兩部分講解： v-if、v-else-if、v-else v-show OK，請開始我的表演。 定義 Vu...
下拉選單（Select）在表單操作中非常常見。使用下拉選單可以在有限的空間內顯示大量選項，透過點擊來展開選單，使用者可以輕鬆瀏覽並選擇其中一個或多個選項。無論...
這幾天風暴式重新閱讀了好多Vue官方文件（真怕會消化不良），今天來講點比較有趣的效果吧！而且超簡單的就能實現在ToDoList上的～就是 「元素拖曳！」 ，做完...
發想 如果頁面上的元素會依照物理定律，自然下落、彈跳等等，一定很有趣。(´,,•ω•,,) 類似以下影片。( ´ ▽ ` )ﾉ 規格 功能需求 可以設定元素的...
前面幾天我們重新回顧了Vue的語法結構，還有各種內建提供的指令用法。今天的重點放在 「如何把自己寫的內容」 定義成可以複用的函式，以及 「如何自訂指令」 ？讓我...
<textarea> 與 <input type="text"> 有需多相似之處，甚至大多數的特性都是共通的，例如...
嗨一大家，記得之前我們在屬性綁定章節，有講到 CSS 樣式可以使用 v-bind 屬性綁定樣式嗎～ 但官方文件後來卻提到了： 但是，在處理比較複雜的綁定時，通...
這個章節運行測試的方式稍微不同，由於 babylon.js 套件較為龐大，如果在 dev 模式下運行第一次開啟頁面會等很久，導致測試一直超時。 所以這裡我們改成...
Vue語法統整來到了最後一篇章，今天要來探索更複雜的資料處理是要如何做到？除了介紹到computed計算屬性，也要來了解watch的使用時機！那麼，就讓我們直接...
嗨一大家，記得之前我們在屬性綁定章節，有講到 CSS 樣式可以使用 v-bind 屬性綁定樣式嗎～ 但官方文件後來卻提到了： 但是，在處理比較複雜的綁定時，通...
<input> 作為表單控制元素，是網頁開發中最常見的元素之一。<input> 的不同 type 設定會影響顯示的 UI，以及它所代表...
提供更多範例，讓使用者了解此元件用法吧。◝( •ω• )◟ 發射參數 調整發射速度向量，就可以往任意方向發射。 src\components\util-part...
昨天重新回顧了我們在練習作品中常用的Vue語法及語法組成架構，今天再來接續介紹：還有哪些在我們這次改版練習ToDoList中遇到的常用屬性？ 本系列任務：改寫過...
我們接續響應式基礎的系列～今天帶大家看 computed 這個語法。 使用情境 computed？「計算」的意思。 那又是在計算什麼東西，為什麼 Vue 會有特...
記得我們在 ref 的篇章有講過「解包」嗎？官方文件在帶過 reactive 後，又細講了它倆解包的細節⋯⋯小菜菜在學習這邊的時候遇到了幾個蠻有趣的狀況坑，來跟...
還記得我們開賽第五天就在寫ToDoList了，結果現在連基本的指令都還沒完整講解（天啊），簡直像剛拿到新的空氣清淨機連內封膜都還沒撕就開始使用了！畢竟實戰演練總...
開始測試前，讓我們在 defineExpose 追加資料，方便進行測試。 src\components\util-party-popper\util-party...
ivytien
++
Alex Liu
鱈魚
iThome鐵人賽
看影片追技術