maru

maru

  • Joined: 2023-11-15
  • Articles: 40

關於聖誕節-山下達郎的クリスマスイブ

但是對於聖誕節，以前我覺得是商人的行銷活動。但是有了小孩之後，我覺得聖誕節是一個可以鋪陳儀式感的節日，在節日之前小朋友就會有所期待，聖誕老人會給她甚麼禮物，而滿心雀躍，而我也可以趁機買個禮物給太太表達感謝與祝福。

v-if 與 v-show 的微小差距

v-if 與 v-show 的微小差距
今天在解一個 issue，有一個表單如下，選好設備與類型之後，進行搜尋會生成下方的表格，但是這個表格有一個bug，就是每次重新搜尋，重新生成表格都不會捲回表格最上方，而是會停在上次捲度的位置。剛好可以藉這個案例來談談 v-if 與 v-show的差異。

Bootstrap 卡片與頁籤混雙

Bootstrap 卡片與頁籤混雙
今天在幫一個舊系統升版到 VUE3 跟 Bootstrap5，舊系統是用 Bootstrap-Vue 與 Vue2 做整合，所以很多 HTML 結構要從 Bootstrap-Vue 拆出來，有些程式邏輯要另外寫。今天在拆一個卡片頁籤，發覺 Bootstrap 官方文件卡片頁籤只有結構，沒有可以切換的範例，所以我筆記一下 頁籤卡片(nav-tabs + card)要如何做出可以切換的互動。

ref() 響應小學堂

ref( ) 響應QA小學堂
Vue3 提供了 ref() 跟 reactive() 兩種可供資料與畫面響應的資料類型，當程式或 API 傳來的資料改變時，畫面上的資料也會隨之改變。Vue3 的官方文件尤其推薦用戶使用 ref() 來宣告響應資料。以下整理幾個使用 ref() 時會迷惑的問題與解答

computed 的簡單任務

computed 的簡單任務
在 Vue 中有一個叫 computed 的神奇方法，它可以觀察在data的變數，一旦變數有了改變，就會去取變數來運算，產生一個新的值呈現在畫面上，而這個新的值不會寫回 Option API 的 data 中

watch 是 VUE 派來偷聽的 SPY

watch 是 VUE 派來偷聽的 SPY
初學 VUE 的時候常常混淆 computed 與 watch 的功能。用了幾次之後，慢慢產生一些基礎的認識，今天就讓我來分享一下 watch 要如何使用及要注意的事情。

v-bind 綁定class與style的方法

v-bind 綁定 class 與 style 的方法
如果我們需要隨著資料的條件改變 HTML 元素的樣式，在 VUE 裡面該怎麼做？ 以下搭配官網範例，筆記如何透過 v-bind(簡寫為 : )綁定資料的條件到 HTML 元素的 class 跟 style 上面。

Template Ref 操作DOM的方法

Template Ref Vue3 操作 DOM 元素的方法
使用原生 JS 必須透過 id、class、tagName來取得DOM元素，那在 VUE 裡面呢？讓我來分享 VUE 前端框架要如何透過 ref 取得 DOM 元素

在 Vue 中使用 Bootstrap Modal

在 Vue 中使用 Bootstrap Modal
網頁的UI終點擊按鈕，彈出一個操作面板是常有的互動。讓我來整理一下在 VUE 裡面如何使用Bootstrap Modal 做彈出互動面板。