【前端UI框架】

最新推荐文章于 2023-11-21 13:22:01 发布

么卡

最新推荐文章于 2023-11-21 13:22:01 发布

阅读量1k

点赞数 2

分类专栏：前端UI 文章标签：前端UI框架

本文链接：https://blog.csdn.net/weixin_43943548/article/details/91386642

版权

前端UI 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前言

|ू･ω･` )
哟，大家好，
因为最近要学EasyUI了，所以去找了一些有关EasyUI的信息。

这里先简单介绍下:EasyUI是一组基于jQuery的UI插件集合体

对，这个EasyUi是基于jQuery的嘛，jQuery我们也是挺清楚的啊，一个javaScript的库.
在这里插入图片描述

2005年8月，John Resig提议改进Prototype的"Behaviour"库

jQuery于

2006年1月14日，John正式宣布以jQuery的名称发布自己的程序库

在2007年7月，jQuery 1.1.3版发布的时候，jQuery的性能达到了Prototype、Mootools以及Dojo等同类JavaScript库的水平。
所以在这之后jQuery更是被广泛的运用了起来。

嘛，回到正题：
jQuery:一个javaScript库
jQuery EasyUI :一个基于jQuery的插件集合

查了一些资料，所以我大概会为大家带来这些Angularjs,Vue,React

Angular

在这里插入图片描述
参考地址：https://www.w3cschool.cn/angularjs/

我们得了解一下浏览器：

浏览器获取页面对应的HTML文本,将其解析为一个在浏览器内部使用的结构,对页面的内容进行布局,并在内容显示到屏幕上之前加上样式,所有这些工作都是在浏览器内部进行的。

AngularJS的开发团队将其描述为一种构建动态Web应用的结构化框架。

AngularJS使开发Web应用变得非常简单,同时也降低了构建复杂应用的难度。

AngularJS功能：AngularJS 是专门为应用程序设计的 HTML。

AngularJS 把应用程序数据绑定到 HTML 元素。
AngularJS 可以克隆和重复 HTML 元素。
AngularJS 可以隐藏和显示 HTML 元素。
ngularJS 可以在 HTML 元素”背后”添加代码。
AngularJS 支持输入验证

参考的实列：

<!doctype html>
<html ng-app>
<head>
<script src="angular-1.1.0.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="InvoiceCntl">
<b>Invoice:</b>
<br>
<br>
<table>
<tr><td>Quantity</td><td>Cost</td></tr>
<tr>
<td><input type="integer" min="0" ng-model="qty" required ></td>
<td><input type="number" ng-model="cost" required ></td>
</tr>
</table>
<hr>
<b>Total:</b> {{qty * cost | currency}}
</div>
</body>
</html>

在这里插入图片描述
好吧，最后说说他的历史
诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：

MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

Vue

在这里插入图片描述
参考地址：http://cn.vuejs.org/重点！！

Vue.js是一套构建用户界面的渐进式框架。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件

Vue.js 自身不是一个全能框架——它只聚焦于视图层。

参考实列代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <!--这是我们的View-->
        <div id="app">
            {{ message }}
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        // 这是我们的Model
        var exampleData = {
            message: 'Hello World!'
        }

        // 创建一个 Vue 实例或 "ViewModel"
        // 它连接 View 与 Model
        new Vue({
            el: '#app',
            data: exampleData
        })
    </script>
</html>

嘛，如果不懂得话，其实可以就是一种引入库，然后你用了之后，就可以实时的动态变化了
介绍：
Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。

React

在这里插入图片描述
参考地址：http://reactjs.cn/react/docs/why-react.html
开发背景：
React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。

React主要用于构建UI。你可以在React里传递多种类型的参数，如声明代码，帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。

参考代码：


varHelloMsg=React.createClass({
	render:function(){
	return <div>{'Hello'+this.props.name}</div>;
	}});
React.renderComponent(<HelloMsg name="Tom"/>,mountNode);

也可以使用class语法或函数的方式创建组件：

	import React from 'react'
    import ReactDOM from 'react-dom'
    
    class App extends React.Component{
    render(){
    return <div>helo {this.props.name}</div>
    }
    }
    ReactDOM.render(<App name='Tom'/>,document.getElementById('node'))
    或：
    import React from 'react';
    import ReactDOM from 'react-dom'
    const App = props =><div>hello {props.name}</div>;
    ReactDOM.render(<App name='Tom'/>,document.getElementById('node'))

最重要的是
为什么要学呢

使用组件化开发方式，符合现代Web开发的趋势
技术成熟，社区完善，配件齐全，适用于大型Web项目（生态系统健全）
由Facebook专门的团队维护，技术支持可靠
ReactNative - Learn once, write anywhere: Build mobile apps with React
使用方式简单，性能非常高，支持服务端渲染
React非常火，从技术角度，可以满足好奇心，提高技术水平；从职业角度，有利于求职和晋升，有利于参与潜力大的项目

总结

嘛，其实今天算我找的多了的┗( ▔, ▔ )┛
从刚开始的JQuery EasyUI 一个框架找起，然后就不知道为什么找到了和前端UI框架有关去了。。。。(｀ﾟДﾟ´)ゞ

至于为什么最后定了这三个，因为我感觉以后是有用的前台框架。
还有这个( • ̀ω•́ )✧http://cn.vuejs.org/

在这里插入图片描述

看了一下，差不多也明白了这些框架的主要作用了。就是可以动态的修改html上的代码，从而进行交互。

其次，这些框架跟一些大公司有关啊
Angular : 谷歌
React : FaceBook
Vue : 尤雨溪

有兴趣的可以看看这个(｀・ω・´)：听说尤雨溪在开发vue4.0？是谁煽动了前端圈的焦虑情绪

恩恩，今天就找到了这些，也许以后会写几章关于这些的博客也说不定。

Thanks♪(･ω･)ﾉ希望对大家有所帮助

么卡

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【前端UI框架】

目录前言AngularVueReact总结前言|ू･ω･` )哟，大家好，因为最近要学EasyUI了，所以去找了一些有关EasyUI的信息。这里先简单介绍下:EasyUI是一组基于jQuery的UI插件集合体对，这个EasyUi是基于jQuery的嘛，jQuery我们也是挺清楚的啊，一个javaScript的库.2005年8月，John Resig提议改进Prototype的"B...
复制链接

扫一扫