Vue2 入门与环境搭建从理解 Vue 的核心理念到搭建第一个可运行的 Vue 应用本章将带你完成 Vue2 学习之旅的第一步。一、前言Vue.js 是一款用于构建用户界面的渐进式 JavaScript 框架。所谓渐进式意味着你可以根据项目需求逐步引入 Vue 的功能——从简单的页面增强到复杂的单页应用SPAVue 都能胜任。自 2014 年发布以来Vue 凭借易学易用、灵活高效、生态丰富三大优势成为前端开发领域最受欢迎的技术之一。在国内Vue 更是占据了前端框架的半壁江山是面试和工作中绕不开的必学技术。二、Vue 的核心理念2.1 MVVM 架构模式Vue 的设计深受MVVMModel-View-ViewModel模式的影响。理解这一架构有助于你从根本上把握 Vue 的工作方式。MVVM架构数据绑定DOM更新用户交互Model数据模型ViewModelVue实例View视图/模板层级职责Vue 中的对应Model数据层定义业务数据和逻辑data选项中的数据View视图层负责UI呈现模板template中的 HTMLViewModel连接 Model 和 View 的桥梁Vue 实例new Vue()Vue 的 ViewModel 通过响应式系统自动监听 Model 的变化并驱动 View 更新同时捕获 View 上的用户交互反馈给 Model。开发者只需关注数据本身无需手动操作 DOM。2.2 声明式渲染 vs 命令式渲染传统 jQuery 开发属于命令式编程你需要一步步告诉浏览器先选这个元素再改那个属性。而 Vue 采用声明式编程你只需声明数据长什么样视图就该怎么呈现Vue 会自动处理更新细节。// 命令式jQuery$(#message).text(Hello);$(#message).css(color,red);// 声明式Vuedata:{message:Hello,color:red}// 模板中{{ message }}2.3 组件化思想Vue 应用由一个个组件构成每个组件封装了自己的模板、逻辑和样式。组件可以嵌套、复用、组合就像搭积木一样构建复杂的用户界面。App根组件Header组件Main内容区Footer组件Sidebar侧边栏ArticleList文章列表ArticleItem文章项ArticleItem文章项三、环境搭建3.1 方式一CDN 引入最简单适合学习对于学习阶段或简单的页面增强直接在 HTML 中引入 Vue 的 CDN 链接即可。!DOCTYPEhtmlhtmlheadmetacharsetUTF-8title第一个 Vue 应用/title/headbodydividapp{{ message }}/div!-- 引入 Vue2 --scriptsrchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/scriptscriptnewVue({el:#app,data:{message:Hello, Vue!}});/script/body/html开发版 vs 生产版版本文件名特点开发版vue.js包含完整的警告和调试模式体积大约 340KB生产版vue.min.js删除了警告压缩后体积小约 94KB适合线上3.2 方式二Vue CLI推荐适合工程化项目Vue CLI 是 Vue 官方提供的脚手架工具用于快速搭建基于 Webpack 的工程化项目。安装要求Node.js 14.xnpm 6.x 或 yarn安装步骤# 全局安装 Vue CLInpminstall-gvue/cli# 验证安装vue--version# 创建项目vue create hello-vue# 启动开发服务器cdhello-vuenpmrun servevue create会引导你选择预设配置。初学者建议选择Default (Vue 2)预设。创建完成后项目结构如下hello-vue/ ├── node_modules/ # 依赖包 ├── public/ # 静态资源 │ ├── index.html # 入口 HTML │ └── favicon.ico ├── src/ # 源码目录 │ ├── assets/ # 图片、字体等资源 │ ├── components/ # 组件目录 │ ├── App.vue # 根组件 │ └── main.js # 入口 JS ├── package.json # 项目配置 ├── babel.config.js # Babel 配置 └── vue.config.js # Vue CLI 配置可选3.3 方式三Vite Vue2现代构建工具如果你更喜欢 Vite 的极速冷启动也可以使用 Vite 创建 Vue2 项目npmcreate vitelatest hello-vue2 ----templatevue不过需要注意的是Vite 的默认模板通常是 Vue3。创建 Vue2 项目需要使用社区插件如vitejs/plugin-vue2。3.4 三种方式对比方式适用场景优点缺点CDN学习、简单页面零配置、即引即用不适合大型项目Vue CLI企业级项目生态完善、配置成熟基于 Webpack启动较慢Vite现代项目启动快、配置简单Vue2 支持需要额外配置四、第一个 Vue 应用详解让我们深入拆解 CDN 方式创建的第一个 Vue 应用理解每个部分的作用。4.1 挂载点dividapp{{ message }}/div这是 Vue 实例的挂载点Mount Point。Vue 会接管这个 DOM 元素及其子元素将其内部的模板语法编译为渲染函数。4.2 Vue 实例newVue({el:#app,data:{message:Hello, Vue!}});选项说明el挂载点选择器支持 CSS 选择器字符串或 DOM 元素data数据对象Vue 会将其转换为响应式数据4.3 数据驱动视图的工作流程真实DOMVue响应式系统data对象开发者真实DOMVue响应式系统data对象开发者修改数据message Hi触发 setter通知依赖该数据的Watcher重新渲染更新对应节点页面自动更新这就是 Vue 最核心的特性——响应式数据绑定。你只需操作数据Vue 会自动将变化同步到视图上。4.4 一个更完整的入门示例!DOCTYPEhtmlhtmlheadmetacharsetUTF-8titleVue 入门示例/titlestyle.container{max-width:600px;margin:50px auto;font-family:Arial;}.card{border:1px solid #ddd;padding:20px;border-radius:8px;}.btn{padding:10px 20px;background:#42b983;color:white;border:none;border-radius:4px;cursor:pointer;}/style/headbodydividappclasscontainerdivclasscardh1{{ title }}/h1p点击次数{{ count }}/pbuttonclassbtnclickincrement点击我/button/div/divscriptsrchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/scriptscriptnewVue({el:#app,data:{title:我的第一个 Vue 应用,count:0},methods:{increment(){this.count;}}});/script/body/html这个示例展示了 Vue 的三个核心概念数据绑定{{ }}、事件处理click和方法定义methods。五、Vue Devtools 浏览器调试工具Vue Devtools 是 Vue 官方提供的浏览器扩展可以极大地提升开发调试效率。功能亮点实时查看组件树结构检查和编辑组件的 data、props、computed 属性追踪事件触发和 Vuex 状态变化性能分析安装方式Chrome 商店搜索 “Vue.js devtools”或使用 Edge 浏览器的扩展商店安装后在访问 Vue 页面时按F12打开开发者工具即可看到 Vue 标签页打开 Vue 页面按 F12 打开 DevTools切换到 Vue 面板查看组件树编辑组件数据追踪事件六、常见问题Q1Vue2 和 Vue3 我该学哪个建议先学 Vue2再过渡到 Vue3。理由如下Vue2 的 Options API 更直观适合初学者建立概念国内大量存量项目仍在使用 Vue2学会 Vue2 后Vue3 的新特性Composition API只是多了一个写法选择Q2{{ }}里可以写什么插值表达式内部可以写单个 JavaScript 表达式但不能写语句如if、for。合法的示例!-- 合法 --{{ count 1 }} {{ message.split().reverse().join() }} {{ ok ? YES : NO }}!-- 非法 --{{ if (ok) { return message } }} {{ var a 1 }}Q3Vue 实例创建后如何动态挂载除了通过el选项挂载也可以手动调用$mount方法constvmnewVue({data:{message:Hello}});vm.$mount(#app);// 手动挂载// 或vm.$mount(document.getElementById(app));七、总结本章我们学习了MVVM 架构理解 Vue 的数据驱动视图原理三种环境搭建方式CDN学习、Vue CLI工程化、Vite现代工具Vue 实例el、data、methods等核心选项Vue Devtools调试利器下一章我们将深入 Vue 的模板语法学习插值表达式、指令、计算属性等核心概念。八、练习使用 CDN 方式创建一个 Vue 应用展示你的姓名、年龄和爱好三个数据在页面上添加一个按钮点击后年龄增加 1 岁安装 Vue Devtools在浏览器中查看你的 Vue 应用结构