<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<h2>事件监听</h2>
<button type="button" @click="test1">我是按钮1</button>
<button type="button" @click="test2('我是', $event)">按钮2</button>
<h2>事件修饰符</h2>
<a href="https://www.baidu.com" @click.prevent="test">我不去百度</a><!--阻止事件的默认行为-->
<div @click="test" style="background-color: #2C3E50;height: 100px; 100px;">
<div @click.stop="test" style="background-color: #42B983;height: 50px; 50px;"></div><!--阻止事件冒泡-->
</div>
<h2>按键修饰符</h2>
<p>按Enter键响应</p>
<input type="text" @keyup.13="test3" />
<input type="text" @keyup.enter="test3" />
</div>
<script>
const vm = new Vue({
el: '#app',
methods:{
test(){
alert('test')
},
test1(event){
alert(event.target.innerHTML)
},
test2(text, event){
alert(text+event.target.innerHTML)
},
test3(event){
alert(event.target.value+' '+event.keyCode)
}
}
})
</script>
</body>
</html>