VUE 入坑系列 一 事件

Posted dahuo

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VUE 入坑系列 一 事件相关的知识,希望对你有一定的参考价值。

html代码
技术分享图片
<div id="app">
  <button v-on:click="counter += 1">加1</button>
  <button @click="counter += 1">加2</button>
  <button v-on:click="minusOne">减1</button>
  <button @click="minus(2,$event)">减2</button>
    <p>当前值: {{ counter }} </p>
  </div>
View Code
技术分享图片
var vm = new Vue({
  el: "#app",
  data: {
    counter: 0
  },
  methods: {
    minusOne() {
      this.counter--;
    },
    minus(number,event) {
      this.counter = this.counter - number;
    }
  }
});
View Code

说明

1) v-是指令

2) v-on是绑定事件,可以简写成@click

3 )  传参数的事件方法

 

事件修饰器

<!-- 阻止点击事件的冒泡行为 -->

<a v-on:click.stop="doThis"></a>

<!-- 阻止默认的表单提交 -->

<form v-on:submit.prevent="onSubmit"></form>

<!-- 事件修饰器可以连用 -->

<a v-on:click.stop.prevent="doThat">

<!-- 只需要修饰器,而无需处理方法 -->

<form v-on:submit.prevent></form>

<!-- 使用 capture 模式-->

<div v-on:click.capture="doThis">...</div>

<!-- 仅当event.target是自身的时候才执行 -->

<!-- 比如,这样写了之后点击子元素就不会执行后续逻辑 -->

<div v-on:click.self="doThat">...</div>

 

按键修饰符

在监听键盘事件时,我们经常需要检查常见的键值。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

可以通过全局 config.keyCodes 对象自定义按键修饰符别名:

 

// 可以使用 `v-on:keyup.f1`

Vue.config.keyCodes.f1 = 112

 

以上是关于VUE 入坑系列 一 事件的主要内容,如果未能解决你的问题,请参考以下文章

VUE 入坑系列 一 双向绑定

webpack入坑之旅不是开始的开始

Vue基础系列——Vue中的指令(上)

Vue基础系列——Vue模板中的数据绑定语法

入坑Vue(本文章没啥技术含量,单纯吐槽,不喜误入)

gulp入坑系列——初试JS代码合并与压缩