专栏首页老马寒门IT04-Vue入门系列之Vue事件处理

04-Vue入门系列之Vue事件处理

4.1. 监听事件的Vue处理

Vue提供了协助我们为标签绑定时间的方法,当然我们可以直接用dom原生的方式去绑定事件。Vue提供的指令进行绑定也是非常方便,而且能让ViewModel更简洁,逻辑更彻底。所以还是推荐大家使用的。

Vue提供了v-on指令帮助我们进行事件的绑定。 基本的内联事件处理方法[官方demo]:

<div id="example-1">
  <!-- 为按钮绑定点击事件,执行counter += 1的任务。 -->
  <button v-on:click="counter += 1">增加 1</button>
  <p>这个按钮被点击了 {{ counter }} 次。</p>
</div>
<script>
var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})
</script>

4.2. 事件处理方法集成到Vue对象

内联的方式绑定的事件,只能处理简单的事件的处理逻辑。复杂的情况还是封装到js中最方便,也不容易出错。 Vue对象中可以添加methods属性,开发者可以把事件处理函数的逻辑放到methods中。

<!DOCTYPE html> 
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue入门之动态显示表格</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <p>{{ number }}</p>
    <input type="button" name="btnGetNumber" value="增加[绑定事件处理器]" v-on:click="getNumber">
    <input type="button" name="btnGetNumber" value="增加[内联方法调用]" v-on:click="getNumber()">
  </div>
  <script>
    var app = new Vue({         
      el: '#app',               
      data: {                   
        number: 1
      },
      methods: {
        // 事件响应方法的逻辑代码
        getNumber: function (e) {
          this.number += 1;   // 不管是内联方法调用,还是绑定事件处理器两种方式执行事件响应方法的时候 this都是指向 app
        }
      }
    });
  </script>
</body>
</html>

4.3. 事件修饰符

官网上写的非常好,这块就直接用管网的吧。在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现这点,但更好的方式是:methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。 为了解决这个问题, Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。

  • .stop
  • .prevent
  • .capture
  • .self
  • .once
<!-- 阻止单击事件冒泡 --> 
<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> 
<!-- the click event will be triggered at most once --> 
<a v-on:click.once="doThis"></a>

4.4. 按键修饰符

在监听键盘事件时,我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
记住所有的 keyCode 比较困难,所以 Vue 为最常用的按键提供了别名:
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

全部的按键别名:

  • .enter
  • .tab
  • .delete (捕获 “删除” 和 “退格” 键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right
  • .ctrl
  • .alt
  • .shift
  • .meta

4.5. 事件绑定的简写

Vue中属性的绑定的简写直接是: === 'v-bind:' 而事件的缩写是直接变成@. 也就是说: v-on: === @ 看下面的例子:

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

4.6. 事件绑定总结

Vue为了方便大家进行开发,提供了事件的相关的封装,可以让我们方便我们用Vue对事件进行开发,尤其是v-on指令的非常方便的跟Vue对象中methods进行配合进行复杂的事件处理,非常方便。另外事件的事件修饰符和按键修饰符也可以让Vue事件这块锦上添花。

Github地址:源码下载 其他详情请参考:http://aicoder.com/vue/preview/all.html

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 05-Vue入门系列之Vue实例详解与生命周期

    Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理、数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我...

    老马
  • 01Vue.js快速入门(一)Vue概念及Helloworld

    Vue是一个前端的双向绑定类的框架,发音[读音 /vjuː/, 类似于 view]。新的Vue版本参考了React的部分设计,当然也有自己独特的地方,比如Vue...

    老马
  • aicoder实习svn内部培训教程

    都已经用了git,为什么还要介绍svn呢?为了让aicoder.com的学员能够掌握多种的源代码管理工具的使用方法,更快的融入到项目开发中,特整理此文档。

    老马
  • 手写简单的rpc

    gfu
  • 重磅报告:解读2016互联网医院崛起及未来三大趋势

    前  言 11月16日,第三届世界互联网大会将正式召开。大会首次设立“互联网+智慧医疗 ”分论坛,政府及产业等各界人士共同探讨互联网与医疗深度融合的创新解决方案...

    腾讯研究院
  • 新一代IT技术与架构,合力打造数字化健康服务市场

    目前对于大部分的医疗企业来说,在保证当前业务系统高效稳定运行的情况下,通过简单、低成本的方式逐步推动互联网下的新业务模式的渗入式发展,才是医疗行业互联网化转型...

    数据和云01
  • 昨天2年python开发的同事,还在问我 if __name__ == '__main__' 是什么意思?

    相信刚接触Python的你一定有过如此经历,把所有的代码都写在 if __name__ == '__main__'下,因为有人告诉你,这样比较符合 Python...

    一墨编程学习
  • 5个可以帮助pandas进行数据预处理的可视化图表

    “一目了然胜过千言万语。”分析数据点的探索性数据分析(EDA)是在算法的数据建模之前制定假设的正确步骤。

    deephub
  • 《redis 设计与实现》--总结

    Redis自己构建了简单动态字符串(Simple Dynamic String,SDS)来作为默认的字符串表示。 SDS的构造如下:

    小二三不乌
  • Spring Boot 快速入门系列(II)—— 数据操作篇之 Spring Data JPA

    从 Spring Boot 快速入门系列前两篇中(Spring Boot 快速入门系列(先导篇) —— 从 Hello World 开始、Spring Boot...

    IT技术小咖

扫码关注云+社区

领取腾讯云代金券