vue-day8--事件的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<div>欢迎来带{{name}}学习</div>
<button v-on:click="showinfo1">点我提示信息</button>
<button @click="showinfo1">点我提示信息22(不传参)</button>
<button @click="showinfo2($event,8888)">点我提示信息33(传参数)</button>
</div>
</body>
<!--
事件的基本使用
1.使用v-on:xxx 或 @xxx 绑定事件 其中xxx 是事件名
2.事件的回调需要配置在methods 对象中 最终会出现在vm 上
3.metohds 中配置的函数，不要使用箭头函数，否则this对象就不是vm 了
4.methods 中配置的函数，都是被vue所管理的函数，this的指向是vm或者组件实例
5.@click="demo" 和 @click="demo($event)" 效果一样但是后者可以传递参数
-->
<script type="text/javascript">
new Vue({
el: "#root",
data: {
name: "尚硅谷",
},
methods: {
showinfo1(event) {
console.log(event.target.innerText);
console.log(this); //此处this 只得是vm
alert("9999");
},
showinfo2(event, num) {
alert(num);
},
},
});
</script>
</html>
