vue快速入门(四) 之 v-on:事件绑定以及 @keyup事件触发-阿里云开发者社区

vue快速入门(四) 之 v-on:事件绑定以及 @keyup事件触发

2023-08-12 226

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： vue快速入门(四) 之 v-on:事件绑定以及 @keyup事件触发

1.v-on方法

在JavaScript中有点击,鼠标移动等事件,vue中自然也有对应的方法,如下

这一次我们使用了method而不是data,在method里边定义各种方法,比如这个弹出警告的方法,在div里边呢,我们使用v-on 后边接动作类型,比如点击,鼠标移动等,后边就是触发的方法名

点击弹出警告就会弹出

代码如下

<body>
    <div id="app">
        <input type="button" value="弹出警告" @click="warn" />
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            methods: {
                warn: function() {
                    alert("警告,警告!!!")
                }
            }
        })
    </script>
</body>

有关v-on:可以缩写成一个@,如下

我们使用@click效果和v-on:click效果一样

下面我们再来定义一个双击事件

这样双击就可以弹出警告窗口,其他的鼠标操作事件都是可以的

当然我们在实际用的时候并不会这么简单的去做点击事件,也会有dom操作,不过vue省去了dom操作,示例如下

我们在div里边添加了一个欢迎,data里边也添加了一个欢迎,方法里边添加了一个欢迎方法,

这样我们点击欢迎的时候就会出现欢迎你,一直点一直出现如下

<body>
    <div id="app">
        <input type="button" value="弹出警告" @dblclick="warn" />
        <h2 @click="welcome">{{wel}}</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                wel: "欢迎"
            },
            methods: {
                warn: function() {
                    alert("警告,警告!!!")
                },
                welcome: function() {
                    this.wel += "你"
                }
            }
        })
    </script>
</body>