Look at an example:
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <input type="button" value="事件绑定" v-on:click="doIt"> <input type="button" value="v-on简写" @click="doIt"> <input type="button" value= "Double click event" @dblclick = "the doIt" > < H2 @click = "changeFood" > {{}} Food </ H2 > </ div > < Script > var App = new new Vue ({ EL: '#app' , Data: { Food: 'fried eggs, tomatoes' }, Methods: { the doIt: function () { // logic alert ( "do IT"); }, changeFood: function () { this.food + = "delicious " } } }) </script> </body> </html>
result:
Click event binding or v-on shorthand or double-click events, will be:
Click tomato scrambled eggs:
Description: v-on can bind event for the label, the syntax: v-on: event name = "method name", you can use the @ event name = "method name" in shorthand. Change tag content can take advantage of this modification, the content will be updated simultaneously.