当前位置：首页 > news >正文

vue3 ref的用法及click事件的说明

news 2025/8/4 13:24:23

1、ref可以定义一个简单的属性，也可以是一个复杂的列表、数组等等。

2、为什么要使用 ref？简单的let个变量不行吗？const个变量不行吗？

其实这个跟vue的响应式的系统有关，官方的说明如下：

3、为 ref() 标注类型

一般我们直接赋string的时候，会自动推导出是string，但是我们在开发的过程中会经常遇到，可能要赋个日期型的，比如 dayjs，然后我们传到服务器的时候，是一个string类型，这样我们就要指导类型，让系统知道我们的编写是正确的。

4、深层响应性

5、@click

绑定到一个方法/函数。这个 @click 语法是 v-on:click 的简写。也就是可以直接@click="func名"，也可以v-on:click="func名"。

6、简单的官方事例：

https://cn.vuejs.org/examples/#handling-input

<!--
这个示例展示了如何通过 v-on 指令处理用户输入。
--><script setup>
import { ref } from 'vue'const message = ref('Hello World!')function reverseMessage() {// 通过其 .value 属性// 访问/修改一个 ref 的值。message.value = message.value.split('').reverse().join('')
}function notify() {alert('navigation was prevented.')
}
</script><template><!--注意我们不需要在模板中写 .value，因为在模板中 ref 会自动“解包”。--><h1>{{ message }}</h1><!--绑定到一个方法/函数。这个 @click 语法是 v-on:click 的简写。--><button @click="reverseMessage">Reverse Message</button><!-- 也可以写成一个内联表达式语句 --><button @click="message += '!'">Append "!"</button><!--Vue 也为一些像 e.preventDefault() 和 e.stopPropagation()这样的常见任务提供了修饰符。--><a href="https://vuejs.org" @click.prevent="notify">A link with e.preventDefault()</a>
</template><style>
button, a {display: block;margin-bottom: 1em;
}
</style>

7、运行结果：