列表渲染(2) 通過 key 管理狀態 Vue 默認按照“就地更新”的策略來更新通過 v-for 渲染的元素列表。當數據項的順序改變時,Vue 不會隨之移動 D...
事件處理(1) 監聽事件 我們可以使用 v-on 指令 (簡寫為 @) 來監聽 DOM 事件,並在事件觸發時執行對應的 JavaScript。用法:v-on:c...
事件處理(2) 事件修飾符 在處理事件時調用 event.preventDefault() 或 event.stopPropagation() 是很常見的。儘管...
表單輸入綁定(1) 在前端處理表單時,我們常常需要將表單輸入框的內容同步給 JavaScript 中相應的變量。手動連接值綁定和更改事件監聽器可能會很麻煩: &...
表單輸入綁定(2) 值綁定 對於單選按鈕,複選框和選擇器選項,v-model 綁定的值通常是靜態的字符串 (或者對複選框是布爾值): <!-- `pick...
生命週期鉤子 每個 Vue 組件實例在創建時都需要經歷一系列的初始化步驟,例如設置好數據偵聽,編譯模板,掛載實例到 DOM,以及在數據改變時更新 DOM。在此過...
偵聽器 基本示例 計算屬性允許我們聲明性地計算衍生值。然而在有些情況下,我們需要在狀態變化時執行一些“副作用”:例如更改 DOM,或是根據異步操作的結果去修改另...
模板引用 雖然 Vue 的聲明性渲染模型為你抽象了大部分對 DOM 的直接操作,但在某些情況下,我們仍然需要直接訪問底層 DOM 元素。要實現這一點,我們可以使...
組件基礎 組件允許我們將 UI 劃分為獨立的、可重用的部分,並且可以對每個部分進行單獨的思考。在實際應用中,組件常常被組織成層層嵌套的樹狀結構:這和我們嵌套 H...
組件基礎 監聽事件 讓我們繼續關注我們的 BlogPost 組件。我們會發現有時候它需要與父組件進行交互。例如,要在此處實現無障礙訪問的需求,將博客文章的文字能...