- 技术博客
- 电商系统前后端开发（Vue+SSM）(2)
1 事件
1.1 参数传递
<body>
<div id="app">
{{count}}
<button type="button" @click="addBtn(2)">增加
</button>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
count: 0
},
methods: {
addBtn(step) {
this.count += step
}
}
})
</script>
<body>
<div id="app">
<p v-on:mouseover="mymo">
落霞与孤鹜齐飞
{{x}}
<br>
{{y}}
</p>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
x:0,
y:0,
},
methods: {
mymo(event){
this.x = event.clientX;
this.y = event.clientY;
console.log(event)
}
}
})
</script>
1.2 通知鼠标事件
事件修饰符
<body>
<div id="app">
<p v-on:mouseover="mymo">
落霞与孤鹜齐飞
{{x}}
<br>
{{y}}
<span @mouseover="mystopmo">停止鼠标移动事件
</span>
</p>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
x:0,
y:0,
},
methods: {
mymo(event){
this.x = event.clientX;
this.y = event.clientY;
console.log(event)
},
mystopmo(event){
event.stopPropagation();
}
}
})
</script>
<body>
<div id="app">
<p v-on:mouseover="mymo">
落霞与孤鹜齐飞
{{x}}
<br>
{{y}}
<span @mouseover.stop>停止鼠标移动事件
</span>
</p>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
x:0,
y:0,
},
methods: {
mymo(event){
this.x = event.clientX;
this.y = event.clientY;
console.log(event)
},
}
})
</script>
1.3 事件修饰符
1.4 按键修饰符
