01.概述
Initially released in 2014, Vue.js has experienced rapid adoption, especially in 2018. Vue is a popular framework within the developer community, thanks to its ease of use and flexibility. If you are looking for a great tool to build and ship excellent performant web applications to end users, Vue.js is the answer.
Vue.js 最初发布于2014年,自2018年起经历了快速的普及。Vue在开发者社区中非常受欢迎,这得益于它的易用性和灵活性。如果你正在寻找一个优秀的工具来构建并发布高性能的网络应用程序给最终用户,Vue.js 就是答案。
This chapter highlights the core concepts of Vue.js and walks you through the tools you need for your Vue.js development environment. It also explores helpful tools that make your Vue.js development process more manageable. By the end of the chapter, you will have a working environment with a simple Vue.js application ready to start your journey in learning Vue.js.
本章重点介绍了 Vue.js 的核心概念,并引导您了解构建 Vue.js 开发环境所需的工具。它还探讨了使 Vue.js 开发过程更易于管理的有用工具。到本章结束时,您将拥有一个带有简单 Vue.js 应用程序的工作环境,准备好开始您的 Vue.js 学习之旅。
02.什么是Vue.js
Vue.js, or Vue, means view in French; it is a JavaScript engine for building progressive, composable, and reactive user interfaces (UI) in frontend applications.
Vue.js,或者简称 Vue,在法语中意味着"视图";它是一个用于构建渐进式、可组合和响应式的用户界面(UI)的前端应用程序的 JavaScript 引擎。
Vue is written on top of JavaScript and offers an organized mechanism to structure and build a web application. It also acts as the trans-compiler (transpiler ) that compiles and translates Vue code (as a Single File Component, which we will discuss further in "Vue Single File Component Structure") into equivalent HTML, CSS, and JavaScript code in build time before deploying. In a standalone mode (with a generated script file), the Vue engine performs the code translation at run-time instead.
Vue 是基于 JavaScript 编写的,并提供了一种有组织的方式来构建和构建 Web 应用程序的结构。它还充当一个转编译器(transpiler),在部署之前,在构建时编译和翻译 Vue 代码(作为我们将在"Vue 单文件组件结构"中进一步讨论的单文件组件)成等效的 HTML、CSS 和 JavaScript 代码。在独立模式下(使用生成的脚本文件),Vue 引擎在运行时执行代码翻译。
Vue follows the MVVM (Model--View--ViewModel ) pattern. Unlike MVC (Model--View--Controller),1 the ViewModel is the binder that binds data between the View and Model. Allowing direct communication for the view and model progressively enables the component's reactivity.
Vue 遵循 MVVM(Model-View-ViewModel)模式。与 MVC(Model-View-Controller)模式不同,ViewModel 是绑定视图(View)和模型(Model)之间的数据的粘合剂。允许视图和模型之间直接通信,逐渐启用了组件的反应性。
在 MVC 模式中,模型(Model)负责管理数据和业务逻辑,视图(View)处理布局和显示,控制器(Controller)负责将命令路由到模型和视图部分。而在 Vue 的 MVVM 模式中,ViewModel 充当视图和模型之间的中介,它负责监听模型中数据的变化并将这些变化反映到视图中,同时也监听视图中用户的操作并将这些操作转化为对模型数据的修改。
这种模式使得 Vue 能够实现高效的数据绑定和组件化开发,从而提高开发效率和应用性能。
In short, Vue was created to focus only on the View layer but is incrementally adaptable to integrate with other external libraries for more complex usage.
简而言之,Vue 的创建初衷是专注于视图层(View layer),但它也可以逐步适应与其他外部库集成,以满足更复杂的使用需求。
Since Vue focuses solely on the View layer, it empowers the development of single-page applications (SPAs). SPAs can move quickly and fluidly while communicating data continuously with the backend.
由于 Vue 专注于视图层,它使得开发单页应用程序(SPAs)变得更加高效。单页应用程序可以在与后端持续进行数据通信的同时,快速且流畅地运行。
单页应用程序是一种 Web 应用程序的实现方式,它只加载一个 Web 文档,然后通过 JavaScript API(例如 Fetch)在需要显示不同内容时更新该单个文档的主体内容。这样,用户就可以在不从服务器加载整个新页面的情况下使用网站,这可以提高性能并提供更动态的体验,尽管这也带来了一些权衡的劣势,比如搜索引擎优化(SEO)的挑战、维护状态的额外工作、实现导航以及进行有意义的性能监控等。
The official website for Vue includes API documentation, installation, and primary use cases for reference.
Vue 的官方网站提供了 API 文档、安装指南以及主要用例的参考信息。这些资源对于开发者来说是非常宝贵的,可以帮助他们快速上手 Vue,了解如何使用 Vue 构建用户界面,并解决开发过程中可能遇到的问题。无论是新手还是有经验的开发者,都可以在官方网站上找到丰富的学习材料和社区支持。