Vue对元素绑定事件，需要使用指令，也就是v-开头
v-on：当什么什么时候时候
点击-出现弹窗：使用method方法
<!-- 准备容器 -->
<div id='root'>
<h2>欢迎页面，你好 {{name}}</h2>
<!-- v-on:click 当元素被点击时候 展示回调函数去调用-->
<button v-on:click="showInfo">点我提示事件</button>
</div>
<script>
new Vue({
el: '#root',
data: {
name:'Amy',
},
methods:{//方法
showInfo(){
alert('欢迎来到故宫')
}
},
});
</script>
测试有没有接受参数
methods:{//方法
showInfo(a,b,c){//可以接受参数吗
console.log(a,b,c)//发现可以接收一个参数，为时间对象，PointerEvent
//alert('欢迎来到故宫')
}接收的参数是事件对象，可以获取事件对象的一些参数，里面的this是vm,Vue实例对象
const vm= new Vue({
el: '#root',
data: {
name:'Amy',
},
methods:{//方法
showInfo(event){//可以接受参数吗
console.log(event);//发现可以接收一个参数，为时间对象，PointerEvent
//alert('欢迎来到故宫')
console.log(event.target);//获取元素
console.log(event.target.innerText);
console.log(this===vm)//此处的this是vm Vue实例对象
}
},
});但是如果将函数写成箭头函数 this指
showInfo:(event)=>{//可以接受参数吗
console.log(event);//发现可以接收一个参数，为时间对象，PointerEvent
//alert('欢迎来到故宫')
console.log(event.target);//获取元素
console.log(event.target.innerText);
console.log(this)//此处的this是window
}当点击按钮，Vue发现需要执行showInfo函数，于是去vue实例中调用此方法，并且传入一个event,如果是箭头函数，就没有自己的this,就往外面找，就是window
所以：所有被Vue管理的函数需要写成普通函数，不要是箭头函数
简写：v-on: =======@
<!-- 准备容器 -->
<div id='root'>
<h2>欢迎页面，你好 {{name}}</h2>
<!-- v-on:click 当元素被点击时候 展示回调函数去调用-->
<button v-on:click="showInfo">点我提示事件</button>
<button @click="showInfo">点我提示事件</button>
</div>
<script>
const vm= new Vue({
el: '#root',
data: {
name:'Amy',
},
methods:{//方法
showInfo(event){//可以接受参数吗
console.log(event);//发现可以接收一个参数，为时间对象，PointerEvent
//alert('欢迎来到故宫')
console.log(event.target);//获取元素
console.log(event.target.innerText);
console.log(this===vm)//此处的this是vm Vue实例对象
}
// showInfo:(event)=>{//可以接受参数吗
// console.log(event);//发现可以接收一个参数，为时间对象，PointerEvent
// //alert('欢迎来到故宫')
// console.log(event.target);//获取元素
// console.log(event.target.innerText);
// console.log(this)//此处的this是window
// }
},
});还想传入参数使用小括号()：但是没有event事件了
<button @click="showInfo2(66)">点我提示事件2</button>
showInfo2(number){//可以接受参数吗
console.log(number);//发现可以接收一个参数，为时间对象，PointerEvent
}解决办法:使用$event占位
<button @click="showInfo2(66,$event)">点我提示事件2</button>
showInfo2(number,event){//可以接受参数吗
console.log(number);//发现可以接收一个参数，为时间对象，PointerEvent
console.log(event)
}可以变换顺序
传参+不传参
<!-- 准备容器 -->
<div id='root'>
<h2>欢迎页面，你好 {{name}}</h2>
<!-- v-on:click 当元素被点击时候 展示回调函数去调用-->
<button v-on:click="showInfo1">点我提示事件1</button>
<button @click="showInfo2($event,66)">点我提示事件2</button>
</div>
<script>
const vm= new Vue({
el: '#root',
data: {
name:'Amy',
},
methods:{//方法
showInfo1(event){//可以接受参数吗
console.log(event);//发现可以接收一个参数，为时间对象，PointerEvent
//alert('欢迎来到故宫')
console.log(event.target);//获取元素
console.log(event.target.innerText);
console.log(this===vm)//此处的this是vm Vue实例对象
},
// showInfo:(event)=>{//可以接受参数吗
// console.log(event);//发现可以接收一个参数，为时间对象，PointerEvent
// //alert('欢迎来到故宫')
// console.log(event.target);//获取元素
// console.log(event.target.innerText);
// console.log(this)//此处的this是window
// }
showInfo2(event,number){//可以接受参数吗
console.log(number);//发现可以接收一个参数，为时间对象，PointerEvent
console.log(event)
}
},
});
</script>最终这 些函数的在Vue实例中
区别：name是数据代理，从根上来源于_date.
showInfo1和showInfo2不做数据代理，如果将函数写在data里面就会发生数据代理，会让Vue很累，vue去做数据代理调用函数，以后函数是不会变的，所以是setter getter没有意义
事件的基本使用：
1、使用v-on:xxx或@xxx绑定事件，其中xxx是时间名
2、事件的回调需要配置在methods对象中，最终会在vm上
3、methods中配置的函数，都是被Vue实例管理的函数，this指向vm 或组件实例对象
4、methods中配置的函数，不要用箭头函数，否则this指向的不是vm实例
5、@click="函数名" 和@click="函数名($event,参数)"，效果一致，可以传参
