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

news2024/9/20 2:42:32

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、运行结果：