v-on

v-on 指令用来监听 DOM 事件

export

source

<div id="app">
	<button v-on:click="click_test" class="btn btn-primary">按钮</button>
</div>
var app = new Vue({
  el: '#app',
  methods : {
  	click_test : function(event){
  		// event 是触发该事件的详细事件对象 
  		alert("你点击了");
  	}
  }
});
使用 v-on 绑定事件,事件的函数用 methods 对象接收,形式为对象形式

修饰符

修饰符在事件后面跟上 . 加上修饰符名

// 阻止单击事件冒泡
<a v-on:click.stop="doThis"></a>

// 提交事件不再重载页面
<form v-on:submit.prevent="onSubmit"></form>

// 修饰符可以串联
<a v-on:click.stop.prevent="doThat">

// 只当事件在该元素本身(而不是子元素)触发时触发回调
<div v-on:click.self="doThat">...</div>

// 只有在 keyCode  13 时调用 vm.submit()
<input v-on:keyup.13="submit">
// 同上 按下确定键时
<input v-on:keyup.enter="submit">

全部的按键别名:

enter
tab
delete
esc
space
up
down
left
right