vue之v-on的用法(v-on修饰符)

1.stop修饰符当我们使用点击按钮的时候，会遇到个别问题，比如在一个div区域之内绑定了点击时间而在这个区域之内绑定了一个按钮的点击事件，例子如下<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" cont...

微微笑再加油

3364人浏览 · 2020-02-15 15:40:01

微微笑再加油 · 2020-02-15 15:40:01 发布

1.stop修饰符
当我们使用点击按钮的时候，会遇到个别问题，比如在一个div区域之内绑定了点击事件而在这个区域之内绑定了一个按钮的点击事件，例子如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="../vue.js/vue.js"></script>
<body>
    <div id="app">
    //div区域内绑定一个点击事件
    div区域点击事件
        <div @click="divClick">
        	//div中按钮的绑定事件
            <button @click="btnClick">点击</button>
        </div>

    </div>
    <script>
     const app= new Vue({
        el: '#app',
        data: {
          
        },
        methods:{
            divClick(){
                console.log("divClick");
            },
            btnClick(){
                console.log("btnClick");
            },
          
        }
    })

    </script>
</body>
</html>

会发现一个问题，点击按钮的时候，同时也会触发div的点击事件
在这里插入图片描述
怎么阻止呢？只需要一个stop的修饰

 <button @click.stop="btnClick">点击</button>

代码加上stop修饰符之后，再点击按钮的时候就不会触发div的点击事件
在这里插入图片描述
2.prevent修饰符(阻止默认事件)
例如form表单的提交，现在有个需求需要手动提交，不需要默认提交在监听点击事件后面加上prevent修饰符

<form action="baidu">
            <input type="submit" value="提交" @click.prevent="submitClick">
        </form>

 methods:{
            submitClick(){
                console.log("submitClick");
            },
        }

显示阻止了form表单自动提交，自己手动提交信息
在这里插入图片描述
3.监听某些按键的事件
keyup：当按键抬起之时触发事件
keydown:当按键按下之时触发事件

<input type="text" @keyup="keyup">

 methods:{
            keyup(){
                console.log("keyup");
            },
        }

输入框之中输入数据之后触发keyup事件
在这里插入图片描述
回车按键：enter修饰符
当输入一些信息之后，按下回车才能触发事件

<input type="text" @keyup.enter="keyup">

 methods:{
            keyup(){
                console.log("keyup");
            },
        }

输入之后，keyup监听事件没有反应，当按下回车之后则会触发监听事件
在这里插入图片描述

3.native(监听自定义组件)
当我们自定义组件时候需要监听自定义组件之时，@click则不会起到监听作用

//当监听不是原生的组件时候，而是自定义组件的时候则需要native修饰
<cpn @click.native="cpn">自定义组件</cpn>

4.once（只触发一次）

 <!-- once修饰符 -->
        <button @click.once="onceBtn">只能点击一次</button>

点击多次，只会触发一次
在这里插入图片描述

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}$/, //不连续的两位字母// /^