vue中基本事件的处理？

青梅SEO

已于 2024-04-07 00:15:02 修改

阅读量89

点赞数

分类专栏：前端开发文章标签： vue 前端开发

于 2021-06-11 09:26:44 首次发布

本文链接：https://blog.csdn.net/qmzma/article/details/119327256

版权

前端开发专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1. vue中如何使用事件
使用 v-on 绑定对应事件，并且调用对应 methods 的方法。

例如：

<div id="app">
    {{count}}
    {{count>10?"大于10":"不大于10"}}
    <button type="button" @click="addbtnfn()">添加</button>
    <button type="button" @click="delbtnfn()">减少</button>
    <input type="text" v-model="mystep" />
    <br />
    <p @mousemove="myposition">
        {{x}}<br />
        {{y}}
        <span @mousemove="stophere">停止鼠标移动事件</span>
        <span v-on:mousemove.stop>停止鼠标移动事件</span>

    </p>
</div>
</body>

<script>
    new Vue({
        el: "#app",
        data: {
            count: 0,
            mystep: 1,
            x: 0,
            y: 0
        },
        methods: {
            addbtnfn: function () {
                this.count += parseInt(this.mystep);//此处做类型转换，避免字符串拼接
            },
            delbtnfn() {
                this.count--;
            },
            myposition(event) {
                this.x = event.clientX;
                this.y = event.clientY;

            },
            stophere(event) {
                event.stopPropagation();
            }

        }
    })
</script>

2. vue中的事件参数传递

参数传递分为以下几点：

(1)设参：

<button type="button" @click="addbtnfn(2)">添加</button>

(2)传参：

addbtnfn:function(step){}

(3)接参：

this.count+=step;

3.vue中的事件修饰符:
对事件可以起到限制作用，给出对应限定条件，就可以按照限定的规则执行事件。

例如：
@keyup.enter ——————–> 限制只有回车键才会执行对应方法
@click.stop ————————>阻止事件的传播
@mousemove.stop ———–> 阻止鼠标移动事件

<body>
    <div id="app">

        <input type="text" @keyup="mykeyupinfo">
        <!--事件无修饰符-->
        <input type="text" @keyup.enter="mykeyupinfo">
        <!--有事件修饰符-->

    </div>
</body>

<script>
    new Vue({
        el: "#app",
        data: {

        },
        methods: {
            mykeyupinfo() {
                console.log("hello 青梅SEO");
            }
        }

    })