在前面的基础学习中已经写了v-for和v-bind两个指令
今天学习v-on指令
v-on指令：用来绑定事件的
body中
<div id="app"></div>
script中
var app = new Vue({el : ‘#app‘,methods : {}})在div app中加入一个button并绑定一个点击事件
<button v-on:click="onClick">点我</button>
在js中的methods 中加入一个onClick
methods : {onClick : function(){console.log("clicked");}, ???//每次添加一个成员就在后面加一个，方便添加新的}这时，在浏览器中点击按钮console会打印clicked，绑定click成功
我们还可以同时绑定多个事件
<button v-on=‘{mouseenter:onEnter,mouseleave:onOut}‘ v-on:click="onClick">点我</button>上面我们通过对象的方式绑定多个事件，对象中的键是事件的名称 值是methods中的成员属性方法
methods : {onClick : function(){console.log("clicked");},onEnter : function(){console.log("mouseenter");},onOut : function(){console.log("mouseout");},}这时，在浏览器中将鼠标移入button console会打印mouseenter 移出button console会打印mouseout
在div app中添加一个form 为form绑定一个提交事件
<form v-on:submit="onSubmit"><input type="text"><br /><input type="submit" value="提交"></form>
在method中添加onSubmit
onSubmit:function() {console.log("submitted");},绑定完发现在运行时无法在console中打印出submitted 原因是每次提交页面都会刷新
避免刷新的方法有两种
第一种onSubmit传递参数$event
<form v-on:submit="onSubmit($event)">
然后
onSubmit:function(e) {e.preventDefault();console.log("submitted");},这样我们就能打印出submitted而不刷新页面了
然而vue为我们提供了更加简单的方法那就是
<form v-on:submit.prevent="onSubmit">
而onSubmit不改动
onSubmit:function() {console.log("submitted");},vue还提供了subnit.stop 用来停止冒泡
keyUp事件也提供了keyUp.enter只有enter按下时才触发
<form v-on:keyUp.enter="onkeyUpenter" v-on:submit.prevent="onSubmit">
在method中添加
onkeyUpenter : function() {console.log("keyenterpressed");},只有按下enter时才会在console中打印
由于v-on很常用所以它也有一个简写方式@如 @click="onClick" @代表v-on:
在用对象同时绑定多个事件时，不能用@代替v-on。
Vue.js 基础学习 v-on 指令
原文地址：http://www.cnblogs.com/huzhuo/p/7466864.html