事件处理符号@

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 结语

我们学习方法事件，知道了如何触发事件。

而接下来我们学习如何获取用户输入页面的数值。