事件的基本使用:
1.使用v-on:xxx 或 @xxx 绑定事件,其中xxx是事件名
2.事件的回调需要配置在methods对象中,最终会在vm上
3.methods中配置的函数,不需要箭头函数!否则this就不是vm了
4.methods中配置的函数,都是被Vue所管理的函数,this的指向是vm 或 组件实例对象;
5.@click = “demo” 和@click = “demo($event)” 效果一致,但后者可以传递参数
<body>
<div id="root">
<h1>欢迎来到 {{name}}</h1>
<button @click="showInfo1">点击1(不传参数)</button>
<button @click="showInfo2($event,66)">点击2(传参数)</button>
</div>
<script>
Vue.config.productionTip = false
const vm = new Vue({
el: '#root',
data: {
name: '英雄联盟'
},
methods: {
showInfo1(event) {
alert('压缩->' + event)
},
showInfo2(event, number) {
alert('压缩->' + number + event)
}
}
})
</script>
</body>
效果图
按钮1
按钮2