<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
<h2>绑定监听</h2>
<!-- v-on:click="test" v-on:相当于@ -->
<button @click="test1">test1</button>
<button @click="test2('hello')">test2</button>
<button @click="test3">test3</button>
<button @click="test4(123,$event)">test4</button>
<h2>事件修饰符</h2>
<!-- 阻止事件 -->
<div style=" 200px;height: 200px;background-color: red;" @click="test5">
<div style=" 100px;height: 100px;background-color: blue;"@click.stop="test6">
</div>
</div>
<!-- <a href="http:www.baidu.com"@click="test7">去百度</a> -->
<!-- 阻止事件冒泡 -->
<a href="http:www.baidu.com"@click.prevent="test7">去百度</a>
<h2>按键修饰符</h2>
<input type="text"@keyup.13="test8" />
<input type="text"@keyup.enter="test8" />
</div>
<script type="text/javascript">
const vm = new Vue({
el:"#app",
data:{
test1(){
alert("test1")
},
test2(msg){
alert(msg)
},
test3(event){
alert(event.target.innerHTML)
},
test4(number,event){
alert(number+''+event.target.innerHTML)
},
test5(){
alert("out")
},
test6(){
alert("inner")
},
// test6(event){
// event.stopProagation()
// alert("inner")
// }
test7(){
alert("点击了")
},
test8(event){
// if(event.keyCode===13){
alert(event.target.value+''+event.keyCode)
// }
}
}
})
</script>
</body>
</html>