<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type="text/javascript" src="../js/vue.js"></script>
<title>vue中的事件处理</title>
</head>
<body>
<div id="root">
<!-- 事件回调需要配置再methods中，最终会在vm上
methods中的配置函数不要用箭头函数
mehods中配置的函数，都是vue管理的哈数，this指向vm或者组件实例对象
-->
<h1>名字 :{{name}}</h1>
<h1>地址 :{{address}}</h1>
<!-- 事件指令v-on 有简写写法@ -->
<button v-on:click="shouwInfo1"> 点我提示信息1(不传参)</button>
<!-- 事件传参$event：这个为事件内置参数,后面可再加别的参数-->
<button @click="shouwInfo2($event,66)"> 点我提示信息2（传参）</button>
</div>
<script>
const vm=new Vue({
el:"#root",
data:{
name:"xiao bai",
address:"bei jing"
},
methods:{
shouwInfo1(){
alert("你好")
},
shouwInfo2($event,number){//这里接收参数
console.log(event,number);
alert("你吃了吗")
}
}
})
</script>
</body>
</html>
