1. vue中如何使用事件 使用v-on绑定对应事件，并且调用对应methods的方法。例如：
代码语言：javascript复制<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）设参：
代码语言：javascript复制<button type="button" @click="addbtnfn(2)">添加</button>（2）传参：
代码语言：javascript复制addbtnfn:function(step){}（3）接参：
代码语言：javascript复制this.count =step;3.vue中的事件修饰符: 对事件可以起到限制作用，给出对应限定条件，就可以按照限定的规则执行事件。例如： @keyup.enter——————–>限制只有回车键才会执行对应方法 @click.stop———————–>阻止事件的传播 @mousemove.stop————–>阻止鼠标移动事件
代码语言：javascript复制<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 共享博客");
}
}
})
