Vue事件绑定

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>

     

posted @ 2020-02-20 10:20  xsan  阅读(1045)  评论(0)  编辑  收藏  举报