当前位置:首页>Vue.js>Vue.js教程>Vue.js教程

Vue.js教程

作者:微学网发布时间:2019-08-08 05:16:24

Vue.js 教程

背景

近年来,互联网前端产业发展迅速,出现了许多优秀的框架。
与此同时,这些框架正在逐步改变我们传统的前端开发方式。

谷歌的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

Vue.js是什么

定义

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,我们可以将一个组件的CSSHTMLJavascript都写在一个文件里,做到模块化的开发。

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

更多请参考:vue是什么

为什么要学习Vue.js

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

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

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

优点

  1. 不存在依赖关系;

  2. 轻便(25k min+gzip 72K min);

  3. 适用范围广(大中小型项目,PC,移动端,混合开发);

  4. 本土框架,社区非常活跃,对于国产的大家的热情度非常得高(主要还是东西本身好);

  5. 学习成本低,语法升级平滑(Anguler1升级到2算得上新学一门语言了);

  6. 双向数据绑定(所见即所得);

  7. 语法简洁。

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

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

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

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

  • 后端程序员

Vue.js的学习的目标

  • 入门掌握Vue.js

  • 实战并精通Vue.js

  • 源码级掌控Vue.js