绑定事件(v-on)

最新推荐文章于 2025-12-04 17:39:28 发布

原创最新推荐文章于 2025-12-04 17:39:28 发布 · 514 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

Vue学习专栏收录该内容

12 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>绑定事件学习 v-on</title>
</head>
<body>

    <div id="app">
            <button v-on:click="sayHi">点击一下</button>
    </div>

    <!--引入vue的cdn-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                message: "hello，springVue！！！"
            },
            methods : {
                sayHi : function (event) {
                    // this 指代的是new Vue这个对象
                    alert(this.message)
                }
            }
        });
    </script>

</body>
</html>

结果如下

在这里插入图片描述