先看代码：
<body>
<div id="box">
{{count}}
<button @click="handleAdd1()">add1</button>
<button @click="handleAdd2">add2</button>
</div>
<script>
new Vue({
el: "#box",
data: {
count: 0,
},
methods: {
handleAdd1(){
this.count++
},
handleAdd2(evt) {
this.count++
console.log(evt)
},
}
})
</script>
</body>结果：点击add1，count数量会增加；点击add2，count数量会增加，然后打印出evt的值见下图：
打印evt.target结果是这个button事件对象：
console.log(evt.target)结果：
事件绑定用法：
- 事件绑定函数，可以加括号，也可以不加括号；
- 加括号，是为了传参，不传参也没事，例如代码中的handleAdd1（）；
- 不加括号的时候，就不能自己传实参了，但是这时候会得到一个形参，这个形参就是“事件对象evt” ，打印evt.target得到的就是节点对象，例如代码中的handleAdd2；
- 也可以既得到evt事件对象，又能传参，这时候我们需要传实参是见下面代码：
<button @click="handleAdd1($event,1,2,3)">add1</button>handleAdd1(evt,a,b,c){
console.log(evt,a,b,c)
},结果：
- 这种形式就是既可以传自己的实参，又能够得到事件对象。
获取input输入框的值：
- 利用上面那个思路，我们可以在不使用v-model的方法情况下，获取输入框的值：
- 先拿到这个input节点对象；
- 然后再通过value获取输入框的内容；
代码：
<body>
<div id="box">
<input type="text" @input="handleInput">
</div>
<script>
new Vue({
el: "#box",
data: {
count: 0,
},
methods: {
handleInput(evt){
console.log(evt.target.value)
}
}
})
</script>
</body>结果：
事件修饰符：
- stop、prevent、capture、self、once；
stop的用法：加在子标签身上，可以阻止事件冒泡
<ul @click="handleUIClick">
<li @click.shop="handleLiClick">111</li>
<li @click="handleLiClick">111</li>
<li>333</li>
</ul>- shop加在了第一个li标签身上，当点击第一个li标签只能触发它自己的事件，不会产生冒泡触发ul的事件；
- 但是你点第二个li标签，还是会触发ul事件；
self的用法：加在自己身上，可以阻止子标签事件冒泡，就是只有当点击自己的时候才会触发事件
<ul @click.self="handleUIClick">
<li @click.shop="handleLiClick">111</li>
<li @click="handleLiClick">111</li>
<li>333</li>
</ul>once的用法：触发一次事件，下次就不会再触发了，禁用了
<li @click.once="handleLiClick">111</li>prevent的用法：阻止默认行为
<a href="http://www.baidu.com" @click.prevent>跳转</a>- 本来点击这个链接就会跳转到相应的页面，当加了prevent以后，就不会跳转了，被阻止了
![[附源码]SSM计算机毕业设计个性化新闻推荐系统JAVA](https://img-blog.csdnimg.cn/b5019c3e63724ff39fc1b339e439d73a.png)
