Vuejs实践--事件绑定
Vue中的事件绑定一般通过v-on指令来绑定事件:事件绑定v-on:事件绑定的表达式的值可以是js语句,也可以是在methods选项中定义好的方法名(有参数的时候当然需要传参),在vue事件中,默认是含有事件对象e的,只不过在methods中定义函数的时候要将其作为形参传进去,在通过v-on调用该方法的时候,就不必写实参$event了 (如果要用的话),这个e包含了一些事件常用的信
Vue中的事件绑定一般通过v-on指令来绑定事件:
事件绑定
v-on:事件绑定的表达式的值可以是js语句,也可以是在methods选项中定义好的方法名(有参数的时候当然需要传参),
在vue事件中,如果要用到事件对象e,要将e作为形参传入函数,并且在执行该函数的时候,传入实参$event,该参数包含事件的一些信息:如事件源(事件发生在谁身上),事件类型等
HTML部分
<div id="container">
<!-- js表达式 -->
<span>{{initNum}}</span>
<button @click="initNum++">点我加一</button>
<!-- 函数名 -->
<span>{{initNum}}</span>
<button @click="addTen(10,$event)">点我加十</button>
<!-- 函数名 -->
<span>{{initNum}}</span>
<button @click="addTwo">点我加二</button>
<a href="www.baidu.com" @click="goto('禁止打开',$event)" >百度一下</a>
</div>
Javascript部分
var myApp = new Vue({
el:"#container",
data:{
userName:"张三",
initNum:10,
},
methods:{
addTen:function(plus,event){
this.initNum+=plus;//this表示的是当前的Vue实例
console.log(event.preventDefault());
window.alert(this.initNum)
},
addTwo:function(){
this.initNum+=2;
console.log(event)
},
goto:function(message,event){
event.preventDefault();
window.alert(message);
console.log(event)
}
}
})
事件修饰符
当然,事件也有自己的修饰符,这里不不再一一举例(有很多),但是基本用法要清楚:
就是在@事件名后加一个点"."跟上修饰符即可,例如@click.stop 阻止事件冒泡,向上传播;.prevent:阻止默认行为.如点击a标签的链接,会打开目标界面的默认行为;@click.once事件只执行一次等等,此外还有一些键盘事件的修饰符(还是事件),并且修饰符可以叠加。
键盘事件
语法:@keydown.(键位的keyCode或键位别名) = callback
例如:@keydown.13 或者@keydown.enter(别名,回车事件);@keydown.38或者@keydown.up(别名,按方向键上--事件);
自定义键盘事件
全局:Vue.config.keyCodes ={别名:对应的keycode },然后就可以在键盘事件中按相应的键,就会有反应了。
更多推荐
所有评论(0)