<!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">
<script src="../vue.js"></script>
<title>Document</title>
</head>
<body>
<!--
事件的基本使用:
1. 适合用v-on:xxx或者@xxx绑定事件
2. 事件的回调要写在methods中,最后会在vm身上
3. show和show2($event) 效果一样,但是后者可以传参数
-->
<div id="root">
<h1>{{msg}}</h1>
<button v-on:click="show">点我点击提示信息</button>
<button @click="show">点我点击提示信息</button>
<button @click="show2($event,1)">点我点击提示信息2</button>
</div>
<script>
var vm=new Vue({
el:"#root",
data:{
msg:"hello",
},
methods:{
show(){
alert("你好")
console.log(this)//普通形式的this是vm或者组件实例对象,而写成箭头函数的this是window
},
show2(event,number){
alert("好好")
console.log(event,number)
}
}
})
</script>
</body>
</html>
【vue】事件处理
最新推荐文章于 2023-07-11 17:19:02 发布