Vue模板语法——事件修饰符

一、事件处理

如果需要在内联语句处理器中访问原生DOM事件。可以使用特殊变量$event，把它传入到methods中的方法中。

在Vue中，事件修饰符处理了许多DOM事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理。在Vue中事件修饰符主要有：

• stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡
• prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）
• capture：与事件冒泡的方向相反，事件捕获由外到内
• self：只会触发自己范围内的事件，不包含子元素
• once：只会触发一次

注意： 事件修饰符添加在绑定事件名的后面。

例如： @事件名.修饰符="方法" => @click.stop="onClick"

    v-on:事件名.修饰符="方法" => `v-on:click.stop="onClick"`

二、stop修饰符

1. .stop修饰符
   阻止冒泡事件

2. 冒泡事件

       <div id="app">
           <div v-text="msg"></div>
           <div @click="outter">
               <div @click="middle">
                   <button @click="inner">点击</button>
               </div>
           </div>
       </div>
       <script src="../js/vue.js"></script>
       <script>
           new Vue({
               el:"#app",
               data:{
                   msg:''
               },
               methods:{
                   outter:function(){
                       this.msg+="外面。";
                   },
                   middle:function(){
                       this.msg+="中部->";
                   },
                   inner:function(){
                       this.msg+="里面->";
                   }
               }
           })
       </script>
   

   结果：里面->中部->外面。

   冒泡事件：嵌套两三层父子关系，然后所有都有点击事件，点击子节点，就会触发从内至外，由子节点至父节点的点击事件。

3. 阻止冒泡事件

   • 使用事件对象阻止冒泡事件

       <div id="app">
           <div v-text="msg"></div>
           <div @click="outter">
               <div @click="middle">
                   <button @click="inner">点击</button>
               </div>
           </div>
       </div>
       <script src="../js/vue.js"></script>
       <script>
           new Vue({
               el:"#app",
               data:{
                   msg:''
               },
               methods:{
                   outter:function(){
                       this.msg+="外面。";
                   },
                   middle:function(){
                       this.msg+="中部->";
                   },
                   inner:function(e){
                       //通过事件对象$event调用stopPropagation()方法防止冒泡事件发生
                       e.stopPropagation();
                       this.msg+="里面->";
                   }
               }
           })
       </script>
     

     结果：里面->
   • 使用.stop修饰符阻止冒泡事件

       <div id="app">
           <div v-text="msg"></div>
           <div @click="outter">
               <div @click="middle">
                   <button @click.stop="inner">点击</button>
               </div>
           </div>
       </div>
     

     结果：同上

三、prevent修饰符

1. .prevent修饰符
   阻止执行预设事件
2. 阻止预设事件
   • 使用事件对象阻止预设事件

       <div id="app">
           <a href="http://www.baidu.com" @click="dump">跳转百度</a>
       </div>
       <script src="../js/vue.js"></script>
       <script>
           new Vue({
               el:"#app",
               data:{
                   msg:''
               },
               methods:{
                   dump:function(e){
                       e.preventDefault();
                       ...
                   }
               }
           })
       </script>
     

   • 使用.prevent修饰符阻止预设事件

        <a href="https://www.baidu.com" @click.prevent="dump">跳转百度</a>