Vue指令-v-on

最新推荐文章于 2024-11-06 11:13:52 发布

今天的接口写完了吗？

最新推荐文章于 2024-11-06 11:13:52 发布

阅读量388

点赞数 6

分类专栏： vue2 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_65142821/article/details/135587629

版权

vue2 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、v-on简介

二、完整代码如下

三、运行结果

一、v-on简介

v-on: 用来给html标签绑定事件的。需要注意的是如下2点：

v-on语法给标签的事件绑定的函数，必须是vue对象种声明的函数

v-on语法绑定事件时，事件名相比较js中的事件名，没有on

例如：在js中，事件绑定demo函数.

<input onclick="demo()">

vue中，事件绑定demo函数

<input v-on:click="demo()">

二、完整代码如下

<!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>Vue-指令-v-on</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">

        <input type="button" value="点我一下" v-on:click="handle()">

        <input type="button" value="点我一下" @click="handle()">

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           
        },
        methods: {
            handle: function(){
                alert("你点我了一下...");
            }
        }
    })
</script>
</html>