文章目录一、Vue 两种开发模式1. 传统开发模式CDN 引入 Vue2. 现代工程化开发模式企业主流二、包管理器常用命令npm / yarn / pnpm三、Vue3 脚手架Vite1. 脚手架概念2. Vite 创建 Vue3 项目完整步骤3. Vite 打包运行流程四、Vue 单文件组件.vue 文件1. 组成结构2. 核心特性3. 新项目清空默认欢迎页面步骤4. Hello World 两种写法对比五、Vue 六大指令Directive1. 内容渲染指令v-text / v-html2. 属性绑定指令v-bind3. 事件绑定指令v-on4. 条件渲染指令v-show / v-if5. 列表渲染指令v-for6. 双向绑定指令v-model六、核心记忆要点全文总结核心知识点复盘常见问题 / 避坑指南本文面向 Vue3 零基础入门读者系统梳理从开发环境搭建到核心指令使用的全套知识点。文章以概念 → 原理 → 实战 → 避坑为主线配合完整可运行的代码示例适合作为学习笔记或团队技术分享参考。一、Vue 两种开发模式工欲善其事必先利其器。在学习 Vue3 语法之前首先需要了解两种截然不同的开发方式——它们的选型直接决定了后续的学习路径和开发体验。1. 传统开发模式CDN 引入 Vue传统模式是**最原始的手写 HTML 引入 Vue 脚本**方式无需任何构建工具直接在浏览器中运行。目录结构vue-tradition-way/ ├─ index.html # 页面主体通过 script 引入 Vue ├─ index.css # 样式文件 ├─ index.js # 业务逻辑 └─ vue.js # Vue3 源码文件从官网下载或 CDN 引入Hello World 示例!-- index.html --!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8titleVue3 传统开发/title!-- 1. 引入 Vue3 CDN 源码 --scriptsrchttps://unpkg.com/vue3/dist/vue.global.js/script/headbody!-- 2. 预留 DOM 渲染容器 --dividappp{{ message }}/p/div!-- 3. 编写 Vue 应用逻辑 --scriptconst{createApp}VuecreateApp({data(){return{message:Hello Vue3!}}}).mount(#app)/script/body/html优缺点维度评价✅ 优点上手简单、零环境配置、入门成本极低一个 HTML 文件即可跑起来❌ 缺点功能薄弱、无法使用 SFC 单文件组件、无热更新、大型项目维护困难、开发体验差适用场景快速原型验证、极简 Demo 演示、个人学习初期理解 Vue 响应式原理。企业项目开发绝不使用此方式。2. 现代工程化开发模式企业主流基于Vite / Webpack等构建工具搭建标准化的 Vue 项目是企业正式开发的唯一选用方式也是本系列后续所有内容的基础环境。目录结构Vite 创建 Vue 项目VUE-ENGINEERING-WAY/ ├─ node_modules/ # 项目依赖包自动生成不提交到 Git ├─ public/ # 静态公共资源不参与编译直接拷贝到输出目录 ├─ src/ │ ├─ assets/ # 业务静态资源图片、样式等参与编译优化 │ ├─ components/ # 全局公共组件 │ ├─ App.vue # 根组件 │ ├─ main.js # 项目入口文件 │ └─ style.css # 全局样式 ├─ .gitignore # Git 忽略文件配置 ├─ index.html # 项目宿主页面Vite 以此为入口 ├─ package.json # 项目配置、脚本命令、依赖声明 ├─ README.md # 项目说明文档 ├─ vite.config.js # Vite 打包配置文件 └─ yarn.lock # 依赖版本锁定文件确保团队依赖一致优缺点维度评价✅ 优点功能完善、工程化完整、热更新HMR、TypeScript 支持、组件化开发、打包部署友好、开发体验极佳❌ 缺点目录结构相对复杂、上手门槛更高、需要掌握包管理器、配置文件有一定理解成本结论入门阶段可以先用 CDN 模式快速理解 Vue 语法但正式学习和项目开发必须切换到 Vite 工程化模式。二、包管理器常用命令npm / yarn / pnpm工程化开发离不开包管理器它负责安装、卸载、管理项目的第三方依赖。下面列出三种主流包管理器的核心命令对比操作npmyarnpnpm安装依赖包npm i 包名yarn add 包名pnpm i 包名卸载依赖包npm un 包名yarn remove 包名pnpm un 包名安装全部依赖npm installyarn installpnpm install运行脚本npm run devyarn devpnpm dev为什么推荐 pnpm磁盘利用率高pnpm 使用硬链接 符号链接的存储方式相同版本的包在磁盘上只存一份多个项目共享大幅节省磁盘空间。安装速度快相比 npm 和 yarnpnpm 的依赖解析和下载效率更高。严格的依赖隔离pnpm 创建的node_modules结构更扁平但更严格避免幽灵依赖问题即代码中能访问到未在package.json中声明的包。建议新手可以从 npm 入门零额外安装成本熟悉后迁移到 pnpm。本文示例均使用 npm 命令。三、Vue3 脚手架Vite1. 脚手架概念脚手架类比建筑工地的脚手架——它是一套预置好的标准化工程开发环境开箱即用零基础配置。在传统前端开发中你需要手动配置 Webpack、Babel、CSS 预处理器、热更新插件……每个环节都可能踩坑。脚手架把这些复杂的工程化配置全部封装好你只需要关注业务代码本身大幅降低了 Vue 的学习与项目搭建成本。Vite法语快的意思是由 Vue 作者尤雨溪团队开发的下一代前端构建工具凭借 ES Module 原生支持和 esbuild 预构建在开发阶段实现了毫秒级冷启动和极速热更新已成为 Vue3 官方推荐的脚手架工具。2. Vite 创建 Vue3 项目完整步骤# 1. 选定项目存放目录如桌面或某个磁盘文件夹打开终端# 2. 执行创建命令npmcreate vuelatest# 3. 根据命令行提示进行交互式配置# - Project name项目名称输入你的项目名# - TypeScript是否添加 TS 支持初学者选 No# - JSX Support初学者选 No# - Vue Router路由按需选择# - Pinia状态管理按需选择# - Vitest单元测试初学者选 No# - ESLint代码规范建议选 Yes# - Prettier代码格式化建议选 Yes# 4. 进入项目根目录cd项目文件夹名# 5. 安装项目依赖npminstall# 6. 启动开发服务器npmrun dev# 7. 在浏览器打开终端输出的本地地址默认 http://localhost:5173预览项目3. Vite 打包运行流程理解 Vite 的工作流程有助于后续调试和优化开发者编写 src 源码 Vite 编译打包 浏览器访问 ┌─────────────────┐ ┌──────────────────┐ ┌─────────────────┐ │ .vue 组件文件 │ │ │ │ │ │ .js 逻辑文件 │ ──────▶ │ 编译、压缩、打包 │ ──────▶ │ index.html │ │ .css 样式文件 │ │ 输出静态资源 │ │ JS CSS │ │ 图片/字体等资源 │ │ │ │ 渲染最终页面 │ └─────────────────┘ └──────────────────┘ └─────────────────┘编写阶段开发者在src目录下编写所有源码.vue组件、.js逻辑、.css样式、图片等编译打包Vite 将所有源码编译打包输出压缩优化后的 JS、CSS、图片等静态资源资源挂载打包后的资源通过script和link标签自动挂载到根目录index.html中浏览器渲染用户访问index.html浏览器加载并执行打包后的资源渲染最终页面四、Vue 单文件组件.vue文件1. 组成结构Vue 单文件组件Single File Component简称SFC是 Vue 工程化开发的核心概念。一个.vue文件就是一个独立的功能组件由三部分组成template !-- HTML 视图层定义组件的 DOM 结构 -- div classhello h1{{ msg }}/h1 /div /template script setup // JS 逻辑层定义组件的数据和行为 import { ref } from vue const msg ref(Hello Vue3!) /script style scoped /* CSS 样式层定义组件的样式 */ .hello { color: #42b983; } /style标签作用说明templateHTML 视图定义组件的 DOM 结构必须有且只有一个根节点script setupJS 逻辑定义响应式数据、方法、计算属性、生命周期等setup是 Vue3 组合式 API 的语法糖style scopedCSS 样式定义组件样式scoped属性实现样式隔离2. 核心特性① 独立作用域每个组件拥有独立的变量和逻辑作用域组件之间互不干扰彻底告别传统 HTML 开发中全局变量满天飞、命名冲突难排查的痛点。② 样式隔离scoped给style标签添加scoped属性后当前组件写的 CSS只对当前组件生效不会污染其他组件。这是通过 Vue 在编译时给每个元素添加唯一的data-v-xxxxx属性实现的。style scoped /* 这里的样式只作用于当前组件不会泄漏到子组件或兄弟组件 */ .red { background: red; } .green { background: green; } /style③ 浏览器无法直接识别.vue文件这是初学者最常有的疑问——浏览器只认识 HTML、CSS、JS不认识.vue文件。因此.vue文件必须经过 Vite / Webpack 编译打包转换成浏览器可识别的标准 HTML、CSS、JS 后才能运行。3. 新项目清空默认欢迎页面步骤每次创建新项目后第一件事就是清空 Vite 自带的欢迎页面搭建自己的项目骨架操作步骤删除src/assets静态资源文件夹Vue 自带 logo 等不需要的资源删除src/components组件文件夹自带的HelloWorld.vue等示例组件清空App.vue仅保留三大标签骨架script setup // 后续在这里写 JS 逻辑 /script template !-- 后续在这里写 HTML 视图 -- /template style scoped /* 后续在这里写 CSS 样式 */ /style重写src/main.js——项目入口文件负责创建 Vue 应用并挂载到页面// main.js —— 项目入口文件import{createApp}fromvue// ① 导入创建应用的工厂函数importAppfrom./App.vue// ② 导入根组件createApp(App).mount(#app)// ③ 创建 Vue 实例并挂载到 #app DOM 节点代码解析createApp(App)创建一个 Vue 应用实例.mount(#app)将该实例挂载到index.html中idapp的 div 上——Vue 应用的所有内容都渲染在这个容器内部。4. Hello World 两种写法对比传统 CDN 模式!-- 1. 引入 Vue3 CDN --scriptsrchttps://unpkg.com/vue3/dist/vue.global.js/scriptdividapp!-- 4. 使用插值语法 {{ }} 渲染数据 --p{{ message }}/p/divscriptconst{createApp}VuecreateApp({data(){return{message:Hello World}// 2. 定义数据}}).mount(#app)// 3. 挂载/scriptVite 工程化模式!-- App.vue -- script setup import { ref } from vue // 在 setup 中声明响应式数据 const message ref(Hello World) /script template !-- 使用插值语法渲染数据 -- p{{ message }}/p /template对比可见CDN 模式在一个 HTML 文件内完成所有操作简单直观但不适合工程化Vite 模式通过.vue单文件组件实现了关注点分离模板、逻辑、样式各司其职是真正可维护、可扩展的现代开发方式。五、Vue 六大指令Directive什么是指令指令是以v-开头的特殊标签属性是 Vue 框架提供给开发者增强 HTML 标签数据渲染与交互能力的核心机制。如果说普通的 HTML 属性描述的是标签的静态特征那么 Vue 指令赋予标签的是动态的、响应式的行为。1. 内容渲染指令v-text/v-html用于向双标签内部动态渲染文本内容。v-text——纯文本渲染script setup import { ref } from vue const msg ref(span stylecolor:red;hello Vue3/span) /script template !-- v-text 将数据作为纯文本渲染不会解析 HTML 标签 -- p v-textmsg/p !-- 页面显示span stylecolor:red;hello Vue3/span原样输出 -- !-- 效果完全等价于插值表达式 {{ }} -- p{{ msg }}/p /template结论v-text表达式效果100% 等价于{{ 表达式 }}都只做纯文本渲染。实际开发中推荐使用更简洁的插值语法{{ }}。v-html——可解析 HTML 标签template !-- v-html 会解析 HTML 标签并渲染 -- p v-htmlmsg/p !-- 页面显示红色的 hello Vue3HTML 被解析执行 -- /template⚠️安全警告v-html存在XSS跨站脚本攻击风险如果渲染的内容包含用户输入恶意用户可能注入script标签窃取信息。永远不要对用户输入的内容使用v-html仅在你完全信任数据来源时使用。指令是否解析 HTML安全性使用场景v-text/{{ }}❌ 不解析✅ 安全绝大多数文本渲染场景v-html✅ 解析⚠️ XSS 风险富文本编辑器回显、可信的 HTML 内容渲染2. 属性绑定指令v-bind插值语法{{ }}只能用于标签的文本内容不能用于标签的属性值。要为属性动态赋值必须使用v-bind。script setup import { ref } from vue const hello ref(hello Vue3!) const url ref(http://www.baidu.com) /script template !-- ❌ 错误插值语法不能用于属性 -- div title{{ hello }}{{ hello }}/div !-- ✅ 正确使用 v-bind 完整语法 -- div v-bind:titlehello{{ hello }}/div !-- ✅ 推荐使用 v-bind 简写语法最常用 -- div :titlehello{{ hello }}/div !-- 实际案例动态绑定链接 -- a :hrefurl target_blank百度一下/a /template记忆技巧:v-bind:冒号是 v-bind 的简写看到冒号就能想到这里在动态绑定属性。3. 事件绑定指令v-on绑定 DOM 事件处理用户的点击、输入、键盘等交互行为。script setup import { ref } from vue const count ref(0) // 无参函数 const increase () count.value // 带参函数 const add (n) count.value n /script template p当前计数{{ count }}/p !-- 写法一内联代码逻辑只有一句话时最简洁 -- button v-on:clickcount1/button !-- 写法二绑定无参函数注意只写函数名不加括号 -- button v-on:clickincrease1/button !-- 写法三绑定带参函数 -- button v-on:clickadd(3)3/button !-- ⭐ 写法四简写语法最常用 -- button clickadd(3)3/button /template三种写法对比写法语法适用场景内联代码clickcount逻辑只有一句话简单直接无参函数clickincrease逻辑较复杂封装成函数复用不加括号带参函数clickadd(3)需要传递参数时使用加括号传参核心记忆v-on:事件名处理函数是实际开发中最常用的写法。click、input、submit、keyup等所有 DOM 事件都可以这样绑定。4. 条件渲染指令v-show/v-if根据布尔值控制元素的显示与隐藏但两者的实现原理完全不同。v-show——CSS 显隐script setup import { ref } from vue const visible ref(true) /script template !-- visible 为 true 时显示为 false 时隐藏 -- div classred v-showvisible/div !-- 搭配点击事件实现折叠面板效果 -- span classbtn clickvisible !visible {{ visible ? 收起 : 展开 }} /span div classcontainer v-showvisible p生命诚可贵/p p爱情价更高。/p p若为自由故/p p两者皆可抛。/p /div /template原理修改元素的 CSSdisplay属性display: none↔display: 原始值DOM 节点始终存在于页面中只是肉眼看不到。v-if/v-else-if/v-else——DOM 节点的创建与销毁script setup import { ref } from vue const visible ref(true) const isLogin ref(true) const mark ref(55) /script template !-- 单分支控制单个元素 -- div classgreen v-ifvisible/div !-- 双分支v-if v-else -- div v-ifisLoginxxx欢迎回来/div div v-else你好请登录/div !-- 多分支v-if v-else-if v-else模拟成绩评级 -- div v-ifmark 90优秀/div div v-else-ifmark 70良好/div div v-else差/div /template原理直接创建或销毁 DOM 节点——条件为 false 时该元素根本不存在于 DOM 树中打开浏览器开发者工具验证即可看到。v-showvsv-if核心对比对比维度v-showv-if实现原理修改 CSSdisplay属性创建/销毁 DOM 节点DOM 节点始终存在于页面false 时从 DOM 中移除初始渲染开销高即使隐藏也要渲染 DOM低false 时不渲染切换开销低只改一行 CSS高反复创建/销毁 DOM多分支支持❌ 不支持✅ 支持v-else-if / v-else适用场景频繁切换显示/隐藏如折叠面板、tab 切换很少切换、一次性判断如登录状态、权限校验如何选择元素需要频繁切换如轮播图、折叠面板、tab 页签→ 用v-show切换性能更好元素很少改变或只判断一次如用户登录态、权限控制、错误提示→ 用v-if减少初始 DOM 节点5. 列表渲染指令v-for基于数组、对象或数字循环批量生成 DOM 列表是构建动态列表的核心指令。script setup import { ref } from vue // 图书列表数据 const bookList ref([ { id: 1, name: 《红楼梦》, author: 曹雪芹 }, { id: 2, name: 《西游记》, author: 吴承恩 }, { id: 3, name: 《三国演义》, author: 罗贯中 }, { id: 4, name: 《水浒传》, author: 施耐庵 } ]) // 删除方法 const onDel (index) { // 删除前先确认 if (window.confirm(确定删除吗)) { // splice(起始下标, 删除个数) 实现响应式删除 bookList.value.splice(index, 1) } } /script template h3书架/h3 ul !-- v-for(项变量, 下标变量) in 数组 :key唯一值 -- li v-for(item, index) in bookList :keyitem.id span{{ item.name }}/span span{{ item.author }}/span button clickonDel(index)删除/button /li /ul /templatekey属性——Vue 虚拟 DOM 的身份证key是v-for指令的核心考点也是面试高频问题。key 的作用Vue 在更新列表时会通过虚拟 DOM Diff 算法对比新旧节点。key是每个节点的唯一标识Vue 根据 key 来判断哪些节点可以复用、哪些需要重新创建从而实现最小范围的 DOM 更新提升列表渲染性能。没有 key 会怎样看下面的对比!-- ❌ 不推荐无 key -- li v-for(item, index) in bookList span{{ item.name }}/span span{{ item.author }}/span button clickonDel(index)删除/button /li !-- ✅ 推荐有 key 且使用唯一 ID -- li v-for(item, index) in bookList :keyitem.id span{{ item.name }}/span span{{ item.author }}/span button clickonDel(index)删除/button /likey 取值优先级优先级取值说明 首选数据的唯一 ID如item.id最稳定可靠确保 DOM 复用准确无误 兜底数组下标index数据顺序不变时可用但列表发生增删时会导致 DOM 错位复用引发渲染 bug⚠️避坑指南禁止直接忽略 key——控制台会报警告列表更新可能出现不可预知的渲染错误不要用index当下标删除场景的 key——删除第一项后剩余所有项的 index 全部变化Vue 会错误地复用 DOM 节点可能导致删除动画错乱、输入框内容残留等问题key 值必须唯一——同一层级的兄弟节点之间 key 不能重复6. 双向绑定指令v-model实现数据 ↔ 视图的双向同步是表单开发中最常用的指令。什么是双向绑定Vue 默认是单向数据流数据变化 → 视图自动更新数据驱动视图。但表单场景下还需要反向同步用户在输入框打字 → 数据也跟着变。v-model做的就是正反两个方向同时绑定。单向数据流Vue 自带 数据修改 ────────▶ 视图自动更新 双向绑定v-model 数据修改 ────────▶ 视图自动更新 视图修改用户输入──▶ 数据自动同步 ← v-model 额外提供的反方向实战示例script setup import { reactive } from vue // 登录表单数据使用 reactive 包裹对象 const loginForm reactive({ username: , password: }) /script template div 账号 !-- v-model 双向绑定到 loginForm.username -- input typetext v-modelloginForm.username / br /br / 密码 !-- v-model 双向绑定到 loginForm.password -- input typetext v-modelloginForm.password / br /br / button登录/button button重置/button /div /template数据流向解析用户在输入框输入 “admin” →loginForm.username自动变为admin反之如果在 JS 中执行loginForm.username admin输入框也会立刻显示 “admin”。两个方向完全同步。v-model 适用场景表单控件示例绑定值类型input typetext文本输入框stringtextarea多行文本stringselect下拉选择框string/arrayinput typecheckbox复选框boolean/arrayinput typeradio单选框string⚠️注意事项v-model仅限表单元素使用input、textarea、select 等普通 div/span 标签用 v-model 无效。它的本质是:valueinput的语法糖。六、核心记忆要点企业开发一律使用 Vite 工程化模式传统 CDN 仅用于学习演示和快速原型验证.vue三部分固定结构template视图 script setup逻辑 style scoped样式scoped实现样式隔离指令简写记忆口诀:v-bind属性动态绑定v-on事件绑定频繁显隐用v-showCSS 显隐切换快一次性渲染用v-ifDOM 创建销毁初始快v-for循环必须携带:key优先使用数据唯一 IDitem.id禁止直接忽略 keyv-model仅限表单元素使用实现双向数据绑定本质是:valueinput的语法糖全文总结本文从 Vue3 零基础入门视角出发系统梳理了六大模块的核心知识开发模式选型CDN 引入适合演示学习Vite 工程化才是企业开发的唯一标准答案包管理器推荐从 npm 入门逐步迁移到更高效的 pnpmVite 脚手架开箱即用的标准化工程环境大幅降低项目搭建门槛单文件组件.vuetemplate script style 三位一体组件独立、样式隔离、工程化开发基石六大指令v-text/v-html内容渲染 →v-bind属性绑定 →v-on事件绑定 →v-show/v-if条件渲染 →v-for列表渲染 →v-model双向绑定由浅入深、层层递进核心知识点复盘序号知识点一句话总结1开发模式CDN 入门学语法Vite 工程化做项目2包管理器npm/yarn/pnpm 管理依赖pnpm 性能最优3脚手架Vite 开箱即用npm create vuelatest一行命令创建项目4.vue文件template script style组件化开发的基石5内容渲染{{ }}插值最常用v-html有 XSS 风险慎用6属性绑定:属性名表达式冒号是v-bind的简写7事件绑定事件名函数 是v-on的简写8条件渲染频繁切换用v-show一次性判断用v-if9列表渲染v-for必须配:keykey 优先用唯一 ID10双向绑定v-model仅限表单数据 ↔ 视图双向同步常见问题 / 避坑指南❓ 1.v-if和v-for能同时用在一个标签上吗答不推荐在 Vue3 中v-if和v-for同时使用时v-if的优先级更高会导致v-for的变量无法在v-if中访问而报错。正确做法是用template标签包裹!-- ❌ 错误 -- li v-foritem in list v-ifitem.active :keyitem.id !-- ✅ 正确用 template 隔离 -- template v-foritem in list :keyitem.id li v-ifitem.active{{ item.name }}/li /template❓ 2. 为什么用index做 key 在删除场景会出 bug假设列表有 3 项删除第 1 项后原第 2 项的 index 从 1 变成 0原第 3 项的 index 从 2 变成 1Vue 发现 key0 和 key1 的节点还在就会复用它们的 DOM只删除 key2 的节点这会导致数据内容与 DOM 节点错位如果你的列表项里有输入框或动画就会出现输入内容跑到另一行的诡异 bug❓ 3.v-show不支持v-else怎么办v-show只能单独使用不支持多分支。如果有多条件切换需求用v-if / v-else-if / v-else。❓ 4. 为什么{{ }}不能用于标签属性{{ }}是 Vue 的文本插值语法设计用途就是向标签文本内容区域插入数据。属性需要使用v-bind即:这是 Vue 模板编译器的语法规则混用会直接报错。❓ 5.v-model绑定的数据改了但视图没更新检查两点数据是否用ref()或reactive()声明为响应式数据普通变量 Vue 不会追踪变化在script setup中修改ref数据时有没有写.value这是新手最高频的错误// ❌ 错误直接赋值给 ref 变量本身count10// ✅ 正确通过 .value 修改 ref 包裹的值count.value10本文是 Vue3 入门系列的第三篇后续将继续深入响应式原理、组件通信、路由管理、状态管理等进阶主题。欢迎收藏、点赞、转发也欢迎在评论区交流你的学习心得与踩坑经历