目录
监听说明:可以是用v-on来监听DOM事件,简写@,在事件触发的时候会执行对应的JavaScript语句,使用的方式:v-on:click="(事件处理者)"或@click="(事件处理者)"
原生事件
原生事件是vue提供的一些原生支持的DOM事件如:
- 点击事件:
click
- 鼠标右键点击事件:
contextmenu
- 鼠标按下和释放事件:
mousedown
和mouseup
- 鼠标移入和移出事件:
mouseover
和mouseout
- 滚动事件:
scroll
- 输入事件:
input
- 表单提交事件:
submit
- 表单重置事件:
reset
这里举一个点击事件的例子:
<template>
<view :class="'box'">点击次数:{{num}}次</view>
<button @click="clickTimes" size="mini">点击次数</button>
</template>
<script setup>
import {ref} from "vue"; <!--引入ref到vue里来-->
const num=ref(0) <!--定义一个num常量-->
function clickTimes(){
//点击事件触发时的处理方法
num.value++;
}
</script>
<style lang="scss">
.box{
width: 200px;
height: 200px;
background: pink;
font-weight: bold;
line-height: 200px;
text-align: center;
}
</style>
点击事件实例
在我们点击button按钮是会响应式的改变view中的num值
组件内置事件
vue组件自带的特有事件支持,用于做一些特殊事件的处理
slider滑块
@change事件
<template>
<view class="box">
<!--绑定size常量来当作text的大小值-->
<text :style="{fontSize:size+'px'}">字体大小:{{size}}</text>
</view>
<view style="width: 300px;">
<!--
show-value 显示滑块值
@change="changeSize" 拖动滑块改变后触发的事件
-->
<slider min="10" max="50" value="10" @change="changeSize" show-value=""></slider>
</view>
</template>
<script setup>
import {ref} from "vue" //引入ref到vue
const size=ref(10) //定义默认大小为10
function changeSize(e){
size.value=e.detail.value; //为size重新赋值以改变页面的字体大小
}
</script>
<style lang="scss">
.box{
width: 200px;
height: 200px;
}
</style>
通过@change事件在拖动一次滑块之后,改变字体大小
switch组件内置事件
@change事件
<template>
<view :class="flag ? 'box':'boxTwo'"></view>
<switch @change="isChange">11</switch>
</template>
<script setup>
import {ref} from "vue";
const flag=ref(true);
function isChange(e){
flag.value=!e.detail.value;
}
</script>
<style lang="scss">
.box{
width: 200px;
height: 200px;
background: pink;
}
.boxTwo{
width: 200px;
height: 200px;
background: green;
}
</style>
通过switch开关控制view的样式改变