vue的事件绑定

v-on事件绑定指令，用来辅助程序员为DOM元素绑定事件监听

 原生DOM对象有onclick、oninput、onkeyup等原生事件，替换为vue的事件绑定形式后为v-on:click、v-on:input、v-on:keyup

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <button v-on:click="greet">Greet</button>
    <p>{{ num }}</p>
    <button v-on:click="addCount">+1</button>


</div>
<script>
    var app = new Vue({
        el:"#app",
        data: {
            name: "vue.js",
            num: 0
        },
        methods:{  //v-on绑定的事件处理函数需要在methods中声明
            greet: function (event){
                alert('hello'+ this.name+'!')
                if(event){
                    alert(event.target.tagName)
                }
            },
            addCount: function (num){ //事件处理函数的名字
                // this表示当前new出来的vm实例对象
                // 通过this可以访问到data中的数据
                this.num +=1
            }
        }
    })
</script>
</body>
</html>
复制代码

 

posted @   fat_girl_spring  阅读(333)  评论(0)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！
点击右上角即可分享
微信分享提示