范同学的学习历程

浏览器调试模式下的各个调试工具是常用的工具集，能够帮助开发者理解、调试和优化网页。浏览器工具打开方式：打开命令菜单快捷键：相关命令：dark theme -->DevTool切换成黑色主题light theme -->切换成白色主题Capture area screenshot -->选择范围截图Capture full size screenshot -->选择整个页面截图Capture node screenshot -->捕捉一个node节点截图通过Dock命令可以改变窗口位置Undock命令可

🚩当然这里写的都是废话，不想看的小伙伴可以选择直接跳过去哟！首先我想问的是为什么要选择学习前端开发？开发有很多方向：前端开发，后端开发，安卓开发，大数据，人工智能等等，诸多开发方向可以选择，为何你在诸多道路上选择了前端开发？有尝试问过自己这个问题吗？如果你能列举出一二三来，那么恭喜你，你真的很适合在这条路上去发展，因为至少你已经开始在这条路上开始了自己的探索。

欢迎来到 前端学前班！🎉🎉🎉我是你未来前端之旅同行的伙伴，向导，旅“驴”友......这一篇文章将会详细讲述我目前所接触到的常用的前端开发风景（开发环境）和旅行工具（开发工具）。通过学习这些工具的学习能够了解编码流程。现在，我们将正式开启前端学习之旅！通过对第一篇文章的学习想必你已经对前端开发已经有了大体上的认识，了解到了本次旅途所要经历的大体路程和旅行线路（如果你还没有了解可以点进去看看哟！）

Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)😑 官方文档就是喜欢用一些这样的专有名词，拉高学习曲线，看都看不明白（菜鸡太难了......呜呜呜😫😫😫）这里做一个简单的解释：Vue 是基于 JavaScript 编写的一套前端框架，主要用于帮助前端开发人员能够以更高效率进行页面功能的开发实现。

每个 Vue 实例在被创建时都要经过从 创建、挂载、更新、销毁 的全部过程。例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。在这些过程中会伴随运行一些叫做 生命周期钩子 的函数。（PS：生命周期钩子就是生命周期函数）

Vue CLI 是 Vue 官方提供的一个全局命令工具。可以帮助我们快速创建一个开发用的 Vue 项目的标准框架。其中内置集成了 Webpack。使用 Vue CLI 的好处就在于不用再对 Webpack 进行配置，拿来安装即可使用，快速创建一个可以使用的 Vue 工程，直接就能上手开发项目。组件化是指将一个页面拆分成一个个组件，每个组件有自己独立的结构、样式、行为。这样做的好处就在于更好的维护，利于代码复用，进而提升开发效率。

组件通信是指组件与组件之间的数据传递。组件之间的数据是独立的，无法直接访问其他组件的数据。如果想使用其他组件的数据，就需要使用组件之间的通信方式，来把当前组件的数据传递给其他组件。首先明确组件之间的关系大致分为两类：父子关系 和 没有关系（世界上只有两种人：一种是人是义父，一种人不是义父 😏😏😏）父子关系是指是组件之间是否存在包含关系，即一个组件中引入其他组件，当前组件是父组件，其他引入的组件是子组件。针对这两种不同类型的关系，Vue 提出了不同的通信解决方案。props父 ↔ 子。若父传子。

单页应用程序 SPA（Single Page Application）。单页应用程序所有功能都在一个 HTML 页面上实现。所有的组件切换都是在这个唯一的页面内完成的，此时不同组件之间的切换需要通过前端路由来实现。单页面应用程序：系统类网站、内部网站、文档类网站、移动端站点多页面应用程序：公司官网、电商类网站单页面应用程序开发效率高、性能高、用户体验好，最大的原因就是页面是按需更新的。

message被监听，一旦它的值发生变化，watch会调用对应的回调函数，newValue是新值，oldValue是旧值。可以在这个回调中做其他逻辑操作，比如发起异步请求、验证数据、或者进行其他逻辑处理。这种方式适用于当你需要在数据变化时执行一些操作，且该操作不适合放在computed中的情况。data() {return {},},watch: {// 监听 message 的变化。

刚开始学习 Vue 时我个人认为使用 选项式 API 在代码结构上会更加清晰明了，不太明白官方在 Vue3 时替换掉了这种方式，而是选用了组合式 API 的代码风格。随着后续的不断学习和开发，逐渐理解使用 组合式 API 的优势。基于此背景下，于是针对这两种不同风格的 Vue 组件开发代码风格进行了分析梳理和总结，当然，要说推荐使用那肯定是根据官方的迭代进行使用 组合式 API。

Node.js 是一个基于 Chrome V8 引擎的JavaScript 运行环境。Node.js 作为一个 JavaScript 的运行环境，仅仅提供了基础的功能和 API。然而，基于 Node.js 提供的这些基础能，很多强大 的工具和框架如雨后春笋，层出不穷，所以学会了 Node.js ，可以让前端程序员胜任更多的工作和岗位：基于 Express 框架（http://www.expressjs.com.cn/），可以快速构建 Web 应用