vue 基础教程核心就是掌握 vue 框架最基础的响应式思想模板语法组件生命周期这些必备知识点，这套教程面向零基础前端学习者，重点理解 vue 和原生 js 开发的区别，vue 采用数据驱动视图，开发者只需要修改数据，框架自动完成页面 dom 更新，不用手动查找元素修改内容，当前主流学习优先选择 vue3 版本，vue3 使用 proxy 实现响应式，搭配 setup 组合式 api，同时保留 vue2 选项式写法兼容老项目，学习这套 vue 基础教程的时候，不需要一开始就深入复杂工程化，先理解核心原理，再逐步学习路由状态管理等生态模块，打好基础之后才能独立开发中小型前端项目，很多新手一开始就直接写大型项目代码，但是没有吃透响应式和组件通信原理，后续遇到数据不更新组件传参异常这类问题很难排查，所以 vue 基础教程的学习顺序一定要由浅入深，先跑通最小示例，再逐个掌握基础 api。

学习前置准备

第一种 cdn 方式快速跑通第一个 vue 示例

第一步 新建一个 html 文件，在 head 标签里面引入 vue 的 cdn 脚本地址

第二步 在 body 里面准备一个挂载节点，一般使用 id 为 app 的 div

第三步 编写 createApp 创建应用实例，传入配置对象，里面写 data 返回响应式数据，写 methods 定义方法

第四步 调用 mount 方法，把应用挂载到 id 为 app 的节点上

第五步 在 html 里面使用插值语法双大括号绑定 data 里面的数据，添加按钮绑定点击事件，测试修改数据之后页面是否自动刷新

这个方式优势是不需要安装 node 环境，打开浏览器就能运行，适合刚学 vue 基础教程的时候做语法试验，缺点是不能使用单文件组件，不适合大型项目。

第二种 vite 工程化项目创建

第一步 电脑提前安装 nodejs，打开终端，执行创建项目命令，选择 vue 模板

第二步 进入项目文件夹，执行安装依赖命令

第三步 启动本地开发服务，浏览器访问本地预览地址

第四步 打开 src 文件夹，mainjs 是项目入口文件，Appvue 是根组件，components 文件夹用来存放自定义组件

vite 作为新一代构建工具，冷启动速度很快，是现在 vue 基础教程官方推荐的工程化方案，替代旧版 vuecli。

核心基础知识点清单

模板语法

插值语法 双大括号，把 data 里面的数据渲染到页面文本位置

vbind 绑定标签属性，可以简写冒号，比如绑定图片地址 class 样式

vmodel 双向绑定，表单输入框修改内容，data 里面数据同步变化，data 修改页面输入框也同步更新

vif vshow 条件渲染，vif 会销毁重建 dom，vshow 只是切换 display 样式

vfor 循环遍历数组生成列表，必须添加 key 属性，提升 diff 更新效率

von 绑定事件，简写 @，支持传参和事件修饰符

计算属性与侦听器

computed 计算属性，依赖数据变化自动重新计算，有缓存，适合派生计算值

watch 侦听器，监听指定数据变化执行回调，适合异步操作或者复杂联动逻辑

生命周期钩子

onbeforecreate 实例初始化之前

oncreated 实例创建完成，可以初始化数据

onbeforemount 挂载到 dom 之前

onmounted 已经挂载到页面，可以操作 dom

onbeforeupdate 数据更新之前

onupdated 视图更新完成

onbeforeunmount 组件卸载之前

onunmounted 组件销毁，清理定时器监听事件防止内存泄漏

组件基础

单文件组件由 template 模板 script 逻辑 style 样式三部分组成

props 父组件传递数据给子组件，props 数据是只读，子组件不能直接修改

emit 子组件触发自定义事件，把数据传回父组件

组件注册分为全局注册和局部注册，局部注册只在当前组件可用

基础响应式原理要点

vue3 响应式核心是 reactive 和 ref 两个 api

reactive 用来包裹对象类型数据，实现深层响应式

ref 可以包裹基础类型数字字符串布尔值，在 script 里面访问需要加 value，模板里面自动解包不需要写 value

很多新手初学 vue 基础教程容易混淆 ref 和 reactive，记住基础类型优先 ref，对象优先 reactive，修改 ref 对象的时候忘记写 value 是最常见报错原因。

基础练习项目推荐

第一个练习 计数器，点击按钮数字加减，练习 vmodel 事件绑定

第二个练习 待办清单，添加删除勾选任务，练习 vfor 数组操作

第三个练习 父子组件传参案例，练习 props 和 emit 通信

第四个练习 表单收集页面，练习 vmodel 多表单绑定和校验基础写法

总结，vue 基础教程学习重点不是死记 api，而是理解响应式数据驱动这个核心思想，掌握模板指令生命周期组件通信，能够独立完成简单页面交互，学完基础之后，再继续学习 vuerouter 路由 pinia 状态管理，就可以进入完整单页应用开发阶段。

【常见问题】

问题 1 vue 基础教程新手一定要先学 vue2 吗

回答 1 vue 基础教程新手不需要强制先学 vue2，现在优先学习 vue3 组合式 api，vue3 本身兼容选项式写法，后续如果遇到老项目，再补充 vue2 相关语法就可以。

问题 2 vue 基础教程里面 ref 和 reactive 有什么区别

回答 2 vue 基础教程里面 ref 支持基础类型和对象，访问需要 value，reactive 只适合对象类型，不能直接赋值替换整个对象，否则会丢失响应式效果。

问题 3 vue 基础教程学习的时候一定要安装 node 环境吗

回答 2 不对，vue 基础教程如果只用 cdn 引入方式练习基础语法，可以不用 node 环境，但是如果学习 vite 工程化单文件组件开发，就必须安装 nodejs 环境。

问题 4 vue 基础教程学完之后可以直接做企业项目吗

回答 4 vue 基础教程只掌握了核心基础能力，企业项目还需要学习路由状态管理请求封装权限控制打包部署这些内容，基础教程只是入门阶段。

【免责申明】

本 vue 基础教程仅作为入门学习参考，vue 版本持续迭代，api 和官方推荐写法会随版本更新调整，实际开发请以对应版本官方文档为准，本内容不对依照教程编写代码产生的报错兼容性问题承担责任。