Vue.js 教程

Vue.js 教程提供了 Vue.js 的基础和高级概念。我们的 Vue.js 教程旨在服务于初学者和专业人士。

Vue.js 是一个开源的渐进式 JavaScript 框架，用于开发交互式Web用户界面和单页应用程序。Vue.js 主要专注于应用程序的视图部分，也称为前端开发。Vue.js 因为非常易于与其他项目和库进行集成而变得越来越流行。它安装和使用起来非常简单。即使初学者也可以轻松理解并开始构建自己的用户界面。

在本教程中，您将学习什么是 Vue.js 、如何安装 Vue.js、Vue.js 实例、组件、属性、绑定、事件、渲染、指令、路由、混合、渲染函数等。

什么是 Vue.js?

Vue.js是一个用于开发交互式Web 用户界面和单页应用程序（SPA）的开源渐进式JavaScript 框架。Vue.js通常被称为Vue，发音为“view.js”或“view”。

Vue.js 教程

什么是单页应用程序（SPA）？

单页应用程序或SPA是一种Web应用程序或网站，为用户提供了类似于桌面应用程序的非常流畅、反应迅速和快速的体验。单页应用程序包含一个菜单、按钮和单个页面上的区块。当用户单击其中任何一个时，它会动态地重写当前页面，而不是从服务器加载整个新页面。这就是它反应快的原因。

Vue主要是为前端开发而开发的，因此必须处理大量的 HTML、JavaScript和CSS文件。Vue.js 使用户可以使用名为指令的HTML属性扩展HTML。Vue.js 提供了内置指令和许多用户定义的指令，以增强 HTML 应用程序的功能。

Vue.js 的历史

Vue.js由 Evan You 创建，当时他在使用 AngularJS 在Google的项目中工作。他提取了 AngularJS 的一些部分，并构建了一个轻量级的 JavaScript 框架，随后发布为 Vue.js。

Vue.js 的第一个版本于2014年2月发布，现在由他和其他活跃核心团队成员（如 Netlify 和 Netguru）进行维护。

Vue.js因为非常容易集成其他项目和库而变得越来越流行。它安装和使用起来非常简单。即使初学者也可以轻松理解并开始构建自己的用户界面。

Vue.js所有发布版本

以下是所有 Vue.js 发布版本列表:

版本	发行日期	版本标题
0.6	2013年12月8日	N/A
0.7	2013年12月24日	N/A
0.8	2014年1月27日	N/A
0.9	2014年2月25日	Animatrix
0.10	2014年3月23日	Blade Runner
0.11	2014年11月7日	Cowboy Bebop
0.12	2015年6月12日	Dragon Ball
1.0	2015年10月27日	Evangelion
2.0	2016年9月30日	Ghost in the Shell
2.1	2016年11月22日	Hunter X Hunter
2.2	2017年2月26日	Initial D
2.3	2017年4月27日	JoJo’s Bizarre Adventure
2.4	2017年7月13日	Kill la Kill
2.5	2017年10月13日	Level E
2.6	2019年2月4日	Sword Art Onlin: Alicization## Vue.js的特点

以下是Vue.js最突出的特点列表：

组件

Vue.js的组件是该框架最重要的特性之一。它们用于扩展基本的HTML元素以封装可重用的代码。您可以在Vue.js应用程序中创建可重用的自定义元素，以后可在HTML中重用。

模板

Vue.js提供基于HTML的模板，可以用于将渲染的DOM与Vue实例的数据绑定。所有Vue模板都是有效的HTML，可以由符合规范的浏览器和HTML解析器解析。Vue.js将模板编译为虚拟DOM渲染函数。Vue在更新浏览器之前在虚拟DOM内存中渲染组件。Vue还可以在更改应用程序的状态时计算重新渲染的最小组件数量，并应用最少量的DOM操作。

响应性

Vue提供了一个响应系统，该系统使用普通的JavaScript对象并对重新渲染进行优化。在此过程中，每个组件都跟踪其反应依赖项，因此系统精确知道何时以及哪些组件需要重新渲染。

路由

通过vue-router的帮助实现页面间的导航。您可以使用官方支持的vue-router库来构建您的单页应用程序，或者如果只需要简单的路由且不想使用具有完整功能的路由器库，则可以通过以下方式动态呈现页面级组件：

const NotFound = { template: '<p>Page not found</p>' }
const Home = { template: '<p>home page</p>' }
const About = { template: '<p>about page</p>' }
const routes = {
  '/': Home,
  '/about': About
}
new Vue({
  el: '#app',
  data: {
    currentRoute: window.location.pathname
  },
  computed: {
    ViewComponent () {
      return routes[this.currentRoute] || NotFound
    }
  },
  render (h) { return h(this.ViewComponent) }
})