一、v-on事件绑定
-
v-on指令
用于绑定事件 -
v-on用法
-
直接绑定事件：
注意：
- 绑定的事件是对应的方法不是定义在data里面，而是定义在vue实例的methods里
- 绑定的函数可直接绑定函数名——fun，也可以直接调用函数——fun()
@事件名="方法" =>
@click="onClick"v-on:事件名="方法" =>
v-on:click="onClick"methods:{ onClick:function(){ console.log('onClick') } } -
绑定事件类：
注意： 当绑定多个事件时，需要传入一个对象，对象的键名就是事件名，对象的键值就是对应事件要执行的方法。注意在vue实例中方法一定要有，不然就报错。
v-on="{事件:方法}" =>
v-on="{mouseenter:onEnter,mouseout:onOut}"methods:{ onEnter:function(){ console.log("onEnter") }, onOut:function(){ console.log("onOut") }, } -
阻止默认形为其一（提交时刷新）
v-on:事件="方法($event)" =>
@submit="onSubmit($event)"methods:{ onSubmit:function(e){ e.preventDefault(); console.log("onSubmit") } }注意： $event是vue里面的事件对象，vue能认识。在表单提交的时候，浏览器会默认发送一个get或者post请求到指定页面，刷新整个页面。所以要阻止浏览器的默认行为，可以用事件对象
e.preventDefault(); -
阻止默认形为其二（提交时刷新）
注意： 阻止form表单提交的这种浏览器默认事件，其实vue也想到了，并它封装好了，只要在事件的后面添加一个
.prevent修饰符，表示阻止默认事件。v-on:事件.行为="方法" =>
@submit.prevent="onSubmit2"注： 绑定事件中，除了prevent阻止默认事件，还有stop,表示停止冒泡事件。
@submit.stop="onSubmit2"methods:{ onSubmit2:function(){ console.log("onSubmit2") } } -
键盘事件（最好配合阻止默认行为一起使用）
注： 当我们绑定的事件是keyup、keypress、keydown键盘事件时，而且需要判断按下是回车时。vue也想到了这点，只需要在键盘事件后面添加一个.enter修饰符即可。
v-on:事件.键值="方法" =>
@keyup.enter="onEnter"methods:{ onKeyup:function(){ console.log("onKeyup") } }
-
二、v-on例子
<div id="app">
<div v-text="num"></div>
<div>
<button v-on:click='num++'>加1</button>
<button @click='add'>@加1</button>
<button @click='sub()'>@减1</button>
<button v-on:click='sub'>减1</button>
</div>
</div>
<script src="./js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
num:0
},
methods:{
//vue的函数必须定义在vue的methods属性之中
add:function(){
//这里this指向就是当前Vue的实例对象vm
console.log(this === vm);
//Vue的实例对象可直接使用data中的数据
this.num++;
},
sub:function(){
console.log(this === vm);
this.num--;
}
}
})
</script>
三、事件函数参数传递
-
调用函数与传递事件对象
v-on:click="方法(value,$event)"注意： 当要传递事件对象时，必须将它放在实参最末位。并且事件对象的名字是固定的，只能是
$event。- 例子：
<div id="app"> <div v-text="num"></div> <div> <button @click='event(11,22,$event)'>@加1</button> </div> </div> <script src="./js/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ num:0 }, methods:{ event:function(para1,para2,e){ console.log(para1,para2); console.log(e); console.log(e.target.tagName); console.log(e.target.innerHTML); }, } }) </script> -
绑定函数名与传递事件对象
v-on:click="方法名"注意： 绑定函数名的方法默认首个形参就是事件对象
$event。methods:{ fun:function(event){ } }- 例子：
<div id="app"> <div v-text="num"></div> <div> <button @click='event'>事件调用</button> </div> </div> <script src="./js/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ num:0 }, methods:{ event:function(e){ console.log(e); console.log(e.target.tagName); console.log(e.target.innerHTML); } } }) </script> -
总结
事件绑定-参数传递：
- 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个形式参数。
- 如果事件绑定函数调用，那么事件对象必须作为最后一个参数显性传递，并且事件函数传递的实际参数名称必须为
$event。