vue 事件处理

最新推荐文章于 2023-06-12 11:39:31 发布

guokanglun

最新推荐文章于 2023-06-12 11:39:31 发布

阅读量127

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/gklcsdn/article/details/110179376

版权

Vue 专栏收录该内容

32 篇文章 1 订阅

订阅专栏

文章目录

1. 绑定监听

@click=“fun”

<button @click="test1"> test1 </button>

methods:{
    test1(){
        alert('test1')
    }
}

@xxx=“fun(参数)”

<button @click="test2('test2')"> test2 </button>

test2(params){
    alert(params)
}

默认事件形参: event

<button @click="test3"> test3 </button>

test3(event){
    alert(event.target.innerText)
}

隐含属性对象: $event

<button @click="test4('test', $event)"> test4 </button>

test4(params, event){
    alert(event.target.innerText)
}

测试代码:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

</head>
<body>
    <div id="app">
        <button @click="test1"> test1 </button>
        <button @click="test2('test2')"> test2 </button>
        <button @click="test3"> test3 </button>
        <button @click="test4('test', $event)"> test4 </button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{

            },
            methods:{
                test1(){
                    alert('test1')
                },
                test2(params){
                    alert(params)
                },
                test3(event){
                    alert(event.target.innerText)
                },
                test4(params, event){
                    alert(event.target.innerText)
                }
            },

        })
    </script>
</body>
</html>

2. 事件修饰符

.prevent : 阻止事件的默认行为 event.preventDefault()

<a href="https://www.baidu.com" @click.prevent> 百度 </a>

.stop : 停止事件冒泡 event.stopPropagation()

 <div class="outer" @click="outer">
     <div class="inner" @click.stop="inner">

     </div>
 </div>

测试代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .outer{
            width: 300px;
            height: 300px;
            background-color: red;
        }
        .inner{
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>

</head>
<body>
    <div id="app">
        <a href="https://www.baidu.com" @click.prevent> 百度 </a>
        <div class="outer" @click="outer">
            <div class="inner" @click.stop="inner">

            </div>
        </div>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{

            },
            methods:{
                outer(){
                    alert('outer')
                },
                inner(){
                    alert('inner')
                }
            },

        })
    </script>
</body>
</html>

3. 按键修饰符

常用回车键

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

测试代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .outer{
            width: 300px;
            height: 300px;
            background-color: red;
        }
        .inner{
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>

</head>
<body>
    <div id="app">
        <input type="text" @keyup.enter="test">
    </div>
    <script src="../js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{

            },
            methods:{
                test(event){
                    alert(event.target.value)
                }
            },
        })
    </script>
</body>
</html>