v-on

<body>
<div id="app">
    <h2>{{counter}}</h2>
    <button v-on:click="increament()">增加</button>
    <button v-on:click="decreament()">减少</button>
</div>

<!--<button></button>-->
<script>
   const app=new Vue({
       el:'#app',
       data:{
           counter:0
       },
       methods:{
           increament(){
               return this.counter++;
           },
           decreament(){
               return this.counter--;
           }
       }
   })

</script>

v-on的语法糖：@

<button @click="increament()">增加</button>
<button @click="decreament()">减少</button>
设置函数时要求有返回值，但是，我们在传递了一个空参数，此时 就会产生一个undefined；

对于网页的操作时，网页会给我们反馈event对象，所以，当设置监听函数时省略小括号，但是方法本身需要我们传递参数，那么就会传递回去一个event参数
当希望传递函数既需要传递一个参数a还需要传递另外一个event，那么将函数写成function（123，$event）;

v-on 修饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js" type="text/javascript"></script>
</head>
<body>
<!--修饰符-->
<div id="app">
    <div @click="divclick">
        <button @click.stop="btclick">按钮</button>
    </div>

    <br>
    <form action="百度">
        <input type="submit" value="提交" @click.prevent="submitclick">
    </form>

    <!--监听某个按键的点击-->
    <input type="text" @keyup="keyup">

    <button @click.once="btclick">按钮</button>
</div>

<script>
   const app=new Vue({
       el:'#app',
       data:{
           counter:0
       },
       methods:{
           btclick(){
               console.log("btclick")
           },
           divclick(){
               console.log(" divclick")
           },
           submitclick(){
               console.log('asdf')
           },
           keyup(){
               console.log('a')
           }
       }
   })

</script>
</body>
</html>

v-on

推荐阅读