Vue 中可以通过 v-on 来绑定事件监听函数, 不过事件会有许多额外情况, 比如 是否阻止冒泡 / 是否阻止重载 / 是否限制点击次数 / 是否可以通过按键触发 等等. 这时就需要使用到 事件修饰符. 下面是 vue事件修饰符按键修饰符.

 

事件修饰符

<!-- 阻止单击事件冒泡 --> 
<a v-on:click.stop="doThis"></a> 
 
<!-- 提交事件不再重载页面 --> 
<form v-on:submit.prevent="onSubmit"></form> 
 
<!-- 修饰符可以串联  --> 
<a v-on:click.stop.prevent="doThat"></a> 
 
<!-- 只有修饰符 --> 
<form v-on:submit.prevent></form> 
 
<!-- 添加事件侦听器时使用事件捕获模式 --> 
<div v-on:click.capture="doThis">...</div> 
 
<!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 --> 
<div v-on:click.self="doThat">...</div> 
 
<!-- click 事件只能点击一次,2.1.4版本新增 --> 
<a v-on:click.once="doThis"></a>

 

按键修饰符

<!-- 只有在 keyCode 是 13 时调用 vm.submit() --> 
<input v-on:keyup.13="submit"> 
 
<!-- 同上 --> 
<input v-on:keyup.enter="submit"> 
 
<!-- 缩写语法 --> 
<input @keyup.enter="submit"> 
 
<!-- 所有按键别名 --> 
.enter 
.tab 
.delete (捕获 "删除" 和 "退格" 键) 
.esc 
.space 
.up 
.down 
.left 
.right 
.ctrl 
.alt 
.shift 
.meta

 

下面是一个实际的例子, 执行顺序为: 最外层 > 第二层 > 最里层 > 第三层

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> 
  <title>Vue Test</title> 
  <style> 
      .style1 { 
          width: 100px; height: 100px; background-color: tomato; 
          text-align: center; line-height: 100px; color: white; 
          cursor: pointer; 
      } 
  </style> 
</head> 
<body> 
    <div id="app"> 
        <div class="style1" v-on:click.capture="act1"> 
            <!-- 最外层 --> 
            <div v-on:click.capture="act2"> 
                <!-- 第二层 --> 
                <div v-on:click="act3"> 
                    <!-- 第三层 --> 
                    <div v-on:click="act4"> 
                        <!-- 最里层 --> 
                        点击 
                    </div> 
                </div> 
            </div> 
        </div> 
    </div> 
    <script> 
        var vApp = new Vue({ 
            el: "#app", 
            methods: { 
                act1: function () { alert("最外层") }, 
                act2: function () { alert("第二层") }, 
                act3: function () { alert("第三层") }, 
                act4: function () { alert("最里层") } 
            } 
        }) 
    </script> 
</body> 
</html>

 

发布评论

分享到:

IT源码网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

怎样在 Vue 里面绑定样式属性 讲解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。