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>