P5 Vue 绑定事件 v-on

最新推荐文章于 2024-06-23 09:38:04 发布

原创最新推荐文章于 2024-06-23 09:38:04 发布 · 389 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

14 篇文章

订阅专栏

本文探讨了在Vue框架中使用v-on指令进行事件绑定的方法。通过一个简单的示例，展示了如何在HTML元素上使用v-on绑定点击事件，并调用Vue实例中的方法。文章深入解析了v-on的工作原理，及其在实际开发中的应用。

导入约束文件时v-on报错，但可以正常运行

<!DOCTYPE html>

<meta charset="UTF-8" xmlns:v-on="http://www.w3.org/1999/xhtml">
<title>Title</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
    <!--v-on后面跟事件的类型-->
    <button v-on:click="sayHi">Click Me</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            message:"hello 点击事件"
        },
        methods:{
            sayHi:function (event) {
                    alert(this.message);
            }
        }
    });
</script>

</body>
</html>