vue.js 学习笔记2--事件绑定的使用v-on

标题

`

    <!-- <button v-on:click="increment">+</button> 
        和下面的效果是一样的,因为不传参数默认包含一个参数对象
        <button v-on:click="increment($event)">+</button>
    -->
    <div v-on:click="increment">
        <button v-on:click.stop="increment">+</button>
        <button @click.stop="increment">+</button>
        <span>{{n}}</span>
         <!--  v-on:click.stop阻止冒泡，阻止实践的传递类似的请参考
            类似的请参考https://www.cnblogs.com/zhoubingyan/p/9047266.html
         -->
        <button v-on:click.stop="decrement">-</button>
        <button @click.stop="decrement">-</button>
        <a href="http://www.baidu.com" v-on:click.prevent="increment">baidu</a>
        <input type="text" v-on:keyup.f1="keyHandler">
    </div>
</div>
<script>
   var vm = new Vue({
        el:"#box",
        data:{
            str:"hello world",
            n:1
        },
        methods:{  //存放事件处理函数
            increment(){  //增加按钮的处理+1  //$event是vue当中的事件对象
                console.log(this===vm)
                this.n++;
            },
            decrement(){  //减少安装的处理-1
                this.n--
            },
            keyHandler(){  //键盘按键事件的处理
                // if(e.keyCode===27){
                //     alert('按了esc键')
                // }
                alert("f1")
            }
        }
    })

</script>

`