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是
open源渐进式JavaScript框架，用于开发交互式
Web用户界面和单页应用程序(SPA)。 Vue.js通常被称为Vue，发音为" view.js"或" view"。
什么是单页应用程序(SPA)？
单页应用程序或SPA是向用户提供非常流畅，反应灵敏，和类似于台式机应用程序的快速体验。单页应用程序在单页上包含菜单，按钮和块。当用户单击其中任何一个时，它会动态重写当前页面，而不是从服务器加载整个新页面。这就是其快速反应速度落后的原因。
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所有发行版本的列表Vue.js:
| 版本 |
发布日期 |
| 0.6 |
2013年12月8日 |
| 0.7 |
2013年12月24日 |
| 0.8 |
2014年1月27日 |
| 0.9 |
2014年2月25日 |
| 0.10 |
2014年3月23日 |
| 0.11 |
2014年11月7日 |
| 0.12 |
2015年6月12日 |
| 1.0 |
2015年10月27日 |
| 2.0 |
2016年9月30日 |
| 2.1 |
2016年11月22日 |
| 2.2 |
2017年2月26日 |
| 2.3 |
2017年4月27日 |
| 2.4 |
2017年7月13日 |
| 2.5 |
2017年10月13日 |
| 2.6 |
2019年2月4日 |
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) }
})
