Vue 3 基础

作者: luote (luote) · 个人主页 luote996.cn

Vue 是什么

Vue 是用于构建用户界面的渐进式框架。你只需关注 数据（state） 与 视图（template） 的绑定，数据变化时视图自动更新。create-luote 使用 Vue 3 与 组合式 API（Composition API）。

单文件组件 SFC

.vue 文件包含三块：

<template>
  <div>{{ message }}</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const message = ref('hello luote')
</script>

<style scoped>
div { color: #409eff; }
</style>

块	作用
template	HTML 模板，支持 Vue 指令
script setup	逻辑与状态，lang="ts" 使用 TypeScript
style scoped	仅作用于当前组件的样式

响应式 ref 与 reactive

import { ref, reactive } from 'vue'

const count = ref(0)
count.value++  // script 中访问 ref 需 .value

const form = reactive({
  username: '',
  password: ''
})
form.username = 'admin'  // reactive 对象直接改属性

模板里使用 ref 会自动解包，写 即可，不必写 .value。

常用模板语法

语法	作用
	文本插值
v-if / v-else	条件渲染
v-for="item in list"	列表渲染
v-model="form.name"	双向绑定，表单必备
@click="handleClick"	事件绑定
:src="url"	属性绑定，冒号是 v-bind 简写

登录页 login/index.vue 中表单、按钮、错误提示都是这些语法的组合。

组合式 API 生命周期

import { onMounted, onUnmounted } from 'vue'

onMounted(() => {
  // 组件挂载后，常用来请求首屏数据
})

onUnmounted(() => {
  // 清理定时器、取消订阅
})

组件通信

方式	场景
props	父 → 子，子组件只读
emit	子 → 父，触发事件
Pinia	跨页面共享状态（见后文）

CaptchaInput.vue 通过 props 接收验证码 key，通过 emit 把用户输入同步给父组件。

计算属性与侦听

import { computed, watch } from 'vue'

const fullName = computed(() => `${first.value} ${last.value}`)

watch(count, (newVal) => {
  console.log('count changed', newVal)
})

复杂衍生数据用 computed 缓存；需要在数据变化时执行副作用用 watch。

Element Plus 与 Vue

Element Plus 是 Vue 3 组件库，直接使用标签即可：

<el-button type="primary" @click="submit">登录</el-button>
<el-input v-model="form.username" placeholder="用户名" />

已在 main.ts 全局注册，无需每个页面单独 import 常用组件（图标等除外）。

与 luote 脚手架的关系

路径	说明
src/view/login/index.vue	表单、验证码、登录逻辑
src/component/CaptchaInput.vue	可复用子组件
src/layout/MainLayout.vue	布局与导航
src/App.vue	根组件，挂载 router-view

下一章：Vite Pinia Router