vue.js入门（6）事件修饰符

//index.html

	
	
	
	


	

	加一岁
	
	减一岁
	{{ age }}
	
	
	
{{ x }},{{ y }}
		

	
	
	百度
	百度
	
	
	
	

//app.js

new Vue({
	el:"#vue-app",
	data:{
		age:30,
		x:0,
		y:0,
	},
	methods:{	
	up:function(){this.age++;},
	down:function(){this.age--;},
	update:function(event)
	{
		//console.log(event);
		this.x=event.offsetX;
		this.y=event.offsetY;
	},
	alas:function()
	{
		alert("succes!");
	},
	alaf:function()
	{
		alert("fail!");
	}
	}
});

1.stop

阻止事件传播，代码例子里，进入到所选范围则阻止坐标再次更变

2.prevent

阻止所有点击，这里可以运用成，如登陆界面，密码或者用户名错误，则不进行跳转，仍然在该页面，如果成功，提示成功，并且跳转

3.once

只能进行一次操作，这里年龄只能加一次

4.capture

https://blog.csdn.net/wangxiaoxiaosen/article/details/73849455

可参考这个例子，.capture事件修饰符的作用添加事件侦听器时使用事件捕获模式

即是给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发

5.self

https://www.zhangshengrong.com/p/v710PGzY1M/

可参考这个例子，.self会监视事件是否是直接作用到obj2上，若不是，则冒泡跳过该元素