jquery给button加点击事件_复习之v-on指令 （监听事件指令）

引入vue.js

    <!-- 引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

作用：可以监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

v-on指令简写：@

    <div id="app">
        <!-- 这里表示被vue控制的区域 -->
        <button @click="handleClick(1)">点击加 1</button>
        <p>按钮被点击了 {{ counter }} 次</p>
    </div>
    <script>
        const vm = new Vue({
            el: '#app', // 控制id为app的元素
            data: {
                // 存放所需要的数据
                counter: 0
            },
            methods: {
                // 存放所需要调用的方法
                handleClick(num) {
                    this.counter += num;
                }
            }
        })
    </script>

如何使用v-on指令？

v-on指令后面“:”后的参数是要触发的事件类型。v-on的事件类型由参数指定。

1.直接把 JavaScript 代码写在 v-on 指令中，如：

    <div id="app">
        <!-- 这里表示被vue控制的区域 -->
        <button v-on:click="counter += 1">点击加 1</button>
        <p>按钮被点击了 {{ counter }} 次</p>
    </div>
    <script>
        const vm = new Vue({
            el: '#app', // 控制id为app的元素
            data: {
                // 存放所需要的数据
                counter: 0
            }
        })
    </script>

但是很多事件处理逻辑是非常复杂的，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。

2.v-on 指令可以接收一个需要调用的方法名称，如：

    <div id="app">
        <!-- 这里表示被vue控制的区域 -->
        <button v-on:click="handleClick">点击加 1</button>
        <p>按钮被点击了 {{ counter }} 次</p>
    </div>
    <script>
        const vm = new Vue({
            el: '#app', // 控制id为app的元素
            data: {
                // 存放所需要的数据
                counter: 0
            },
            methods: {
                // 存放所需要调用的方法
                handleClick() {
                    this.counter ++
                }
            }
        })
    </script>

methods中的函数，会直接代理给Vue实例对象，所以可以直接运行，如：

    <div id="app">
        <!-- 这里表示被vue控制的区域 -->
        <button v-on:click="handleClick">点击加 1</button>
        <p>按钮被点击了 {{ counter }} 次</p>
    </div>
    <script>
        const vm = new Vue({
            el: '#app', // 控制id为app的元素
            data: {
                // 存放所需要的数据
                counter: 0
            },
            methods: {
                // 存放所需要调用的方法
                handleClick() {
                    this.counter ++
                }
            }
        })
        vm.handleClick(); // 没有点击之前先执行一次函数
    </script>

3.v-on指令可以在内联JavaScript 语句中调用方法，如：

    <div id="app">
        <!-- 这里表示被vue控制的区域 -->
        <button v-on:click="handleClick(1)">点击加 1</button>
        <p>按钮被点击了 {{ counter }} 次</p>
    </div>
    <script>
        const vm = new Vue({
            el: '#app', // 控制id为app的元素
            data: {
                // 存放所需要的数据
                counter: 0
            },
            methods: {
                // 存放所需要调用的方法
                handleClick(num) {
                    this.counter += num
                }
            }
        })
    </script>

在内联语句中使用事件对象时，可以利用特殊变量 $event，如：

    <div id="app">
        <!-- 这里表示被vue控制的区域 -->
        <button v-on:click="handleClick(1, $event)">点击加 1</button>
        <p>按钮被点击了 {{ counter }} 次</p>
    </div>
    <script>
        const vm = new Vue({
            el: '#app', // 控制id为app的元素
            data: {
                // 存放所需要的数据
                counter: 0
            },
            methods: {
                // 存放所需要调用的方法
                handleClick(num, e) {
                    this.counter += num;
                    console.log(e);
                }
            }
        })
    </script>

4.v-on指令可以绑定动态事件参数，如：

    <div id="app">
        <!-- 这里表示被vue控制的区域 -->
        <button v-on:[event]="handleClick(1, $event)">点击加 1</button>
        <p>按钮被点击了 {{ counter }} 次</p>
    </div>
    <script>
        const vm = new Vue({
            el: '#app', // 控制id为app的元素
            data: {
                // 存放所需要的数据
                counter: 0,
                event: 'click'
            },
            methods: {
                // 存放所需要调用的方法
                handleClick(num, e) {
                    this.counter += num;
                    console.log(e);
                }
            }
        })
    </script>

5.v-on指令可以不带参数绑定一个对象，如：

v-on=“{ 事件名：事件执行函数 }”，使用此种方法不支持函数传参&修饰符。

    <div id="app">
        <!-- 这里表示被vue控制的区域 -->
        <button v-on="{click:handleClick}">点击加 1</button>
        <p>按钮被点击了 {{ counter }} 次</p>
    </div>
    <script>
        const vm = new Vue({
            el: '#app', // 控制id为app的元素
            data: {
                // 存放所需要的数据
                counter: 0,
            },
            methods: {
                // 存放所需要调用的方法
                handleClick(e) {
                    this.counter ++ ;
                    console.log(e);
                }
            }
        })
    </script>