Vue3原生事件监听及组件内置事件处理

目录

原生事件

组件内置事件

slider滑块

switch组件内置事件


监听说明:可以是用v-on来监听DOM事件,简写@,在事件触发的时候会执行对应的JavaScript语句,使用的方式:v-on:click="(事件处理者)"或@click="(事件处理者)"

原生事件

原生事件是vue提供的一些原生支持的DOM事件如:

  1. 点击事件click
  2. 鼠标右键点击事件contextmenu
  3. 鼠标按下和释放事件mousedown 和 mouseup
  4. 鼠标移入和移出事件mouseover 和 mouseout
  5. 滚动事件scroll
  6. 输入事件input
  7. 表单提交事件submit
  8. 表单重置事件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的样式改变

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值