常见的前端框架都有哪些（EasyUIMiniUIjQueryUIVue.js）
⽬录
EasyUI
EasyUI 是⼀种基于jQuery 的⽤户界⾯插件集合。easyui 为创建现代化，互动，JavaScript 应⽤程序，提供必要的功能。使⽤ easyui 你不需要写很多代码，你只需要通过编写⼀些简单 HTML 标记，就可以定义⽤户界⾯。优势：开源免费，页⾯也还说的过去。
easyUI ⼊门：
页⾯引⼊必要的 js 和 css 样式⽂件，⽂件引⼊顺序为：
1. <!-- 引⼊ JQuery -->
2. <script type="text/javascript"src="../jquery-easyui-1.4.1/jquery.min.js"></script>
3. <!-- 引⼊ EasyUI -->
4. <script type="text/javascript"src="../jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
5. <!-- 引⼊ EasyUI 的中⽂国际化 js，让 EasyUI ⽀持中⽂ -->
6. <script type="text/javascript"src="../jquery-easyui-1.4.1/locale/easyui-lang- zh_CN.js"></script>
7. <!-- 引⼊ EasyUI 的样式⽂件-->
8. <link rel="stylesheet"href="../jquery-easyui-1.4.1/themes/default/easyui.css"type="text/css"/>
9. <!-- 引⼊ EasyUI 的图标样式⽂件-->
10. <link rel="stylesheet"href="../jquery-easyui-1.4.1/themes/icon.css"type="text/css"/>
然后在页⾯写easyUI 代码就⾏，easyUI 提供了很多样式：
⽰例如下：
实现代码如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <title>Basic Dialog - jQuery EasyUI Demo</title>
6. <link rel="stylesheet"type="text/css"href="../../themes/default/easyui.css">
7. <link rel="stylesheet"type="text/css"href="../../themes/icon.css">
8. <link rel="stylesheet"type="text/css"href="../demo.css">
9. <script type="text/javascript"src="../../jquery.min.js"></script>
10. <script type="text/javascript"src="../../jquery.easyui.min.js"></script>
11. </head>
12. <body>
13. <h2>Basic Dialog</h2>
14. <p>Click below button to open or close dialog.</p>
15. <div >
16. <a href="javascript:void(0)"class="easyui-linkbutton"onclick="$('#dlg').dialog('open')">Open</a>
17. <a href="javascript:void(0)"class="easyui-linkbutton"onclick="$('#dlg').dialog('close')">Close</a>
18. </div>
19. <div id="dlg"class="easyui-dialog"title="Basic Dialog"data-options="iconCls:'icon-save'">
20. The dialog content.
21. </div>
22. </body>
23. </html> 24.
MiniUI
基于 jquery 的框架，开发的界⾯功能都很丰富。jQuery MiniUI - 快速开发 WebUI。它能缩短开发时间，减少代码量，使开发者更专注于业务和服务端，轻松实现界⾯开发，带来绝佳的⽤户体验。使⽤ MiniUI，开发者可以快速创建 Ajax ⽆刷新、 B/S 快速录⼊数据、CRUD、 Master-Detail、菜单⼯具栏、弹出⾯板、布局导航、数据验证、分页表格、树、树形表格等典型 WEB 应⽤系统界⾯。缺点：收费，没有源码，基于这个开发如果想对功能做扩展就需要他们的团队进⾏升级！
提供以下⼏⼤类控件：
表格控件树形控件
布局控件：标题⾯板、弹出⾯板、折叠分割器、布局器、表单布局器等
导航控件：分页导航器、导航菜单、选项卡、菜单、⼯具栏等。
表单控件：多选输⼊框、弹出选择框、⽂本输⼊框、数字输⼊框、⽇期选择框、下拉选择框、下拉树形选择框、下拉表格选择框、⽂件上传控件、多选框、列表框、多选框组、单选框组、按钮等
富⽂本编辑器
图表控件：柱状图、饼图、线形图、双轴图等。
jquery框架原理技术亮点：
快速开发：使⽤ Html 配置界⾯，减少 80%界⾯代码量。
易学易⽤：简单的API 设计，可以独⽴、组合使⽤控件。
性能优化：内置数据懒加载、低内存开销、快速界⾯布局等机制。
丰富控件：包含表格、树、数据验证、布局导航等超过 50 个控件。
超强表格：提供锁定列、多表头、分页排序、⾏过滤、数据汇总、单元格编辑、详细⾏、Excel 导出等功能。
第三⽅兼容：与ExtJS、jQuery、YUI、Dojo 等任意第三⽅控件⽆缝集成。浏览器兼容：⽀持IE6+、FireFox、Chrome 等。
跨平台⽀持：⽀持Java、.NET、PHP 等。
⽰例如下：
1. <ul id="tree1"class="mini-tree"url="../"
2.showTreeIcon="true"textField="text"idField="id"
3.allowDrag="true"allowDrop="true"
4.>
5. </ul>
jQueryUI
jQuery UI 是⼀套 jQuery 的页⾯ UI 插件，包含很多种常⽤的页⾯空间，例如 Tabs（如本站⾸页右上⾓部分） 、拉帘效果（本站⾸页左上⾓）、对话框、拖放效果、⽇期选择、颜⾊选择、数据排序、窗体⼤⼩调整等等⾮常多的内容。
技术亮点：
简单易⽤：继承 jQuery 简易使⽤特性，提供⾼度抽象接⼝，短期改善⽹站易⽤性。
开源免费：采⽤ MIT & GPL 双协议授权，轻松满⾜⾃由产品⾄企业产品各种授权需求。
⼴泛兼容：兼容各主流桌⾯浏览器。包括 IE 6+、Firefox 2+、Safari 3+、Opera 9+、Chrome 1+。轻便快捷：组件间相对独⽴，可按需加载，避免浪费带宽拖慢⽹页打开速度。
标准先进：⽀持 WAI-ARIA，通过标准 XHTML 代码提供渐进增强，保证低端环境可访问性。
美观多变：提供近 20 种预设主题，并可⾃定义多达 60 项可配置样式规则，提供 24 种背景纹理选择。度娘上搜jQueryUI 的api，其⽤法与 easyUI、MiniUI 都⼤同⼩异，此处将不再举例。
Vue.js
Vue.js (读⾳ /vjuː/，类似于 view) 是⼀套构建⽤户界⾯的渐进式框架。与其他重量级框架不同的是，Vue 采⽤⾃底向上增量开发的设计。Vue 的核⼼库只关注视图层，它不仅易于上⼿，还便于与第三⽅库或既有项⽬整合。另⼀⽅⾯，当与单⽂件组件和 Vue ⽣态系统⽀持的库结合使⽤时，Vue 也完全能够为复杂的单页应⽤程序提供驱动。
Vue.js 起步：
引⼊相应⽂件：
声明式渲染：
Vue.js 的核⼼是⼀个允许采⽤简洁的模板语法来声明式的将数据渲染进 DOM 的系统：
1. <!-- html ⽂件中 -->
2. <div id="app">
3. {{ message }}
4. </div>
<!-- js ⽂件中 -->
5. var app = new Vue({
6. el: '#app',
7. data: {
8. message: 'Hello Vue!' 9. }
10. })
通过浏览器查看效果图为：
创建 vue 实例：
每个 Vue 应⽤都是通过 Vue 函数创建⼀个新的 Vue 实例开始的，当创建⼀个 Vue 实例时，你可以传⼊⼀个选项对象。可以使⽤这些选项来创建你想要的⾏为。
<!-- js ⽂件中 -->
2. var vm = new Vue({
3. // 选项
4. })
实例⽣命周期：
每个 Vue 实例在被创建之前都要经过⼀系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到 DOM、在数据变化时更新DOM 等。同时在这个过程中也会运⾏⼀些叫做⽣命周期钩⼦的函数，给予⽤户机会在⼀些特定的场景下添加他们⾃⼰的代码。⽐如created 钩⼦可以⽤来在⼀个实例被创建之后执⾏代码：
<!-- js ⽂件中 -->
2. new Vue({
data: {
4. a: 1
5. },
6. created: function () {
7. // `this` 指向 vm 实例
8. console.log('a is: ' + this.a) 9. }
10. })
11. // => "a is: 1"
THANKS FOR WATCHING!

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。