v-on 事件绑定_v-on绑定的事件-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_66827203/article/details/125536669

事件绑定

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 事件绑定</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- v-on 指令监听dom事件，并在触发时运行一些javascript代码 -->
        <button v-on:click="counter +=1">数值：{{counter}}</button>
        <button v-on:click="greens">greens</button>
        <button v-on:click="green('abc')">green</button>
        <!-- 在内联处理器中访问原始的Dom事件，可以用特殊变量$event -->
        <button v-on:click="green1('abc',$event)">green1</button>
        <button v-on:dblclick="green2('abc',$event)">双击事件</button>

    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                counter: 0,
                name: " hello",
            },
            methods: {
                greens: function () {
                    alert("hi");
                    alert(this.name)
                },
                green: function (str) {
                    alert(str);

                },
                green1: function (str, e) {
                    alert(str);
                    console.log(e);
                },
                green2: function (str, e) {
                    alert(str);
                    console.log(e);
                },
            }

        })

    </script>

</body>

</html>