生成一段vue 3的用户注册示例代码

以下是一个简单的Vue 3用户注册示例代码：

<template>
<div>
<h2>用户注册</h2>
<form @submit.prevent="registerUser">
<label for="username">用户名：</label>
<input type="text" id="username" v-model="username">
<br>
<label for="password">密码：</label>
<input type="password" id="password" v-model="password">
<br>
<button type="submit">注册</button>
</form>
</div>
</template>

<script>
import { ref } from 'vue';

export default {
setup() {
const username = ref('');
const password = ref('');

const registerUser = () => {
// 执行注册逻辑
console.log(`注册用户名：${username.value}，密码：${password.value}`);
}

return {
username,
password,
registerUser,
}
}
}
</script>

在这个示例代码中，我们使用了Vue 3的Composition API来定义组件。通过使用ref函数，我们创建了两个响应式变量username和password，用于存储用户输入的用户名和密码。同时，我们定义了一个registerUser函数，用于处理用户提交表单的逻辑。在registerUser函数中，我们可以执行实际的注册逻辑，例如向后端发送请求等。最后，我们通过return语句将这些变量和函数导出，以便在模板中使用。