vue中基本事件的处理？-青梅博客

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 共享博客");
            }
        }

    })