vue教程

一、Vue.js 教程

1. 背景

近年来，互联网前端产业发展迅速，出现了许多优秀的框架。

与此同时，这些框架正在逐步改变我们传统的前端开发方式。

谷歌的Angular JS、Facebook的React JS等等前端MVC框架的出现，模块化开发的普及和标准化，改变了原有的开发思路和标准。

同时，也使前端开发人员加快步伐，更新知识结构。2014年2月，前谷歌员工尤雨溪已经公开发布了其前端库Vue.js。今天，Vue.js在Github上收获了超过14.6万颗星星，Vue.js已经往3.0版本发展了。

越来越多的开发人员在实际的生产环境中使用Vue.js。

vue代码开源地址：https://github.com/vuejs/vue

2. vue是什么

定义

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。

Vue.js 被定义成一个用来开发 Web 界面的前端库，是个非常轻量级的工具。

Vue.js 本身具有响应式编程和组件化的特点。

响应式编程：

为了保持状态和视图的同步，这个在大多数前端 MV*（MVC/MVVM/MVW）框架，不管是早期的 backbone.js还是现在 AngularJS 都对这一特性进行了实现（也称之为数据绑定），但这几者的实现方式和使用方式都不相同。

相比而言，Vue.js 使用起来更为简单，也无需引入太多的新概念，声明实例 new Vue({ data : data })后自然对 data 里面的数据进行了视图上的绑定。修改 data 的数据，视图中对应数据也会随之更改。

组件化理念：

和 ReactJS 异曲同工——“一切都是组件”。

可以将任意封装好的代码注册成标签，例如：Vue.component('example', Example)，可以在模板中以 <example></example> 的形式调用。

如果组件抽象得合理，这在很大程度上能减少重复开发，而且配合Vue.js的周边工具vue-loader，我们可以将一个组件的CSS、HTML和Javascript都写在一个文件里，做到模块化的开发。

除此之外，Vue.js 也可以和一些周边工具配合起来，例如 vue-router 和 vue-resource，支持了路由和异步请求，这样就满足了开发单页面应用的基本条件。

更多请参考：vue是什么

3. 为什么要学习Vue.js

与AngularJS和ReactJS相比，Vue.js一直被称赞为轻量级且易于使用。

MVVM开发模型将前端从原始的DOM操作中释放出来。

我们不再需要花很多时间来维护视图和数据的统一，只需关注数据的变化，代码就变得更易于维护。

优点

不存在依赖关系；

轻便（25k min+gzip 72K min）；

适用范围广（大中小型项目，PC，移动端，混合开发）；

本土框架，社区非常活跃，对于国产的大家的热情度非常得高（主要还是东西本身好）；

学习成本低，语法升级平滑（Anguler1升级到2算得上新学一门语言了）；

双向数据绑定（所见即所得）；

语法简洁。

二、学习Vue.js的前置储备知识

HTML

CSS

JavaScript

三、Vue.js教程面向的学习人群

对 Vue.js 感兴趣但尚未使用的前端开发者。

对 Vue.js 处于实验阶段但尚未正式上线或使用规模还不大的开发者。

后端程序员

五、Vue.js的学习的目标

入门掌握Vue.js

实战并精通Vue.js

源码级掌控Vue.js

文章来源：https://www.weixue.wang/vue/vue-tutorial.html