说到v-on就立马事件，最典型的的例子就是按钮的事件我们可以用v-on监听事件，并对用户的输入进行响应。
先举个例子，
上代码：
<html>
<head>
<meta charset="utf-8">
<title>Vue指令之v-on</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p> //显示data中的message值
<button v-on:click="reverseMessage">反转字符串</button> <!--当点击按钮时会调用methods中的reverseMessage方法-->
</div>
<script>
new Vue({
el: '#app', //作用域为id为app的div块
data: {
message: 'Dream will be realize!' //对应<p>{{ message }}</p>中的message值
},
methods: {
reverseMessage: function () { //注意该函数的写法，是写在methods中的，而不是data中的
this.message = this.message.split('').reverse().join('') //this.message就是data中的message，即其值为Runoob!
}
}
})
</script>
</body>
</html>
输出：
点击一次按钮后：
你会发现，达到了字符串逆序的功能。这是因为button按钮通过v-on的click事件绑定了methods中的函数reverseMessage，
当你去点击按钮后，就会调用methods中的reverseMessage函数去改变data中的message值。
对了：v-on的简写是@符号,比如v-on:click="reverseMessage"等价于@click="reverseMessage",so看到@click不要懵逼哦！！
通过v-on绑定methods中的函数，实现了常用的点击事件，这个功能在开发中是必用的基础，务必掌握！！！
v-on就讲到这里了，困困困！！！
原创不易，转载请声明出处：https://blog.csdn.net/Kermit_father