vue的事件处理，$set的用法和表单元素处理修饰符

最新推荐文章于 2024-04-30 18:15:11 发布

玖商

最新推荐文章于 2024-04-30 18:15:11 发布

阅读量1.3k

点赞数 2

分类专栏： HTML # vue.js 文章标签：前端 vue.js html

本文链接：https://blog.csdn.net/weixin_58139900/article/details/122096388

版权

本文详细介绍了Vue中的事件处理，包括事件注册、传参、阻止冒泡、阻止默认事件和捕获事件。同时，讨论了$set在操作数组和对象时的用法，以及在处理表单元素时的各种修饰符的应用。

摘要由CSDN通过智能技术生成

事件处理

事件注册

事件注册:
语法:
v-on:事件名称 = "事件函数/表达式"
简写
@事件名称 = "事件函数/表达式"

 <!-- 1.引入vue -->
    <script src="./vue.js"></script>
</head>
<body>
    <!-- 2.创建dom元素 -->
    <div id="app">
        <!-- 
            事件注册:
                语法:
                    v-on:事件名称 = "事件函数/表达式"
                简写
                    @事件名称 = "事件函数/表达式"
         -->
         <button v-on:click="hander">点击</button>
         <hr>
         <button @click="hander">点击</button>


    </div>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{//属性

            },
            methods:{//方法
                hander(){
                    console.log('被触发了');
                }
            }
        })
    </script>

事件传参

语法:
@事件名称="事件函数(参数一,参数二,参数N)"

 <!-- 1.引入vue -->
    <script src="./vue.js"></script>
</head>
<body>
    <!-- 2.创建dom元素 -->
    <div id="app">
        <!-- 
            事件注册:
                语法:
                    v-on:事件名称 = "事件函数/表达式"
                简写
                    @事件名称 = "事件函数/表达式"
         -->
         <button v-on:click="hander">点击</button>
         <hr>
         <button @click="hander(666)">666</button>
         <button @click="hander(10*20)">乘法</button>
         <button @click="hander(10+20)">加法</button>


    </div>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{//属性

            },
            methods:{//方法
                hander(num){
                    console.log(num);
                }
            }
        })
    </script>

event

两种方法:
隐士获取:
显示获取:

 <!-- 1.引入vue -->
    <script src="./vue.js"></script>
</head>
<body>
    <!-- 2.创建dom元素 -->
    <div id="app">
        <!-- 显示获取event对象:传递固定参数$event -->
        <button @click="getEvent(10,$event,20)">获取event事件对象</button>
        <hr>
        <!-- 隐士获取event对象:传递参数$event可以省略 -->
        <button @click="getEvent1(666,777)">获取event事件对象</button>

    </div>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{//属性

            },
            methods:{//方法
                getEvent(e,num1,num2){
                    console.log(e);
                    console.log(num1,num2);
                },
                getEvent1(e,num1,num2){
                    console.log(e);
                    console.log(num1,num2);
                }
            }
        })
    </script>

阻止事件冒泡

方式一:
e.stopPropagation()
方式二:
.stop:事件修饰符
@事件名称.stop="事件函数";

 <!-- 1.引入vue -->
    <script src="./vue.js"></script>
    <style>
        .outer{
            width:200px;
            height: 200px;
            background-color: pink;
        }
        .inner{
            width:100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <!-- 2.创建dom元素 -->
    <div id="app">
        <div class="outer" @click="outer">
            <!-- .stop  事件修饰符 -->
            <div class="inner" @click.stop="inner"></div>
        </div>
    </div>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{//属性

            },
            methods:{//方法
                outer(){
                    console.log('outer');
                },
                inner(e){
                    // 阻止事件冒泡
                    // e.stopPropagation()
                    console.log('inner');
                }
            }
        })
    </script>

阻止默认事件

最低0.47元/天解锁文章

玖商

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue的事件处理，$set的用法和表单元素处理修饰符

目录事件处理事件注册事件传参event阻止事件冒泡阻止默认事件捕获事件.capture事件修饰符按键修饰符$set用法set操作数组$set操作对象$set操作数组对象表单元素处理表单修饰符事件处理事件注册事件注册: 语法: v-on:事件名称 = "事件函数/表达式" 简写 @事件名称 = ...
复制链接

扫一扫