首页 > 代码库 > 04-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="http://www.mamicode.com/增加[绑定事件处理器]" v-on:click="getNumber">    <input type="button" name="btnGetNumber" value="http://www.mamicode.com/增加[内联方法调用]" 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

技术分享

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