vue事件监听,事件修饰符和按键修饰符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.min.js"></script>
	</head>
	<body>
		<div id="app">
			<h1>事件监听</h1>
			<button @click="test">test</button>
			<button @click="test2('ceshi')">test2</button>
			<button @click="test3">test3</button>
			<button @click="test4($event,1)">test4</button>
			
			<h1>事件修饰符</h1>
			<!--
				@click会存在事件冒泡
				@click.stop 阻止事件冒泡
			-->
			<div style="width: 200px;height: 200px;background: red;" @click="test5">
				<div style="width: 100px;height: 100px; background: blue;" @click.stop="test6">
					
				</div>
			</div>	
			<!--阻止事件的默认行为-->
			<a href="http://www.jiajiajia.club" target="_blank" @click.prevent="test7">去官网</a>
			
			<h1>按键修饰符</h1>
			<!--test8,test9,test10都可以监听enter键-->
			<input type="text" @keyup="test8" />
			<input type="text" @keyup.13="test9" />
			<input type="text" @keyup.enter="test10" />
			<input type="text" @keyup="test11" placeholder="获取按键的keyCode"/>
		</div>
		<script>
			var v=new Vue({
				el:'#app',
				data:{
				},
				methods:{
					test(){
						alert("test")
					},
					test2(value){
						alert("test2"+value)
					},
					test3(event){
						alert(event.target.innerHTML)
					},
					test4(event,value){
						alert(event.target.innerHTML+value)
					},
					test5(){
						alert("test5");
					},
					test6(){
						alert("test6");
					},
					test7(){
						alert("去官网");
					},
					test8(event){
						if(event.keyCode==13){
							alert(event.target.value);	
						}
					},
					test9(event){
						alert(event.target.value);
					},
					test10(event){
						alert(event.target.value);
					},
					test11(event){
						alert(event.keyCode);
					}
				}
			})
		</script>
	</body>
</html>