Add Event Handling guide for Vue.js (#24176)
This commit is contained in:
committed by
Randell Dawson
parent
f94879daa9
commit
ca29fb664e
25
guide/english/vue/event-handling/index.md
Normal file
25
guide/english/vue/event-handling/index.md
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
---
|
||||||
|
title: Event Handling
|
||||||
|
---
|
||||||
|
|
||||||
|
## Creating an Event
|
||||||
|
We can create an event using the directive `v-on`:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div id="app">
|
||||||
|
<button v-on:click="buttonClicked">Click Me</button>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
var app = new Vue({
|
||||||
|
el: '#app',
|
||||||
|
methods: {
|
||||||
|
buttonClicked: function (event) {
|
||||||
|
alert("You clicked on a " + event.target.tagName + " element");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
Note: A shorthand for any event handler is using the `@` symbol and the event name. For example `@click` is short for `v-on:click`.
|
Reference in New Issue
Block a user