Vue-03.指令-v-on

天上掉下来个程小白

已于 2024-08-16 16:23:00 修改

阅读量273

点赞数 1

分类专栏： Javaweb 文章标签： vue.js javascript ecmascript

于 2024-08-11 19:27:02 首次发布

本文链接：https://blog.csdn.net/qq_45055856/article/details/141110114

版权

Javaweb 专栏收录该内容

78 篇文章 1 订阅

订阅专栏

v-on 为HTML标签绑定事件

代码演示：

在下面的代码中，在input标签中定义了一个按钮，并且使用v-on为input标签绑定了一个事件click，当鼠标点击该按钮时，会触发指定的方法handle，如果该方法有返回值，则在视图区域的方法handle后面加上()。如果没有返回值则可以不加，这里加上了。

在定义的vue对象中，在methods区域定义了一个method为handle()。当点击时会触发该方法弹出“被点了一下~~~”。

注意：v-on:可以被简写为@

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-on</title>
    <script src="js/vue.js"></script>
</head>
<!-- v-on                        为HTML标签绑定事件 -->
<body>
    <!-- 3.定义vue所要操作的视图 -->
    <div id="app">
        <input type="button" value="点我一下" v-on:click="handle()"> <!-- event指定要绑定的是什么事件 函数里不需要传递参数，()可以加可以不加 -->
        <input type="button" value="点我一下" @click="handle()">  <!--  -->
    </div>
</body>
<script>
    // 2.创建vue对象，指定vue的管辖区域，数据和方法
    new Vue({
        el:"#app",
        data:{
            
        },
        methods: {
            handle:function() {
                alert("被点了以下~~~");
            }
        },
    })
</script>
</html>