1. Vue

  2. Node.js

  3. Vue Router

  4. Axios

  5. Vuex

# 框架是什么? 我们可能没有用过 Vue,但应该都了解过 Vue 属于一种前端框架,那么什么是框架?框架存在的意义是什么? 前端三剑客分别是 HTML、CSS、JavaScript。使用这些已然能搭出网站,那么像 Vue、React、Angular 之类的框架存在的意义是什么? 打个比方,在之前,我们想修改一个元素的内容,我们需要执行以下代码。 JavaScript: ```javascript const element = document.getElementById("el") element.innerText = "新内容" ``` jQuery: ```javascript $("#el").text("新内容") ``` Vue: ```javascript this.elText = "新内容" // elText 已在模板中应用 ``` 以上的例子还比较片面,但我们已然可以看出,框架的存在,有助于我们隐藏底层细节、简化操作。 不同的框架自身的侧重点不同,下面举几个常见的框架为例。 **jQuery**:隐藏底层细节,优化文档操作、事件处理、动画设计和 Ajax 交互。 **ElementUI**:一个优美的 UI 框架,方便我们直接使用一些功能更高级的组件,而不只是 HTML 默认提供的那些。 **Vue、React、Angular**:更加高级的框架,一般都借鉴了 MVVM 的设计理念,实现了双向数据绑定。使得我们可以更加关心业务逻辑,而不用操心底层代码。 *jQuery 与 ElementUI 更偏向一个库,也就是提供单一的功能。而 Vue、React、Angular 则属于一个框架,即提供组织架构上的功能。* 以上的总结很是片面,只是为了表明不同的框架是为了不同的需求而存在而举例。如果想了解一个框架的特点,最好的方式还是去看其官方文档,并尝试去写一些它的实例。 疑问: 一般的浏览器不是只能识别 HTML、CSS、JavaScript 吗?那为什么能在框架中使用他们各自的语法和一些高级功能,这些框架是怎么实现的? 不同的框架实现的方法是有所不同的,比如 Vue3 是通过 Proxy 来实现的响应性。也有一些框架是运行在后端的,运行在 Nodejs 之类的引擎上,所以才能使用更加高级的语法而不用局限于 HTML、CSS、JavaScript。不过最终我们所写的代码还是要被解析为 HTML、CSS、JavaScript 返回给浏览器,才能让网页真正地在浏览器上跑起来。 # Vue 是什么? Vue 是由尤雨溪开发的一个前端框架,目前已然成为国内最流行的前端框架。 我们来看下 vue 的官方简介。 > Vue (读音 /vjuː/,类似于 **view**) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。 ## 渐进式框架 所谓的渐进式框架(progressive framework),就是指我们使用 vue 来开发项目,无需熟识并使用其全部的功能。当我们需要更多的功能时,可以通过按需逐渐引入新功能、新插件的方式。 关于什么是渐进式框架[尤大在 NingJS 的演讲](https://www.youtube.com/watch?v=EiTORdpGqns)中介绍过,可以在[分享出来的演讲 PPT](https://github.com/jsconfcn/ningjs/files/461401/Vue.js.NingJS.2016.pdf) 中找到以下的图片,这图片就很好地展示了如何从底向上地应用 vue (也很适合作为一个学习顺序)。 ![image](https://qiniu.3yya.com/fc266a148085c03cd9888aa135858a75/fc266a148085c03cd9888aa135858a75.png) 渐进式的框架给我们带来了两个好处: * 加载速度快。由于只需引入必须的组件,使得打包后的文件体积小,加载速度自然会快很多。 * 学习成本低。学习 vue 可以逐渐上手学习,学一点就可以实战出效果,对于开发者来说学习成本就降低了不少。 ## 自底向上逐层应用 这句话的英文原文是:Vue is designed from the ground up to be incrementally adoptable. 从英文反而比较容易理解,意思是 vue 从一开始就被设计成一个可以逐渐应用功能的产品。与渐进式框架的意思类似,在原文中是对渐进式框架的一个解释说明。 ## 双向数据绑定 Vue 的核心功能便是双向数据绑定。 在这之前,我们获取到服务器数据之后,需要操作 DOM 元素来修改页面数据。当用户修改页面的内容后,也需要操作 DOM 元素来获取修改的内容。这些繁琐的操作使用开发一个大型项目几乎不可能。 而在 Vue 当中,我们可以仅仅修改一个数据,便能即时反应到页面当中。或者修改页面上的内容,对应的数据也会随之改变。这便是双向数据绑定。 <iframe src="https://codesandbox.io/embed/yan-shi-3rzl2?fontsize=14&hidenavigation=1&initialpath=%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A.html&module=%2F%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A.html&theme=light&view=preview" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="演示" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts" ></iframe>