v-on：
v-on是给元素绑定事件，其简写是“@+事件名”
event事件：
将event元素传递给函数时，在传递时一定要写成“$event”，而函数中的形参是什么都无所谓了。
事件修饰符：
- .prevent：阻止默认时间的执行；
-
.stop：event.stopPropagation，阻止事件冒泡；
-
.capture：事件捕获；
-
.once：事件之执行一次；
-
.self：代表当前这个被点击的元素自身；
-
.passive：在页面滚动的时候，告诉浏览器不会阻止默认的行为，从而让滚动更加顺畅
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <title>vue事件绑定</title> </head> <body> <h4>v-on：</h4> <div id="v-on-app"> <ul> <li v-for="book in books" key={{book}}} v-on:click="SubPrice(book.price)">{{book.title}}： {{book.price}}</li> </ul> <h4>event事件</h4> <br><a href="https://www.baidu.com/" v-on:click=gotoWebsite($event)> 跳转链接</a> <h4>事件修饰符</h4> <a href="https://www.baidu.com/" @click.prevent=gotoWebsite2> 修饰符跳转链接</a> </div> <script> new Vue({ el: "#v-on-app", data: { books: [{ title: '计算机原理', price: 65, }, { title: "数据结构", price: 70 }] }, methods: { SubPrice(price) { console.log(price) // Vue.set(this.books.price = this.books.price + 1) }, gotoWebsite(event) { event.preventDefault() window.location = "https://www.360.cn" }, gotoWebsite2(){ window.location = "https://www.360.cn" } } }) </script> </body> </html>