页面操作基础
事件处理符号@
0 前言
前面我们学习了字符“:”,我们接下来学习一下事件处理符号。
js原生事件触发是由onclick=”事件名”触发,而我们的vue3则用@符号实现,当然也可以用v-on来实现,二者是同样效果,只是@符号更加简洁。
来来来,让我们看一下例子
<template>
<div id="app">
<div id="textContainer">
{{ message }}
</div>
<button @click="changeText">修改文本</button>
</div>
</template>
<script setup>
import { ref } from 'vue';
// 使用 ref 创建一个响应式数据
const message = ref('hello, world!');
// 定义方法
const changeText = () => {
message.value = '你好,中国!';
};
</script>
<style scoped>
#textContainer {
font-weight: bold;
}
</style>
效果如下,
关键语句如下,
<button @click="changeText">修改文本</button>
通过@click=”方法名”实现对方法的引用,当然也可以进行传参比如click=”方法名(变量)”。
1 结语
我们学习方法事件,知道了如何触发事件。
而接下来我们学习如何获取用户输入页面的数值。