<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件的基本使用</title>
<script type="text/javascript" src="../vue.js"></script>
</head>
<body>
<div id="root">
<h2>欢迎欢迎-{{name}}</h2>
<button v-on:click="showInfo1">按键1</button>
<button @click="showInfo2($event, 666)">按键2</button>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue(
{
el: '#root',
data: {
name: '哈哈'
},
methods: {
showInfo1(event){
alert('Hello')
console.log(event.target.innerText)
console.log(this) // this === vm
},
showInfo2(event, number){
alert(number)
console.log(event)
console.log(event.target.innerText)
console.log(this) // this === vm
}
}
}
)
</script>
</body>
</html>