Vuejs教程-Vue.js教程

Vue.js教程提供了Vue.js的基本和高级概念。我们的Vue.js教程适用于初学者和专业人士。

Vue.js是一个开源的渐进式JavaScript框架，用于开发交互式的Web用户界面和单页应用程序（SPA）。Vue.js主要关注应用程序的视图部分，也称为前端开发。由于其轻松与其他项目和库集成，Vue.js正在日益受欢迎。它非常简单易用，即使初学者也可以轻松理解并开始构建自己的用户界面。

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

什么是Vue.js？

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

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

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

Vue主要用于前端开发，因此必须处理大量的HTML、JavaScript和CSS文件。Vue.js通过扩展HTML属性（称为指令）来简化HTML的功能。Vue.js提供了内置指令和许多用户定义的指令，以增强HTML应用程序的功能。

Vue.js的历史

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

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

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日	猎人X猎人
2.2	2017年2月26日	頭文字D
2.3	2017年4月27日	约瑟夫的奇妙冒险
2.4	2017年7月13日	银魂
2.5	2017年10月13日	Level E
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) }
})

过渡效果

Vue允许您在插入、更新或从DOM中移除项目时使用不同的过渡效果。