Vue前端框架01 前端基础知识和VUE简介

前端三要素

HTML（结构层）显示结构和内容

CSS（表现层）包含CSS预处理器（SASS、LESS（更基础，适于后端开发人员））

JavaScript（行为层）用原生JS按照ECMAScript标准开发，ES5全浏览器支持，ES6常用适用主流。另外有TypeScript，也就是微软的开源标准。
其中jquery简化dom操作但是dom操作频繁影响前端性能。适用的目的是为了兼容IE6、7、8。
而VUE则是渐进式JavaScript框架，具有逐步实现的特性，实现模块化开发、路由、状态管理。综合了Angular（模块化）和React（虚拟DOM）的优点。
VUE的UI框架使用的是ElementUI（饿了么出品）。
Babel：JS编译器、主要用于浏览器不支持ES特性，比如编译TypeScript。
WebPack：模块打包器，主要作用为打包、压缩、合并以及按序加载。

Vue简介

MVVM开发模式（Model-View-ViewModel）

简化用户界面的事件驱动编程方式，源自于经典的MVC模式。MVVM的核心是ViewModel层，ViewModel类似于观察者角色，Model负责后台业务逻辑和数据库，View负责显示页面内容。
View（HTML CSS Templates）
ViewMode（JavaScript Runtime Compiler）
Model（java业务逻辑层 数据库）
用户交互反馈给View，View和ViewModel双向绑定。
ViewModel向Model发ajax。
Model返回json数据。
优点：低耦合、可复用、独立开发、可测试。

Vue是什么

一套用于构建用户界面的渐进式框架，自底向上逐层应用。
Vue.js就是MVVM结构中ViewModel层的实现者。
不支持IE8的版本，因为IE8无法模拟ECMAScript5特性

为什么使用Vue.js

①轻量级，体积小，只有30多kb
②移动优先，更适合移动端，比如移动端的Touch事件。
③易上手，学习曲线平稳，文档齐全。
④拥有自己的独特功能（计算属性），吸取了Angular和React的长处。
⑤开源，社区活跃度高

Vue构造器

在ViewModel层使用new Vue构造Vue对象，选项对象可以包含，数据(data)、挂载元素(el)、方法(methods)、模版(template)、生命周期函数等等。