1-1 vue介绍

vue介绍

神奇的前端框架——Vue.js

vuea1.png

• 一个框架的快速成长源于它有个强大的、活跃度很高的社区。

vuea2.png

前言

上帝说，小码哥的HTML5课程中得有Vue.js，于是就有了Vue.js这块课程！

Vue的作者：尤小右，真名：尤雨溪

vuea3.jpg

• Vue.js和React、Angularjs、Knockout、AvalonJS，我该用哪一个？
  • 不用纠结，因为前三个框架我们都会讲，企业里面要用哪一个，你就用哪一个；
  • Knockout：微软出品，可以说是MVVM的模型领域内的先驱，使用函数偷龙转凤，最短编辑长度算法实现DOM的同步，兼容IE6，实现高超，但源码极其难读，最近几年发展缓慢。
  • Vue：是最近几年出来的一个开源Javascript框架，语法精简，实现精致，但对浏览器的支持受限，最低只能支持IE9。
  • AvalonJS：是一个简单易用迷你的MVVM框架，由大神司徒正美研发。使用简单，实现明快。
  • React：React并不属于MVVM架构，但是它带来virtual dom的革命性概念，受限于视图的规模。
  • Angularjs：Google出品，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。入门容易上手难，大量避不开的概念也是很头疼的。

渐进式框架

• Angular，是强主张的，如果你用它，必须接受以下东西：
  • 必须使用它的模块机制
  • 必须使用它的依赖注入
  • 必须使用它的特殊形式定义组件（这一点每个视图框架都有，难以避免）
• 所以Angular是带有比较强的排它性的，如果你的应用不是从头开始，而是要不断考虑是否跟其他东西集成，这些主张会带来一些困扰

• vue是渐进的，没有强主张，你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用；还可以用它的视图，搭配你自己设计的整个下层用。

  
  

一、Vue简介

• Vue.js 是一个用于创建 Web 交互界面的库。它让你通过简单而灵活的 API 创建由数据驱动的 UI 组件。

• Vue.js是一款轻量级的、以数据驱动构建web界面的前端JS框架，它在架构设计上采用了MVVM（Model-View-ViewModel）模式，其中ViewModel是Vue.js的核心，它是一个Vue的实例，而这个实例又作用域页面上的某个HTML元素。

• 其核心在于通过数据驱动界面的更新和展示而非JS中通过操作DOM来改变页面的显示。

vuea4.jpeg

vuea5.png

上图的DOM Listeners和Data Bindings是数据驱动中实现数据双向绑定的关键，实际的 DOM 封装和输出格式都被抽象为了 Directives 和 Filters; 这也是Vue.js事件驱动的原理所在。

对于View而言，ViewModel中的DOM Listeners工具会帮助我们监听页面上DOM元素的变化，一旦有变化，Model中的数据也会发生改变；

对于Model而言，当我们操纵Model中的数据时，Data Bindings工具会帮助我们更改View中的DOM元素。

vuea6.png

• 此外，页面组件化也是Vue.js的核心，它提供了一种抽象，让我们可以用独立可复用的小组件来构建大型应用。
• 组件可以扩展HTML元素，封装可重用的HTML代码，我们可以将组件看作自定义的HTML元素。
  
  

a1.png

a2.png

vuea7.png

• 所以，我们搭建的任何一个界面你可以把其抽象成为一个组件树，充分的去复用它。