java 前端技术选型(Vue.js+Element.ui)
1.Vue.js
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
官网地址:https://cn.vuejs.org/v2/guide/comparison.html
Vue特点:
- 构建用户界面的渐进式框架
- 使用 Virtual DOM
- 提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件
- 将注意力集中保持在核心库,而将其他功能如路由和全局状态管理交给相关的库。Vue 的路由库和状态管理库都是由官方维护支持且与核心库同步更新的
- [向上扩展]Vue 提供了 CLI 脚手架,能让你通过交互式的脚手架引导非常容易地构建项目。你甚至可以使用它快速开发组件的原型
- [向下扩展] 要学习 Vue,你只需要有良好的 HTML 和 JavaScript 基础。有了这些基本的技能,你就可以非常快速地通过阅读指南投入开发。
- DOM元素与实体对象的双向,单向绑定
Vue对象定义元素
- ele :DOM元素
- data :DOM元素绑定的实体模型
- methods:Vue对象中的方法
vue与Anglular.js 的比对
【数据绑定】:AngularJS 使用双向绑定,Vue 在不同组件间强制使用单向数据流。这使应用中的数据流更加清晰易懂。
【学习成本】:Angular 事实上必须用 TypeScript 来开发,因为它的文档和学习资源几乎全部是面向 TS 的
【运行时性能】:在 AngularJS 中,当 watcher 越来越多时会变得越来越慢,因为作用域内的每一次变化,所有 watcher 都要重新计算。并且,如果一些 watcher 触发另一个更新,脏检查循环 (digest cycle) 可能要运行多次。AngularJS 用户常常要使用深奥的技术,以解决脏检查循环的问题。有时没有简单的办法来优化有大量 watcher 的作用域。
Vue 则根本没有这个问题,因为它使用基于依赖追踪的观察系统并且异步队列更新,所有的数据变化都是独立触发,除非它们之间有明确的依赖关系。
2.前端组件Element.UI
ElementUI官网: https://element.eleme.io/#/zh-CN/component/installation
使用中的参考网站地址:http://sa.sogou.com/sgsearch/sgs_tc_news.php?req=MJYal9qKGNAye7nffF6LrGG-IIZGHiCxrT1QgNWPvhA=
特点:
- Element-Ul是
饿了么
前端团队推出的一款基于Vue.js 2.0
的桌面端UI框架,手机端有对应框架是Mint UI 。 - element-ui是一个ui库,它不依赖于vue。但是却是当前和vue配合做项目开发的一个比较好的ui框架。
- element-ui借用了bootstrap框架的思想,使用了栅格布局。它把单一的分栏分为24列。
- Container布局容器,当子元素中包含 el-header 或 el-footer 时,全部子元素会垂直上下排列,否则会水平左右排列。
- 组件比较成熟(三级联动,时间轴等复杂组件,在BootStrap中是不存在的 )
BootStrap简介:
前端开发框架,它由规范的css,javascript插件构成。
特点
简单灵活可用于架构流行的用户界面和交互接口的html、css、javascript工具集。
友好的学习曲线,卓越的兼容性,响应式设计,12列格网,样式向导文档。
自定义JQuery插件,完整的类库,基于Less等
Bootstrap 响应式布局使用体验。