七、Vue指令v-on与方法的配合使用

作者: 温新

阅读: 2242

时间: 2020-12-01 15:23:58

上一篇中写最基本的一个事件，但是在实际开发中，很少那样用。下面将记录配合方法的使用，也是开发中最常用的方式。

<!DOCTYPE html>
<html>
<head>
    <title>v-on</title>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <button v-on:click="incr()">增加1</button>
    <button v-on:click="decr">减少1</button>
    <button v-on:click="attr($event)">event参数</button>
    <button v-on:click="attr1">event参数</button>
    <!--attr1方法一定不能使用括号，因为Vue中的attr1方法体中需要使用参数-->
    <p>你点击了 {{ count }} 次</p>
</div>

<script>
    var app = new Vue({
        el: "#app",
        data: {
            count:0
        },
        methods:{
            incr() {
                this.count++;
            },
            decr() {
                this.count--;
            },
            attr(e) {
                console.log(e)
            },
            attr1(e) {
                // 4、接收event参数，
                console.log(e)
            }
        }
    });
</script>
</body>
</html>

上面的案例中为button绑定了三个点击监听事件，点击button按钮时触发所绑定的事件方法。可以看到这个三个方法有所不同，一个有括号，一个没有括号，一个有参数，一个没有括号但有参数。

1）当没有参数时，可以不使用括号；

2）当有参数时，括号一定不能省略；

3）当点击按钮时，所绑定的方法立马就会被触发，那么所触发的方法就会到Vue实例中的methods中去寻找该方法。Vue中，所有的方法都定义在methtos属性中；

4）元素中所绑定的方法没有括号，但在Vue实例中可以有event参数，但是一定要注意，当Vue中所对应方法需要使用event参数时，所绑定元素的方法名一定要加括号。

5）event是一个被定义好的参数，当vue中需要使用该参数时，attr($event)中一定要使用$event进行传递。

请登录后再评论