vue里的事件修饰符和按键修饰符

vue里的事件修饰符和按键修饰符

vue事件修饰符：

• 包括：
  
  • .stop ：阻止事件冒泡
    .prevent ：阻止默认事件，提交事件不再重载页面
    .capture ：添加事件侦听器时使用事件捕获模式 （若有多个该修饰符的元素则由外而内触发）
    .self ：当事件在该元素本身（而不是子元素）触发时触发回调(即直接作用在该元素上的事件才可以执行)
    .once ：事件只能触发一次
• .stop:在上一篇已介绍过

• .prevent: @click.prevent

  • @click.prevent.self和@click.self.prevent区别：
  • @click.prevent.self 会阻止所有的点击
  • @click.self.prevent 只会阻止对元素自身的点击
  • 例如：
    

    <div @click="alert(1)">
      <a href="/#" @click.prevent.self="alert(2)">
        <div @click="alert(3)"></div>
      </a>
    </div>
    

  点击div3，会alert3,alert1。不但阻止了alert(2)，还阻止了a的默认跳转。因为点击的时候会先prevent，阻止默认事件，阻止了跳转;然后判断是否是self，因为点击到的是div3，所以不是self，阻止了alert(2)。

  <div @click="alert(1)">
   <a href="/#" @click.self.prevent="alert(2)">
      <div @click="alert(3)"></div>
    </a>
  </div>

点击div3，会alert3,alert1,跳转到/#。只阻止了alert(2)。
因为会先判断self，点击到div3，不是self，所以不会执行click事件，就不会执行 阻止默认事件和alert(2) ，所以可以跳转

• .capture：@click.capture

  • 例如：

     <div id="vue-app">
        <div class="div1" v-on:click.capture="alert(1)">
            <div class="div2" v v-on:click.capture="alert(2)">
                <div class="div3" v-on:click="alert(3)">
                    <div class="div4" v-on:click="alert(4)"></div>
                </div>
            </div>
        </div>
    </div>
    结果为1 2 4 3,即先触发div1再触发div2再触发div4再触发div3
    <script>
    new Vue({
        el:"#vue-app",
        methods:{
            alert: function(val){
                alert(val);
            }
        }
    });
    

  • .self ：@click.self

     <div id="vue-app">
        <div class="div1" v-on:click.capture="alert(1)">
            <div class="div2" v-on:click.self="alert(2)">
                <div class="div3" v-on:click="alert(3)">
                    <div class="div4" v-on:click="alert(4)"></div>
                </div>
            </div>
        </div>
    </div>
        结果为1 4 3
            <script>
            new Vue({
                el:"#vue-app",
                methods:{
                    alert: function(val){
                        alert(val);
                    }
                }
            });
            </script>
    

  • 关于.stop和.self的区别，前者是防止事件冒泡，后者则是忽略了事件冒泡和事件捕获的影响。只有直接作用在 该元素上的事件才会被调用，因为它看起来 与.stop好像有一点像，但其实他们作用的对象不同.

  • .once ：@click.once:让元素事件只执行一次事件，就可以使用once

  安检修饰符

  • 包括：
  • .enter
    .tab
    .delete (捕获 “删除” 和 “退格” 键)
    .esc
    .space
    .up
    .down
    .left
    .right
    .ctrl
    .alt
    .shift
    .meta
• @keyup.enter
• 例如：

<div id="app">
        <input type="text" id="username" v-on:keyup.enter="submit()">
        <button v-on:click="submit()" id="btn">你点我试试</button>
    </div>
    <script type="text/javascript" src="js/vue.js">
    </script>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            methods: {
                submit() {
                    alert("试试就试试");
                }
            }
        })
    </script>

v-on:keyup.enter=”submit()”
v-on指令绑定enter键事件，点击执行submit()函数事件，
同样也可以简写为@keyup.enter=”submit()”
下面的button按钮也绑定了点击事件，执行函数submit();
其他的按键修饰符使用方法一样。