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

在JavaScript中有点击,鼠标移动等事件,vue中自然也有对应的方法,如下这一次我们使用了method而不是data,在method里边定义各种方法,比如这个弹出警告的方法,在div里边呢,我们使用v-on后边接动作类型,比如点击,鼠标移动等,后边就是触发的方法名点击弹出警告就会弹出代码如下<body><div id="app">...

年少轻与狂

6645人浏览 · 2020-03-16 12:27:22

年少轻与狂 · 2020-03-16 12:27:22 发布

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>

当然我们的v-on方法也可以让函数添加参数,如下
在这里插入图片描述

2.`@keyup`事件触发

另外我们也可以使用@keyup来触发一些事件
@keyup是一些按键松开的操作,比如
@keyup.enter表示按下回车键松开后触发
@keyup.left表示鼠标左键按下松开后触发
@keyup.right表示鼠标按下右键松开后触发
@keyup.delete表示按下删除键松开后触发
在这里插入图片描述

当我们在框框里按下回车的时候,就会触发sayHi

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^