当前位置：首页 > news >正文

Vue中的方法和事件绑定

news 来源：原创 2024/5/4 22:27:57

在Vue对象中方法写在methods属性中，供事件或者其它方法使用。

在methods中定义方法：

 new Vue({
            el:"#box",
            data:{},
            methods: {
                //定义式
                fn1:function(){},
                //箭头函数的写法
                fn2:()=>{},
                //es6写语法，在对象里写方法
                fn3(){}
            },
        })

定义的方法供事件使用，首先要给标签绑定事件。

事件绑定

事件绑定的方法有两种：

1、v-on:事件类型（前面学习过的鼠标事件、键盘事件等），如v-on:click=""

2、语法糖，v-on:简写为@，如@click=""

我们用两种方法分别来写一个点击事件

<div id="box">
        <button v-on:click="fn1">标准形式</button>
        <button @click="fn1">语法糖</button>
    </div>
    <script>
        new Vue({
            el:"#box",
            data:{},
            methods: {
                //定义式
                fn1:function(){
                    console.log(666);
                },
            }
        })
    </script>

点击两个按钮都会在控制台打印666

一个标签同时也可以绑定多个事件，如：

  <button @click="fn1" @mouseenter="fn11()">语法糖</button>

这里事件后跟方法名可以加()也可以不加，这也是与我们以前学习DOM操作阶段行内绑定的区别，在之前行内绑定函数名必须加()。

如果想要给一个标签加两个相同的事件类型，在以前我们是通过addEventListener监听器添加，如果用属性绑定会被覆盖。在Vue中，如果我们直接在行内写两个相同的事件类型也是会被覆盖，如：

<div id="box">
        <button @click="fn3" @click="fn4">绑定了两个点击事件</button>
    </div>
    <script>
        document.body.addEventListener
        new Vue({
            el:"#box",
            data:{},
            methods: {
                fn3(){
                    console.log(111);
                },
                fn4(){
                    console.log(222);
                }
            },
        })
    </script>

绑定了两个点击事件，但是控制台打印的时候只会打印111，如果我们想要实现通过打印222，那么我们只需要将fn3,fn4的调用同时装在一个方法fn5内,绑定事件=“fn5”

代码展示：

<div id="box">
         <button @click="fn5">改进绑定了两个点击事件</button>
    </div>
    <script>
        document.body.addEventListener
        new Vue({
            el:"#box",
            data:{},
            methods: {
                fn3(){
                    console.log(111);
                },
                fn4(){
                    console.log(222);
                },
                fn5(){
                    this.fn3()
                    this.fn4()
                }
            },
        })
    </script>

注意：fn5方法内要用this来调用fn3和fn4,因为fn3和fn4生效以后就是Vue对象的方法了，在Vue中this就代表Vue对象。

只要是事件就存在事件链，会涉及捕获和冒泡，目标元素被触发时，其事件链上绑定的事件也会被触发。

写一个例子感受一下：


    <style>
        .box11{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
        .box12{
            width: 150px;
            height: 150px;
            background-color: aqua;
        }
        .box13{
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
    <!-- 事件链 -->
    <div id="box1">
        <div class="box11" @click="fn1">1
            <div class="box12" v-on:click="fn2">2
                <div class="box13" @click="fn3">3</div>
            </div>
        </div>
    </div>
    <script>
     new Vue({
            el:"#box1",
            data:{

            },
            methods: {
                fn1(){
                    console.log("box11");
                },
                fn2(){
                    console.log("box12");
                },
                fn3(){
                    console.log("box13");
                }
            },
        })
   </script>

点击box13盒子，目标元素为box13,当事件触发后往上冒泡依次执行box12的事件，box11的事件，事件默认都是在冒泡阶段触发。效果：