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

vue官網：

基礎用法

【入門系列】

(一)  

(二)   

(三)   

（四） 

（五） 

【本文**】

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入門系列之Vue事件處理

vue提供了協助我們為標籤繫結時間的方法，當然我們可以直接用dom原生的方式去繫結事件。vue提供的指令進行繫結也是非常方便，而且能讓viewmodel更簡潔，邏輯更徹底。所以還是推薦大家使用的。vue提供了v on指令幫助我們進行事件的繫結。基本的內聯事件處理方法 官方demo 增加 1 這個按鈕...

Vue系列 四 之常用指令v bind

自定義元件prop 為了避免篇幅過長，常用指令我可能會分幾個篇幅來介紹。v bind api 縮寫 v bind指令主要是繫結元素的屬性 比如的src，元素的class，style，id等 和自定義元件 後面會講到 的prop。來看幾個常見的使用場景 path div var vm newvue m...

vue 入門 之 安裝vue 環境

點 next 完成安裝 輸入 node v 檢測 node 版本及是否安裝成功 輸入 npm v 檢測 npm 版本 2.安裝 映象 cnpm 輸入 npm install g cnpm registry 進行 cnpm 安裝 3.安裝 vue cli 腳手架 輸入 cnpm install g v...