Vue学习笔记（八） - 方法与事件处理器

发表于

方法处理器

v-on 指令监听 DOM 事件：

<div id="example">
<button v-on:click="greet"> Greet </button>
</div>

var vm = new Vue({
	el: '#example',
	data:{
		name: 'Vue.js'
	},
	methods: {
		greet: function(event){
			alert('Hello ' + this.name + '!');
			alert(event.target.tagName);
		}
	}
})
vm.greet()	// 可以自己在 JavaScript 代码调用

内联语句处理器

即类似一个内联表达式，可以为事件处理器传入参数，如：

<button v-on:click="say('哦嗨哟')"> say something </button>

另外，在这里可以给其传入一个特殊变量 $event，可以访问原生事件对象，如：

<button v-on:click="say('哦嗨哟', $event)"> say something </button>

事件修饰符

使用指令后缀：
阻止事件冒泡 - .prevent
取消默认行为 - .stop
e.g.

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

Vue 1.0.16+ 新增了两个
添加事件侦听器时使用 capture 模式 - .capture
只当事件在该元素本身（非子元素）触发 - .self

按键修饰符

当监听的事件是 keyup 键盘事件时，可以在后面加上按键修饰符。
按键修饰符可以是 keyCode，也可以是按键别名。

<input v-on:keyup.13="submit"/>
<input v-on:keyup.enter="submit"/>

Vue.js 的按键别名：

  • enter
  • tab
  • delete
  • esc
  • space
  • up
  • down
  • left
  • right

P.s.
1.0.8+： 支持单字母按键别名

<input v-on:keyup.a="submit"/>
<!-- 按“A”“a”都会触发 -->

1.0.17+： 可以自定义按键别名
为 F1 键设置别名：

Vue.directive('on').keyCodes.f1 = 112
==> <input v-on:keyup.f1="doSth">

使用 v-on 的好处

  1. 根据模版可以轻松定位在 JavaScript 对应的方法
  2. 无须在 JavaScript 手动绑定事件
  3. ViewModel 被销毁时，所有事件处理器都会自动被删除