在前面的章节中，小编为大家分享了在Vue中如何控制html内容、控制属性、绑定样式等基本操作，接下来小编再为大家分享如何在Vue中绑定事件

一、绑定事件

  在Vue中，通过 v-on 指令来绑定事件，绑定事件后具体的操作可以分成以下几种：

1.在事件后接收简单的运算

<div class="warp" >
    <form action="" v-on:click.prevent>
        <button v-on:click="count +=1">数值:{{count}}</button>
    </form>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el:".warp",
        data:{
                count:0
            }
    })
</script>

简单运算.gif

  在这个例子中，每点击一次按钮时，数值就会加1。但是如果我们把所有JavaScript代码都放置在模板中，代码量会很多，不易维护，所以才有了第二种写法

2. 在事件后接收无参数的方法

<div class="warp" >
    <form action="" v-on:click.prevent>
        <button v-on:click="message()"> 按钮</button>
    </form>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el:".warp",
        methods:{
                message:function(){
                        alert("Hello,Vue");
                    }
            }
    })
</script>

接收无参的方法.gif

3.在事件后接收普通参数的方法

<div class="warp" >
    <form action="" v-on:click.prevent>
        <button v-on:click="message('Vue')"> 按钮</button>
    </form>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el:".warp",
        methods:{
                message:function( str){
                        alert(str);
                    }
            }
    })
</script>

接收有参的方法.gif

  在这个例子中，为message方法传递一个Vue的实参，在Vue实例中，用str形参来接收用户输入的实参。当点击一次按钮时，用户输入的Vue字符串就会传递给Vue实例中的str形参，然后弹出str的内容.
  此外，在method内部的方法还可以操作data内部的属性

<div class="warp" >
    <form action="" v-on:click.prevent>
        <button v-on:click="message('Vue')"> 按钮</button>
    </form>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el:".warp",
        data:{
                count:0
        },
        methods:{
                message:function( str){
                        alert(str);
                        alert(this.count);
                    }
            }
    })
</script>

操作data内的属性.gif

4.在事件中接受原生事件作为参数的方法

<div class="warp" >
    <form action="" >
        <button v-on:click="warn('Form cannot be submitted yet.', $event)">
              Submit
        </button>
    </form>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el:".warp",
        methods:{
                warn: function (message, event) {
                        // 现在我们可以访问原生事件对象
                        if (event) {
                          event.preventDefault()
                        }
                        alert(message)
                      }
            }
    })
</script>

  在这个例子中，通过$event获取的原生的事件
  在事件的处理程序中，通过调用event.preventDefault()来出路默认提交事件 或 event.stopPropagation()组织冒泡事件是非常常见的需求。尽管可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。而下面事件的修饰符就很好的处理了这点

二、事件的修饰符

  在前面中我们讲过，修饰符是由点开头的指令后缀来表示的。下面是几种常见的事件修饰符

1. .stop：阻止冒泡事件

所谓的冒泡事件就是触发了子级事件的同时，也触发了父级的事件

<div @click="bto">
    <div @click="bto1">冒泡事件</div>
</div>
<script>
    var vm = new Vue({
        el:".warp",
        methods:{
                bto1:function(){
                    console.log("div1");
                },
                bto:function(){
                    console.log("div2");
                }
            }
        }) 
</script>

image.png

  当用户点击第二个div时，在控制台上输出div2，同时也输出了第一个div点击事件的内容div1。这就是冒泡事件，触发子级事件的同时也触发的父级的事件，要想组织冒泡事件，使用“.stop”即可

<div @click="bto">
    <div @click.stop="bto1">冒泡事件</div>
</div>
<script>
    var vm = new Vue({
        el:".warp",
        methods:{
                bto1:function(){
                    console.log("div1");
                },
                bto:function(){
                    console.log("div2");
                }
            }
        }) 
</script>

image.png

仅仅输出了触发第二个div所相应的内容

2. .prevent:阻止默认提交事件-

  默认事件一般发生在form表单和a标签两者，form表单会自动提交，a标签会自动跳转，通俗的理解就是点击一次就会刷新一次页面。想要阻止默认事件，使用“.prevent”即可

<a href="" @click.prevent="stopclick">阻止默认事件</a>

3. .once:只执行一次

<div class="warp" >
    <form action="" v-on:click.prevent>
        <button v-on:click.once="count +=1">数值:{{count}}</button>
    </form>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el:".warp",
        data:{
                count:0
            }
    })
</script>

once事件修饰符.gif

4. .capture ：先执行父级在执行子级

<div v-on:click.capture='alert("1")' style="width: 100%;height: 45px;background-color: black;">
    <div v-on:click="alert('2')" style='width: 80%;margin-left: 10%;background-color: white;'>
            123
    </div>
</div>

capture时间修饰符.gif

5. .self:只执行子级本身的函数

<div v-on:click.self='alert("1")' style="width: 100%;height: 45px;background-color: black;">
    <div v-on:click="alert('2')" style='width: 80%;margin-left: 10%;background-color: white;'>
        123
    </div>
</div>

slef事件修饰符.gif