在Day5 Vue指令-屬性綁定與列表渲染中有介紹到v-bind屬性綁定，它是一種單向的資料流綁定，而今天的內容將介紹資料的雙向綁定與修飾符。 什麼是雙向綁定？ 當表單輸入的元素會更新到 Vue 實例...
前幾天的內容都是使用Options API來撰寫範例程式碼，今天將更深入探討Composition API，並且透過實作簡易計數器來比較兩種寫法～ setup函數 <script setup&g...
今天要來介紹如何處理基本的事件監聽，並且搭配各種修飾符來控制事件的行為，例如阻止事件冒泡、取消預設行為、限制觸發條件等，讓事件處理變得更加靈活且強大。 事件處理 v-on 用於監聽DOM事件，並且在觸...
關閉自動傳透 若不想要讓屬性自動繼承，可以使用 inheritAttrs: false 來停用用法： <span>Fallthrough attribute: {{ $attrs }}&l...
昨天介紹如何透過使用插值表達式 {{ }} 動態更換文本內容，今天將繼續介紹如何透過Vue指令來更換 HTML 標籤的「屬性」～ 屬性綁定 v-bind 將 HTML 屬性綁定到 Vue 實例中的資料...
前言 v-bind 是非常常見的內置指令，常用於 HTML attribute，例如 style, class, props, etc.。 放的位置會在 element <> 裡面，無法單...
今天要來學習傳透屬性 fallthrough先瞭解什麼是 fallthrough ，就是父元件傳給子元件的非 props 屬性，會自動加到子元件的根元素上 基礎 fallthrough 子元件： &l...
你是否有過對 Vue 的響應式系統感到疑惑的地方？當我們在程式碼中修改一個變數時，畫面上的內容就會自動更新。這個方便快速的背後機制到底是什麼？ 了解這個底層邏輯，就是我這次想動手寫這個系列文章的初衷...
經過前一天 Proxy 的概念大致上有個雛形，或許我們可以思考一下：為什麼 Vue 3 需要 Proxy 呢？ A few minutes later... 其實 Vue 2 時期，響應式系統是基於...
前言 其實一開始很猶豫要不要寫這個篇章，因為如果你用過 Vue 那接下來這些指令你基本上應該是爛熟於心。 不過考慮到這些指令是基本上你不可能可以避免的功能，除非你只做非常小的東西或幾乎靜態網頁。最後想...