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中移除项目时使用不同的过渡效果。
先决条件
在深入学习Vue.js之前,您必须具备HTML、CSS和JavaScript的基本知识。