<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue自学：v-on的参数传递问题</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 事件调用的方法没有参数 -->
<button type="button" v-on:click="button_click1">按钮1</button>
<!-- 在事件定义时，写函数的时候省略了一个小括号，但是方法本身是需要一个参数的 -->
<button type="button" @click="button_click2">按钮2</button>
<button type="button" @click="button_click3('这就是一个参数')">按钮3</button>
<!-- 当我们想要传递的参数固定为浏览器对象的时候，需要传入参数 $event -->
<button type="button" v-on:click="button_click4(abc,$event)">按钮4</button>
<button type="button">按钮5</button>
<button type="button">按钮6</button>
</div>
</body>
<script type="text/javascript">
const vm = new Vue({
el:’#app’,
data:{
abc:’就是个变量’
},
methods:{
button_click1(){
console.log(1)
},
//传递了一个浏览器对象
button_click2(event){
console.log(event)
},
//传递了一个实际的参数
button_click3(data){
console.log(data)
},
//传递了一个abc，实际上abc应该是一个变量或者是一种方法
button_click4(abc,event){
console.log(abc,event)
}
}
})
</script>
</html>
