Vue的事件修饰符

.prevent 阻止默认事件。
.stop 阻止冒泡行为。
.once 只执行一次，多次点击无效。
.capture 开启事件捕获模式。即事件从上向下依次执行。
.self 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.passive 不阻止默认事件。并要注意不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。
v-on 中鼠标按钮修饰符：
- .left 鼠标左键
- .right 鼠标右键
- .middle 鼠标中键
v-model 中的修饰符：
- .lazy 使用change事件而非input事件，如果不需要实时更新，则可以用.lazy
- .trim 去掉前后的空格
- .number 因为v-model绑定数据是一个字符串，会将数据中的字符串转为number类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue的事件修饰符</title>
	</head>
	<body>
		<div id="app">
			<a href="http://www.google.com" @click.prevent="clickA">阻止默认事件发生</a>
			<div @click="clickDiv2">
				<div @click.stop="clickDiv1">
					阻止冒泡事件（点击div1时并不会实行div2的方法）
				</div>
			</div>
			<button @click.once="clickOnce">只能点击一次</button>
		</div>
	</body>
	<script src="js/vue.js" type="text/javascript"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el: "#app",
			data: {},
			methods: {
				clickA() {
					console.log("点击了链接")
				},
				clickDiv1() {
					console.log("点击了div1")
				},
				clickDiv2() {
					console.log("点击了div2")
				},
				clickOnce() {
					console.log("点击了一次按钮")
				}
			}
		})
	</script>
</html>