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

vue中基本事件的处理 ？

vue中基本事件的处理？