vue指令之v-on事件绑定指令

可以用v-on指令监听DOM事件，便在触发时运行一些javaScript代码。

//v-on指令可以简写为@
 <div id="example1">
	<button v-on:click='counter+=1'>数值：{{counter}}</button>
//在实际中，js代码多是放在外面的 所以js函数通常放在Vue对象的methods中 而且可以通过传参执行函数
    <button v-on:click="greet('abc')">Greet</button>
//有时也需要在内联语句处理器中访问原始的DOM事件，可以用特殊变量$event把它传入方法
	<button v-on:click="greet('abc',$event)">原始DOM事件</button>
</div>
<script>
	 var vm=new Vue({
            el:'#app',
            data:{
                counter:0,
                name:'lhh'
            },
            methods:{
                greet:function(str,e){
                    alert(str);
                    //可以在函数内使用data数据
                    alert(this.name);
                    alert('hi,ni hao');
                    console.log(e);     
                },
            }
        })
</script>

事件修饰符：

    <!-- .stop-阻止冒泡
    .prevent-阻止默认事件
    .capture-阻止捕获
    .self-只监听触发该元素的事件
    .once-只触发一次
    .left-左键事件
    .right-右键事件
    .middle-中间滚轮事件 -->

常用的事件以及修饰符的搭配使用：

 v-on:click.stop  阻止单击事件继续传播
 v-on:submit.prevent  提交事件不在重载页面
 v-on:click.stop.prevent  修饰符可以串联
 v-on:click.capture  添加时间监听器时使用时间捕获模式，即元素自身触发的事件现在此处理，然后在交由内部元素进行处理
 v-on:click.self  只当在event.target是当前元素自身时触发处理函数，即事件不是从内部元素触发的    

例子：

//在默认条件下，当点击提交按钮之后，表单会进行提交，这里添加了提交事件的默认情况，所以再点击提交以后会执行后面的函数
 <form @submit.prevent="handleSubmit" action="">
       <input type="text" name="username"><br>
        <input type="submit" value="提交">
 </form>
//按键修饰符 
   //按键13时调用vm.submit
        <input v-on:keyup.13='submit'>
   // 按键enter时调用vm.submit
        <input v-on:keyup.enter='submit'>