Vue2基础指令-v-on 事件绑定指令

完整格式：

v-on:事件名称 

简写形式：

@事件名称  (注意：@后没有冒号)

用于监听DOM事件

     {{counter}}
     
     <!--完整语法格式-->
     <button v-on:click="increment">+</button>
     
     <!-- 语法糖 -->
     <button @click = "increment">+</button>

          <script>
             const app = new Vue({
               el:'#app',
               data:{
                 counter:0
               },
               methods:{
                 increment(){
                    this.counter++
                 }
               }
             })
           </script>

<div id="app">
    <h3>1、事件处理方法 v-on 或 @</h3>
    <p>{{ msg }}</p>
    <button v-on:click="say">点击我</button>
    <!--$event 代表的是原生的Dom事件-->
    <button @click="warn('小红',$event)">warn</button>
</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:   {
           msg:"hello vue"
        },
        methods:{ // 指定事件处理函数
            say:function( event ){
                // event 代表的是Dome原生事件，vue会自动的将它传入进来
                alert(this.msg)
                // target 找到目标元素
                alert(event.target.innerHTML)
            },
            warn:function(  name,event){
                // 如果说函数有多个参数，而双需要使用原生事件，则需要使用$event作为参数传入
                alert( name + ','+event.target.tagName )
            }
        }
    });
</script>