以往添加点击事件,相对于vue也有对应的监听事件。
<div id="box">
<!--书写 vuejs 代码-->
<hr>
<!--v-on: 事件绑定,v-on: 事件的类型,不要前缀 onclick onchange onkeyup-->
<!--1. vuejs 里面的事件的回调函数可以增加括号,也可以不增加,增加和不增加有什么区别?-->
<!--如果不增加 括号的时候, vuejs 会自动给回调函数传递 event 事件源;如果加上括号,需要传递 $event,是vuejs帮我们封装的事件源-->
<!--加上括号,除了可以传递 $event 还可以传递用户自定义的参数,但一定要传$event-->
<button v-on:click="clickHandler($event, 1, 'abc', 'def')">vuejs事件绑定</button>
<button @click="clickHandler">vuejs简化事件绑定</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#box',
data: {
title: 'hi vuejs!',
},
methods: {
// 回调函数,1. 不能使用箭头函数,如果使用 this 代表Window全局
// 2. 建议使用 es6 的简化写法
//...rest 如果是函数的参数列表,则被称为 剩余运算符,只能放置在最后的一个参数
// es6 尽可能写代码的速度,方便程序员
clickHandler (event, ...rest) {
console.log(rest);
console.log(event); // 事件源,鼠标事件
console.log(event.target); // 事件主体 DOM元素,button标签
console.log(event.target.innerHTML); // 事件主体 DOM元素
console.log(event.target.innerText); // 事件主体 DOM元素
}
}
});
</script>
...rest可以无限接收大量的参数