Vue.js 教程学习手册

收录于 2023-04-20 00:10:05 · English · بالعربية · Español · हिंदीName · 日本語 · Русский язык · 中文繁體

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: 'Page not found' }
const Home = { template: 'home page' }
const About = { template: 'about page' }
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) }
})

编程宝典