示例一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 事件的基本使用</title>
<script type="text/javascript" src="../Js/vue.js"></script>
</head>
<body>
<!-- id 容器 root -->
<div id="root">
<h1>欢迎来到：{{name}}</h1>
<button v-on:click="showInfo">点我提示哦</button>
<hr />
<button @click="showInfo">点我也提示的哈</button>
<hr />
<button @click="showParamsInfo($event,'我是参数666')">可入参提示哦</button>
</div>
</body>
</html>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
// 对象信息
data: {
name: '开心Vue',
},
// 方法信息
methods: {
showInfo() {
alert('事件触发成功！')
},
showParamsInfo(event, str) {
alert('事件触发成功！' + str)
},
}
})
console.log(vm)
</script>
总结：事件的基本使用
- 使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名称；
- 事件的回调需要配置在methods对象中，最终会在vm上；
- methods中配置的函数，不要用箭头函数，否则this就不是vm了,会变为window
- methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象
- @click='demo'和@click='demo($event)'效果是一致的，但后者可传参(传参时，$event用于保证其不丢失--，如果不添加，同时传多个参数，会导致丢失）
标签：11,Vue,methods,--,xxx,vm,事件,event From： https://www.cnblogs.com/YYkun/p/18027936