Vue 3 入门教程

目录1. Vue 是什么2. 第一个 Vue 项目2.1 创建项目2.2 启动项目2.3 认识项目结构3. 从官方创建一个应用理解 Vue 启动流程4. 单文件组件.vue5. 模板语法5.1 文本插值5.2 属性绑定v-bind/:5.3 事件绑定v-on/6. 响应式基础ref和reactive6.1ref示例6.2reactive示例7. 常用功能一条件渲染7.1v-if/v-else-if/v-else7.2v-show8. 常用功能二列表渲染8.1 遍历数组8.2 获取索引9. 常用功能三事件处理9.1 基本事件9.2 传参数9.3 事件修饰符10. 常用功能四表单绑定v-model11. 常用功能五计算属性computed12. 常用功能六侦听器watch13. 常用功能七生命周期14. 常用功能八组件14.1 创建组件14.2 Props父传子14.3 Emits子传父14.4 插槽 slot15. 常用功能九模板引用ref16. 常用功能十样式绑定16.1 class 绑定16.2 style 绑定17. 路由 Vue Router17.1 基本概念17.2 路由配置示例17.3 动态路由17.4 编程式导航18. 状态管理 Pinia18.1 注册 Pinia18.2 创建 Store19. 请求接口19.1 fetch 示例19.2 axios 示例20. 常用项目功能怎么组合20.1 登录功能20.2 列表页20.3 表单页20.4 详情页21. 新手常见问题21.1 为什么 JS 里要写.value21.2ref和reactive怎么选21.3 computed 和 watch 区别22. 最小记忆清单1. Vue 是什么Vue 是一个用于构建用户界面的 JavaScript 框架。它最常见的用途是开发前端页面、后台管理系统、单页应用、组件化页面和交互式业务系统。Vue 的核心特点数据驱动界面数据变了页面自动更新。组件化开发把页面拆成一个个可复用组件。模板语法简单接近 HTML容易上手。官方生态完整Vue Router 做路由Pinia 做状态管理Vite 做开发构建。渐进式可以从一个小页面开始也可以做完整大型应用。2. 第一个 Vue 项目2.1 创建项目在你想放项目的目录执行npmcreate vuelatest创建时会问你一些选项。新手建议Add TypeScript? No Add JSX Support? No Add Vue Router? Yes Add Pinia? Yes Add Vitest? No Add End-to-End Testing? No Add ESLint? Yes Add Prettier? Yes Add Vue DevTools? Yes如果你只是想先学 Vue 基础也可以 Router 和 Pinia 都选 No后面再加。2.2 启动项目cdyour-project-namenpminstallnpmrun dev浏览器打开终端提示的地址通常是http://localhost:51732.3 认识项目结构常见结构src/ main.js App.vue components/ views/ router/ stores/重点理解main.js应用入口创建 Vue 应用并挂载到页面。App.vue根组件整个应用的最外层组件。components/通用组件。views/页面级组件通常配合路由使用。router/路由配置。stores/Pinia 状态管理。3. 从官方“创建一个应用”理解 Vue 启动流程Vue 应用通过createApp()创建应用实例然后通过.mount()挂载到 HTML 容器。典型入口import{createApp}fromvueimportAppfrom./App.vueconstappcreateApp(App)app.mount(#app)对应index.html里通常有dividapp/div理解这三个点createApp(App)用根组件创建 Vue 应用。App.vue根组件其他组件都挂在它下面。mount(#app)把 Vue 应用渲染到页面里的#app容器。注意全局配置、插件注册、全局组件注册一般要在mount()之前完成。4. 单文件组件.vue.vue文件是 Vue 的单文件组件把模板、脚本、样式写在一个文件里用template、script、style三个标签组织。script setup import { ref } from vue const message ref(Hello Vue) /script template h1{{ message }}/h1 /template style scoped h1 { color: #42b883; } /style含义script setup写组件逻辑变量和方法可直接在模板中使用。template写页面结构支持 Vue 模板语法。style scoped写当前组件样式scoped表示样式只影响当前组件不影响其他组件。新手重点一个.vue文件就是一个组件。组件名建议用大驼峰比如TodoList.vue。页面复杂后要主动拆组件每个组件只负责一个功能。5. 模板语法Vue 模板基于 HTML支持插值表达式{{ }}和指令如v-bind、v-if来绑定数据和逻辑。5.1 文本插值script setup const name 小明 const count 10 const isLogin true /script template p你好{{ name }}/p p{{ count 1 }}/p p{{ isLogin ? 已登录 : 未登录 }}/p /template{{ }}里可以写简单表达式但不要在模板里写太复杂的逻辑复杂逻辑放到计算属性或函数里。5.2 属性绑定v-bind/:script setup const imageUrl /logo.png const title Vue Logo const disabled true /script template img :srcimageUrl :alttitle / button :disableddisabled提交/button /template:是v-bind:的简写用于动态绑定 HTML 属性。5.3 事件绑定v-on/script setup function handleClick() { alert(点击了按钮) } /script template button clickhandleClick点击我/button /templateclick是v-on:click的简写用于绑定事件监听。6. 响应式基础ref和reactiveref用于基本类型和对象取值需.valuereactive只用于对象直接访问属性。两者都是响应式的数据变化时视图自动更新。6.1ref示例script setup import { ref } from vue const count ref(0) const name ref(小明) function add() { count.value } /script template p{{ name }} 点击了 {{ count }} 次/p button clickadd1/button /template注意在 JS 里访问和修改 ref要用.value。在模板里使用 ref不需要写.valueVue 会自动解包。6.2reactive示例script setup import { reactive } from vue const user reactive({ name: 小明, age: 18 }) function birthday() { user.age } /script template p{{ user.name }}{{ user.age }} 岁/p button clickbirthday过生日/button /template新手建议简单值用ref。表单对象、复杂对象用reactive。如果纠结就优先用ref因为它更统一且ref也可以放对象。7. 常用功能一条件渲染v-if按条件渲染/销毁元素v-show仅切换display属性。频繁切换用v-show运行时条件少变用v-if。7.1v-if/v-else-if/v-elsescript setup import { ref } from vue const score ref(85) /script template p v-ifscore 90优秀/p p v-else-ifscore 60及格/p p v-else不及格/p /templatev-if是真正的条件渲染条件为假时元素不会出现在 DOM 中。7.2v-showscript setup import { ref } from vue const visible ref(true) /script template button clickvisible !visible切换显示/button p v-showvisible这段内容可以显示或隐藏/p /templatev-show只是切换 CSS 的display属性元素始终在 DOM 中。选择建议切换不频繁如登录状态判断用v-if切换很频繁如选项卡切换用v-show8. 常用功能二列表渲染v-for遍历数组或对象需绑定:key提升性能。格式v-foritem in items :keyitem.id。8.1 遍历数组script setup import { ref } from vue const todos ref([ { id: 1, text: 学习模板语法, done: true }, { id: 2, text: 学习列表渲染, done: false }, { id: 3, text: 写一个 Todo 项目, done: false } ]) /script template ul li v-fortodo in todos :keytodo.id span :style{ textDecoration: todo.done ? line-through : none } {{ todo.text }} /span /li /ul /template8.2 获取索引template ul li v-for(item, index) in items :keyindex {{ index 1 }}. {{ item }} /li /ul /template重点v-for用来循环数组或对象。必须写:key通常用后端 ID。不建议用数组下标当 key除非列表永远不排序、不删除、不插入。9. 常用功能三事件处理9.1 基本事件button clicksubmit提交/buttonfunctionsubmit(){console.log(提交)}9.2 传参数button clickremoveTodo(todo.id)删除/buttonfunctionremoveTodo(id){console.log(id)}9.3 事件修饰符form submit.preventsubmitForm button typesubmit提交/button /form常见修饰符.prevent阻止默认行为。.stop阻止冒泡。.once只触发一次。.enter监听回车键。示例input keyup.entersearch /11. 常用功能四表单绑定v-modelv-model用来做双向绑定输入框变数据变数据变输入框也变。script setup import { ref } from vue const username ref() /script template input v-modelusername placeholder请输入用户名 / p你输入的是{{ username }}/p /template常见表单input v-modeltext / textarea v-modelcontent/textarea input typecheckbox v-modelchecked / select v-modelselected option valuefrontend前端/option option valuebackend后端/option /select常用修饰符input v-model.trimname / input v-model.numberage / input v-model.lazymessage /含义.trim去掉首尾空格。.number转成数字。.lazy失焦或 change 时再更新。12. 常用功能五计算属性computed计算属性用于根据已有数据派生新数据。script setup import { ref, computed } from vue const price ref(100) const count ref(2) const total computed(() price.value * count.value) /script template p总价{{ total }}/p /template什么时候用 computed根据一个或多个响应式数据计算出一个结果。希望结果有缓存。模板里的表达式变复杂了。不要在 computed 里做发请求。修改其他状态。操作 DOM。这些副作用应该放到watch、事件函数或生命周期里。13. 常用功能六侦听器watchwatch用于监听数据变化然后执行副作用。script setup import { ref, watch } from vue const keyword ref() watch(keyword, (newValue, oldValue) { console.log(搜索词变化了, oldValue, -, newValue) }) /script template input v-modelkeyword placeholder搜索 / /template常见用途搜索框输入变化后请求接口。监听路由参数变化。数据变化后写入 localStorage。根据某个开关加载额外数据。立即执行watch(keyword,(){// 初始化时执行一次之后 keyword 变化也执行},{immediate:true})深度监听watch(()form,(){console.log(表单变化)},{deep:true})注意深度监听复杂对象会有性能开销不要滥用。14. 常用功能七生命周期生命周期是组件从创建到销毁过程中可以插入逻辑的时机。组合式 API 常用script setup import { onMounted, onUnmounted } from vue onMounted(() { console.log(组件已经挂载可以请求接口或操作 DOM) }) onUnmounted(() { console.log(组件卸载清理定时器或事件监听) }) /script常用钩子onMounted组件挂载后常用于请求初始数据。onUpdated组件更新后。onUnmounted组件卸载后常用于清理资源。新手重点掌握onMounted和onUnmounted即可。15. 常用功能八组件组件是 Vue 项目的核心。15.1 创建组件src/components/UserCard.vuescript setup defineProps({ name: String, age: Number }) /script template div classuser-card p姓名{{ name }}/p p年龄{{ age }}/p /div /template在父组件使用script setup import UserCard from ./components/UserCard.vue /script template UserCard name小明 :age18 / /template15.2 Props父传子父组件TodoItem :todotodo /子组件script setup defineProps({ todo: Object }) /script15.3 Emits子传父子组件script setup const emit defineEmits([remove]) function handleClick() { emit(remove) } /script template button clickhandleClick删除/button /template父组件TodoItem removeremoveTodo(todo.id) /15.4 插槽 slot插槽用于让父组件传入一段模板内容。子组件template div classcard slot/slot /div /template父组件BaseCard h2标题/h2 p内容/p /BaseCard常用组件拆分思路页面级组件放views/。可复用业务组件放components/。基础组件命名可以用BaseButton.vue、BaseModal.vue。16. 常用功能九模板引用ref有时候需要拿到 DOM 元素。script setup import { ref, onMounted } from vue const inputRef ref(null) onMounted(() { inputRef.value.focus() }) /script template input refinputRef / /template常见用途自动聚焦输入框。获取元素尺寸。调用第三方库时传入 DOM。不要过度使用 DOM 操作。Vue 推荐数据驱动界面。17. 常用功能十样式绑定17.1 class 绑定div :class{ active: isActive, error: hasError }/div数组写法div :class[baseClass, isActive ? active : ]/div17.2 style 绑定div :style{ color: textColor, fontSize: size px }/div实际项目建议大部分样式写 class。少量动态数值用 style 绑定。18. 路由 Vue Router当项目有多个页面时需要 Vue Router。18.1 基本概念路由URL 和页面组件的对应关系。router-link页面跳转链接。router-view当前路由页面显示的位置。18.2 路由配置示例src/router/index.jsimport{createRouter,createWebHistory}fromvue-routerimportHomeViewfrom../views/HomeView.vueimportAboutViewfrom../views/AboutView.vueconstroutercreateRouter({history:createWebHistory(),routes:[{path:/,name:home,component:HomeView},{path:/about,name:about,component:AboutView}]})exportdefaultroutersrc/main.jsimport{createApp}fromvueimportAppfrom./App.vueimportrouterfrom./routercreateApp(App).use(router).mount(#app)App.vuetemplate nav RouterLink to/首页/RouterLink RouterLink to/about关于/RouterLink /nav RouterView / /template18.3 动态路由{path:/users/:id,name:user-detail,component:UserDetailView}组件里读取参数script setup import { useRoute } from vue-router const route useRoute() console.log(route.params.id) /script18.4 编程式导航script setup import { useRouter } from vue-router const router useRouter() function goHome() { router.push(/) } /script常用场景登录成功后跳转首页。保存表单后跳转详情页。删除数据后返回列表页。19. 状态管理 Pinia当多个组件都要共享同一份数据时可以使用 Pinia。19.1 注册 Piniasrc/main.jsimport{createApp}fromvueimport{createPinia}frompiniaimportAppfrom./App.vueconstappcreateApp(App)app.use(createPinia())app.mount(#app)19.2 创建 Storesrc/stores/user.jsimport{defineStore}frompiniaimport{ref,computed}fromvueexportconstuseUserStoredefineStore(user,(){consttokenref()constnameref()constisLogincomputed(()Boolean(token.value))functionlogin(payload){token.valuepayload.token name.valuepayload.name}functionlogout(){token.valuename.value}return{token,name,isLogin,login,logout}})组件中使用script setup import { useUserStore } from /stores/user const userStore useUserStore() /script template p v-ifuserStore.isLogin你好{{ userStore.name }}/p button clickuserStore.logout退出登录/button /template什么时候用 Pinia登录用户信息。token。购物车。全局主题。多页面共享筛选条件。复杂页面的共享状态。什么时候不用只在一个组件内部使用的数据。父子组件之间简单传值优先 props/emit。20. 请求接口Vue 本身不规定请求库。新手可以先用fetch项目里常用axios。20.1 fetch 示例script setup import { ref, onMounted } from vue const list ref([]) const loading ref(false) const error ref() async function loadData() { loading.value true error.value try { const res await fetch(/api/todos) list.value await res.json() } catch (err) { error.value 加载失败 } finally { loading.value false } } onMounted(loadData) /script template p v-ifloading加载中.../p p v-else-iferror{{ error }}/p ul v-else li v-foritem in list :keyitem.id{{ item.title }}/li /ul /template20.2 axios 示例安装npminstallaxios使用importaxiosfromaxiosconstresawaitaxios.get(/api/todos)list.valueres.data建议封装src/api/src/api/ request.js user.js todo.js这样组件里不要散落很多 URL。21. 常用项目功能怎么组合21.1 登录功能涉及表单v-model点击事件click请求接口Pinia 存 token/userVue Router 跳转流程输入账号密码 - 点击登录 - 请求接口 - 保存 token - 跳转首页21.2 列表页涉及onMounted请求数据v-for渲染列表v-if显示 loading/empty/error搜索框v-model分页组件流程进入页面 - 请求列表 - 展示数据 - 搜索/分页 - 重新请求21.3 表单页涉及reactive表单对象v-model双向绑定表单校验提交请求成功后跳转流程编辑表单 - 校验 - 提交接口 - 成功提示 - 返回列表21.4 详情页涉及动态路由参数useRouteonMounted请求详情接口流程/users/1001 - 读取 id - 请求用户详情 - 渲染页面22. 新手常见问题22.1 为什么 JS 里要写.value因为ref返回的是一个包装对象真正的值在.value上。constcountref(0)count.value模板里 Vue 会自动解包p{{ count }}/p22.2ref和reactive怎么选简单规则数字、字符串、布尔值ref对象、表单reactive或ref不确定先用ref22.3 computed 和 watch 区别computed用来算值商品单价 数量 - 总价watch用来做事情搜索词变化 - 请求接口23. 最小记忆清单必须记住createApp(App).mount(#app)创建并挂载应用。.vue文件就是组件。ref创建响应式数据JS 里用.value。{{ }}显示数据。:属性绑定属性。事件绑定事件。v-if控制是否渲染。v-for渲染列表必须写:key。v-model表单双向绑定。computed算派生值。watch监听变化做副作用。props 父传子emit 子传父。Router 管页面Pinia 管全局状态。