监听事件
我们可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：v-on:click="handler" 或 @click="handler"。
事件处理器 (handler) 的值可以是：
内联事件处理器：事件被触发时执行的内联 JavaScript 语句 (与 onclick 类似)。
方法事件处理器：一个指向组件上定义的方法的属性名或是路径。
先简单演示一下v-on指令，代码如下：
<template>
<view>
<view class="box" v-on:click="onClick">
</view>
</view>
</template>
<script setup>
function onClick(){
console.log(12321)
}
</script>
<style>
.box{
width: 200px;
height:200px;
background: orange;
}
</style>
在script中写入函数onClick，函数作用为打印12321，然后用v-on:click指令关联onClick函数，效果如下：
打印成功，现在我们设定值num，设定每点击一次，它的值都会加1，代码如下：
<template>
<view>
<view class="box" v-on:click="onClick">
{{num}}
</view>
</view>
</template>
<script setup>
import {ref} from "vue" ;
const num = ref(1) ;
function onClick(){
num.value ++ ;
}
</script>
<style>
.box{
width: 200px;
height:200px;
background: orange;
}
</style>
效果如下：
接下来， 定义一个颜色变量，然后在template中调用，代码如下：
<template>
<view>
<view class="box" @click="onClick" :style="{background:color}">
{{num}}
</view>
</view>
</template>
<script setup>
import {ref} from "vue" ;
const num = ref(1) ;
const color = ref("#fc359a")
function onClick(){
num.value ++ ;
}
</script>
<style>
.box{
width: 200px;
height:200px;
background: orange;
}
</style>
效果如下：
颜色可以由# + 6个数字构成，那么，我们现在写个函数，让其随机生成6个数字作为#后面的六位数，然后将其赋值给变量color，这样就可以实现，点击跳转随机颜色了，代码如下：
<template>
<view>
<view class="box" @click="onClick" :style="{background:color}">
{{num}}
</view>
</view>
</template>
<script setup>
import {ref} from "vue" ;
const num = ref(1) ;
const color = ref("#fc359a")
function onClick(){
num.value ++ ;
color.value = "#" + String(Math.random()).substring(3,9) ;
}
</script>
<style>
.box{
width: 200px;
height:200px;
background: orange;
}
</style>
效果如下：
Switch组件的@change属性内置了返回值（true or false)，可以通过switch组件来控制button按钮的loading属性。创建函数，在函数中，将返回值赋值给loading的关联变量就可以了，代码如下：
<template>
<view>
<view class="box" @click="onClick" :style="{background:color}">
{{num}}
</view>
</view>
<switch @change="onchange"></switch>
<button type="primary" :loading="isloading">普通按钮</button>
</template>
<script setup>
import {ref} from "vue" ;
const num = ref(1) ;
const color = ref("#fc359a")
const isloading = ref(true)
function onClick(){
num.value ++ ;
color.value = "#" + String(Math.random()).substring(3,9) ;
}
function onchange(e){
isloading.value = e.detail.value
console.log(e.detail.value)
}
</script>
<style>
.box{
width: 200px;
height:200px;
background: orange;
}
</style>
效果如下：
