常见的前端框架有哪些？零基础入门到精通，收藏这篇就够了-编程实验室

EasyUI

EasyUI是一种基于jQuery的用户界面插件集合。easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。优势**：开源免费****，页面也还说的过****去。**

easyUI入门：

页面引入必要的js和css样式文件，文件引入顺序为：

zh_CN.js">

```

```

type=“text/css”/>

<!-- 引入EasyUI的图标样式文件-->

然后在页面写easyUI代码就行，easyUI提供了很多样式：

实现代码如下：

Basic Dialog - jQuery EasyUI Demo
Basic Dialog
Click below button to open or close dialog.
<a href=“javascript:void(0)” class=“easyui-linkbutton”

οnclick=“$(‘#dlg’).dialog(‘open’)”>Open

<a href=“javascript:void(0)” class=“easyui-linkbutton”

οnclick=“$(‘#dlg’).dialog(‘close’)”>Close

The dialog content.
MiniUI

基于 jquery 的框架，开发的界面功能都很丰富。jQuery MiniUI - 快速开发 WebUI。它能缩短开发时间，减少代码量，使开发者更专注于业务和服务端，轻松实现界面开发，带来绝佳的用户体验。使用 MiniUI，开发者可以快速创建 Ajax 无刷新、 B/S 快速录入数据、 CRUD、 Master-Detail、菜单工具栏、弹出面板、布局导航、数据验证、分页表格、树、树形表格等典型 WEB 应用系统界面。缺点：收费**，没有源码，基于这个开发如果想对功能做扩展就需要找他们的团队进行升级！**

提供以下几大类控件：

表格控件

树形控件
布局控件：标题面板、弹出面板、折叠分割器、布局器、表单布局器等导航控件：分页导航器、导航菜单、选项卡、菜单、工具栏等。

表单控件：多选输入框、弹出选择框、文本输入框、数字输入框、日期选择框、下拉选择框、下拉树形选择框、下拉表格选择框、文件上传控件、多选框、列表框、多选框组、单选框组、按钮等
富文本编辑器

图表控件：柱状图、饼图、线形图、双轴图等。

技术亮点**：**

快速开发：使用Html配置界面，减少80%界面代码量。

易学易用：简单的API设计，可以独立、组合使用控件。

性能优化：内置数据懒加载、低内存开销、快速界面布局等机制。

丰富控件：包含表格、树、数据验证、布局导航等超过50个控件。

超强表格：提供锁定列、多表头、分页排序、行过滤、数据汇总、单元格编辑、详细行、Excel导出等功能。

第三方兼容：与ExtJS、jQuery、YUI、Dojo等任意第三方控件无缝集成。浏览器兼容：支持IE6+、FireFox、Chrome等。

跨平台支持：支持Java、.NET、PHP等。

实现代码如下：

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 的系统：

{{ message }}

var app = new Vue({
el: ‘#app’,
data: {
message: ‘Hello Vue!’
}
})

创建vue实****例：
每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的，当创建一个 Vue 实例时，你可以传入一个选项对象。可以使用这些选项来创建你想要的行为。

var vm = new Vue({
// 选项
})

实例生命周期**：**
每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到 DOM、在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，给予用户机会在一些特定的场景下添加他们自己的代码。比如 created 钩子可以用来在一个实例被创建之后执行代码：

new Vue({
data: {
a: 1
},
created: function () {
// `this` 指向 vm 实例
console.log('a is: ’ + this.a)
}
})
// => “a is: 1”
AngularJS （2017-11-23-lyq）

AngularJS 是google 开发者设计的一个前端开发框架，它是由是由JavaScript 编写的一个JS框架。通常它是

用来在静态网页构建动态应用不足而设计的。

AngularJS 特点如下：

1、数据绑定： AngularJS是数据双向绑定。

2、 MVVM（Model-View-ViewModel）模式： Model 简单数据对象，View 视图（如HTML,JSP等），

ViewModel是用来提供数据和方法，和View 进行交互。这种设计模式使得代码解耦合。

3、依赖注入：AngularJS支持注入方式把需要的对象，方法等注入到指定的对象中。

4、指令： AngularJS内部自带各种常用指令，同时也支持开发者自定义指令。

5、HTML模板和扩展HTML： AngularJS可以定义与HTML兼容的自定义模板。

AngularJS 的Api：
AngularJS 提供了很多功能丰富的组件，处理核心的 ng 组件外，还扩展了很多常用的功能组件，如ngRoute(路由)，ngAnimate(动画)，ngTouch(移动端操作)等，只需要引入相应的头文件，并依赖注入你的工作模块，则可使用。

ng (core module)：AngularJS的默认模块，包含AngularJS的所有核心组件。

指令(directive)

这是指令的核心集合，你可以在你的模板代码中使用它们来构建一个AngularJS应用。

一些例子包括:ngClick,ngInclude, ngRepeat,等等

服务(service)

这是服务的核心集合，依赖注入后可在你的应用中使用。

一些例子包括: $compile,$http, $location,等等

过滤器(filter)

在组件模块中的核心过滤器是用来转换模板数据。

一些例子包括: filter, date, currency,lowercase, uppercase 等等

全局函数

(function)

核心的全局函数作为angularjs对象。这些核心功能在您的应用程序的原生的JavaScript操作有用。

一些例子包括: angular.copy(), angular.equals(), angular.element()等等

ngRoute：AgularJS的路由模块，你能使用ngRoute结合"#"定义你的地址访问。引入angular-route.js文件，然后在你当前的工作模块依赖注入ngRoute模块。

服务(service)

下面这些服务用作AngularJS的路由管理。

$routeParams - 解析返回路由中带有的参数
$route - 用于构建各个路由的url、view、controller这三者的关系 $routeProvider - 提供路由配置

指令(Directive)

指令ngView 提供不同路由模板插入的视图层

ngAnimate：AngularJS的动画模块，使用ngAnimate各种核心指令能为你的应用程序提供动画效果。

动画可使用css或者JavaScript回调函数。引入angular-animate.js文件，然后在你当前的工作模块依赖注

入ngAnimate模块。

服务(service)

使用$animate 来在你的指令代码中触发动画操作。

CSS-based animations

按照nganimate的CSS命名结构参考CSS转换/关键帧动画在AngularJS。

一旦定义，动画可以通过引用CSS在HTML模板代码触发。

JS-based animations

使用module.animation() 来注册一个 JavaScript动画。

一旦注册，动画可以通过引用CSS在HTML模板代码触发。

ngAria：帮助制作 AngularJS 自定义组件的新模块。引入angular-aria.js 文件，然后在你当前的工

作模块依赖注入ngAria模块。

服务(service)

这是服务的核心集合，依赖注入后可在你的应用中使用。