04 Vue入門系列之Vue事件處理

2022-02-17 18:56:16 字數 1139 閱讀 4054

vue提供了協助我們為標籤繫結時間的方法，當然我們可以直接用dom原生的方式去繫結事件。vue提供的指令進行繫結也是非常方便，而且能讓viewmodel更簡潔，邏輯更徹底。所以還是推薦大家使用的。

vue提供了v-on指令幫助我們進行事件的繫結。 基本的內聯事件處理方法[官方demo]：

增加 1


這個按鈕被點選了 } 次。
內聯的方式繫結的事件，只能處理簡單的事件的處理邏輯。複雜的情況還是封裝到js中最方便，也不容易出錯。 vue物件中可以新增methods屬性，開發者可以把事件處理函式的邏輯放到methods中。

data: ,


methods: 


}});
官網上寫的非常好，這塊就直接用管網的吧。在事件處理程式中呼叫 event.preventdefault() 或 event.stoppropagation() 是非常常見的需求。儘管我們可以在 methods 中輕鬆實現這點，但更好的方式是：methods 只有純粹的資料邏輯，而不是去處理 dom 事件細節。 為了解決這個問題， vue.js 為 v-on 提供了 事件修飾符。通過由點(.)表示的指令字尾來呼叫修飾符。

在監聽鍵盤事件時，我們經常需要監測常見的鍵值。 vue 允許為 v-on 在監聽鍵盤事件時新增按鍵修飾符：

記住所有的 keycode 比較困難，所以 vue 為最常用的按鍵提供了別名：
全部的按鍵別名：

vue中屬性的繫結的簡寫直接是:=== 'v-bind:'

而事件的縮寫是直接變成@. 也就是說：v-on:===@看下面的例子：
vue為了方便大家進行開發，提供了事件的相關的封裝，可以讓我們方便我們用vue對事件進行開發，尤其是v-on指令的非常方便的跟vue物件中methods進行配合進行複雜的事件處理，非常方便。另外事件的事件修飾符和按鍵修飾符也可以讓vue事件這塊錦上添花。

04 Vue之v bind v on的使用

doctype html en utf 8 viewport content width device width,initial scale 1.0 document title v cloak style head 使用 v cloak 能夠解決 插值表示式閃爍的問題 p msg h4 預設 v...

Vue入門系列（四）之Vue事件處理

vue官網 基礎用法 入門系列 一 二 三 四 五 本文 vue提供了協助我們為標籤繫結時間的方法，當然我們可以直接用dom原生的方式去繫結事件。vue提供的指令進行繫結也是非常方便，而且能讓viewmodel更簡潔，邏輯更徹底。所以還是推薦大家使用的。vue提供了v on指令幫助我們進行事件的繫結...

04vue 模板語法 指令

指令 directives 是帶有v 字首的特殊屬性。即 vue給html元素增加了一些自定義屬性，這些自定義是屬性是以 v 開頭的屬性 v text 更新元素的 textcontent。如果要更新部分的 textcontent 需要使用 插值。v html 更新元素的 innerhtml v sh...