Vue学习08_事件监听及参数传递

事件监听

在vue中，我们有时候需要对浏览器事件进行事件监听，比如当鼠标点击某一个按钮时，触发某种事件，这时，Vue为我们提供了方便快捷的方式v-on：

• v-on的基本使用
  示例代码：定义两个按钮，点击对应的按钮，对数据进行相应的增加和减少：

    <div id="app">
        <h3>{{counter}}</h3>
        <button v-on:click="add">+</button>
        <button v-on:click="sub">-</button>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                counter: 0,
            },
            methods: {
                add() {
                    this.counter++;
                },
                sub() {
                    this.counter--;
                }
            }
        });
    </script>

运行结果：点击对应的按钮，对文本实现相对应的增减

2.v-on的参数问题：
在我们使用v-on进行事件监听时，有可能需要对监听的事件传入相对于的参数，这时候需要对事件监听后的函数传递参数，其情况可以大致分为以下几种：
示例代码：

    <div id="app">
        <h3>{{counter}}</h3>
        <button v-on:click="add">+</button>
        <button v-on:click="sub">-</button>

        <!-- 不需要传参数，加不加括号都可以 -->
        <button @click="btn1()">按钮1</button>
        <button @click="btn1">按钮1</button>
        <!-- 需要传一个参数,传入的参数需要加引号，不加引号将会去data里面寻找 -->
        <button @click="btn2('abc')">按钮2</button>
        <!-- 未加参数undefined -->
        <button @click="btn2()">按钮2</button>
        <!-- 没有括号获取浏览器的事件event -->
        <button @click="btn2">按钮2</button>

        <!-- 手动获取浏览器的event对象，$event -->
        <button @click="btn(123,$event)">按钮</button>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                counter: 0,
            },
            methods: {
                add() {
                    this.counter++;
                },
                sub() {
                    this.counter--;
                },
                btn1() {
                    console.log("123");
                },
                btn2(str){
                    console.log(str);
                },
                btn(str, event) {
                    console.log(str, event);
                }
            }
        });
    </script>

• 当不需要传递参数时，函数的括号加不加都可以，实现的效果是一样的：

        <!-- 不需要传参数，加不加括号都可以 -->
        <button @click="btn1()">按钮1</button>
        <button @click="btn1">按钮1</button>

运行结果：

点击按钮1，因为不需要传递参数，所以两者的实现效果一致，都打印出123；

• 当需要传递一个参数时：需要传一个参数,传入的参数需要加引号，不加引号将会去data里面寻找；

        <!-- 需要传一个参数,传入的参数需要加引号，不加引号将会去data里面寻找 -->
        <button @click="btn2('abc')">按钮2</button>
        <!-- 未加参数undefined -->
        <button @click="btn2()">按钮2</button>
        <!-- 没有括号获取浏览器的事件event -->
        <button @click="btn2">按钮2</button>

运行结果：

第一个按钮需要传递参数str，第一个按钮传递的时字符串abc因此在控制台打印出abc字符串，第二个按钮调用的时btn2方法，btn2需要传入一个参数，但是第二个按钮调用时并没有给该方法传入一个参数，因此打印出未定义；
在需要传入参数，没有给函数方法传入参数，并且也没有括号时：传入的是浏览器的event对象

• 当我们既需要传入参数，有需要获取浏览器的event对象时：可以通过$event获取：

<button @click="btn(123,$event)">按钮</button>

运行结果：