为什么要浪费时间学习新的语言和框架，并冒着随时过时的风险？如果Java可以直接在浏览器中运行呢？在本文中，中级全栈Java程序员Niels Gorisse介绍了VertxUI的优势。
像大多数资深的Java程序员一样，我在2000年之前编写了我的第一行JavaScript代码。现在，经过十多年的浏览器革命，ECMAscript5 已成为标准：超过 97% 的浏览器支持它的使用。JavaScript 并非不足，但可以编译一段可在任何地方使用的 JavaScript 代码。JavaScript 正在成为一种体面的语言，具有类、异常、lambda 表达式、工作线程、包装器、注释、库管理等。
现在，JavaScript的许多新颖功能早已添加到Java中。在几乎所有情况下，这意味着多年来它看起来相当稳定和成熟
VertxUI 和 Fluent
VertxUI是一个100%的Java库。由于纯HTML和CSS足以构建网页，因此VertxUI不仅易于访问浏览器，而且还提供了一个名为Fluent的轻量级和流畅的API，它简化了仅使用代码重构HTML和CSS。Fluent使用与HTML标签对应的方式名称，并且这种方式的第一个参数始终是CSS类。所以 VertxUI 没有任何模板，它都是代码。使用 HTML，我们定义一个引导菜单，如下所示：
变量主体是从 Fluent 类的静态导出。同样，程序员也可以以相同的方式使用控制台、文档和窗口。
实际上，Java 源代码中的代码量略低于前面的 HTML 代码片段。它还演示如何在单击菜单项时调用 Java 代码。在我们的示例中，控制器：：someMethod 的一个实例负责处理风暴。
上面的代码片段中没有显示它，还有一个维护类模型列表的类存储。这些传统的MVC（模型-视图-控制器）设置不是必需的，在编译JUnit测试时很有用。
事实上，程序员也可以使用 lambda 表达式。例如，让我们创建一个引导窗体。模式 .css（） 和 .att（） 也用于显示它们的工作原理。这基本上需要编译 HTML 和 CSS：
必需的 HTML 代码段：
使用Fluent收集一些代码：
查看...型
当程序员想要修改DOM时，Fluent的真正实力就暴露出来了。更改尽可能高效地更新，与 ReactJS（来自 Facebook）相当，它确保当一个状态被修改时，其他列表不会完全重新呈现。
程序员可以使用 .add（） 创建 ViewOn。它有两个参数：初始模型（或对模型的引用）和将该模型转换为 Fluent 对象的方法。如：
结果
法典：
你可能已经注意到了syncPerson（）方法。这将重绘具有指向 Person 实体的链接的所有 ViewOn 对象。请注意，编写复杂的用户界面（如向导）特别容易，因为您只能以声明方式写下 UI 的外观，甚至嵌套 ViewOn 对象。
所有代码都是纯Java，所以如果你喜欢流媒体，那很好。 tbody – 与许多其他容器（如标签）一样，它需要一个 CSS 类和一个 Fluent 对象的列表或流。
查看...州
在前面的 Bootstrap 菜单示例中，当程序员单击它时，具有“active”类的 CSS 项目应切换到所选项目。这就是我们称之为“状态”的方式，这使得识别状态并将其视为不会保存到数据库中的实体变得容易，或者您可以使用 ViewOn 作为状态：
JUnit - 单元测试
由于Fluent内部有一个虚拟DOM，因此可以轻松用于JUnit测试，而无需启动浏览器。这是非常快的，因为JavaScript没有编译，但浏览器不是在后台启动和停止的。
在下一个示例中ecmascript 5浏览器，我们直接模拟控制器调用：
JUnit - 集成测试
随着项目的发展并开始使用外部JavaScript库，集成测试变得越来越重要。在Fluent中，程序员可以在具有“注册和运行”结构的浏览器中执行双语测试。运行时环境比Selenium具有更多的控制权，因为JavaScript和Java可以在一次测试中轻松运行和组合。
对于 Bootstrap 菜单示例，我们通过直接调用 controller.onMenuAbout（） 来模拟菜单。让我们看看前面更改“active”类内容的反例是否真的有效，Java到JavaScript编译正在发生：
请注意，此示例可能已加载到非 DOM 测试中并且运行得更快。
顶点X
程序员可以在任何前端软件中运行VertxUI，并且与VertX一起，它提供了多种功能，如FigWheely和POJOtraffic。VertxUI比VertX更容易使用：只需启动main（）并将浏览器指向 http://localhost。无需安装IDE插件，无需处理*.war或*.jar。
VertX 是完全异步的，类似于 Bounce，就像 JavaScript 一样。最大的区别在于，因为Java是一种非常结构化的语言，所以你永远不会在JavaScript中遇到反弹。当异常异步发生时，可能会在另一个类中调用另一种方式。
VertX-FigWheely
FigWheely是VertxUI的运行时助手。它通过浏览器使 WebSocket 保持打开状态，并在服务器上修改文件时接收通知。如果修改后的文件恰好是.java文件，图像将重新编译浏览器代码并通知浏览器。
它的工作方式类似于没有任何IDE插件的VertxUI，因为JavaScript的编译发生在（VertX）服务器启动并找到源代码时。在启动期间，还会生成索引.html，但也可以将其关闭。
VertX-POJO
VertxUI，以便服务器和浏览器之间的POJO流量用于ajax调用ecmascript 5浏览器，WebSocket，sockJS和VertX风暴总线。这意味着强类型流量，尽管下面使用了 JSON。让客户端和服务器使用相同的语言有一些不错的优势：当您想要添加列时，它可能只是向实体添加一行代码，向视图添加额外的“TD”行。
无论将来客户端和 JavaScript 语言发生什么，程序员都可以使用任何出色的 CSS 框架（如 Bootstrap）以非常成熟的语言创建特别好的可测试单页 Web 应用程序，这些应用程序由已建立的 VertX 服务器环境提供支持。
JavaScript 及其库将会增长，但这需要数年时间。为什么不一次选择一个好的框架来帮助编写干净整洁的代码呢？这就是VertxUI的想法！
版本： vue0.11，
vue0.12，vue1.0ecmascript 5浏览器， vue2.0
软件语言：JavaScript
初始和稳定版本：0.11、2.6.16
MVVM
Vue 的 MVVM 的概念可以分为三个部分：
数据/视图
数据 （VM）。
const app = new Vue({
el: '#main',
data: {
message: 1
}
})
视图 （V）。
{{ message }}
组件
官方定义：组件系统是 Vue 的另一个重要概念，因为它是一个比喻，允许我们使用大型、独立且通常可重用的组件构建小型应用程序，几乎任何类型的应用程序接口都可以体现为组件树。
组件是 Vue.js 最强大的功能之一ecmascript 5浏览器，它扩展了 HTML 元素以封装可重用的代码。在高层次上，组件是 Vue.js 编译器添加特殊功能的自定义元素。在个别情况下，组件也可以显示为使用 is 属性扩充本机 HTML 元素。
所有 Vue
组件也是 Vue 的实例。
Vue.component('todo-item', {
template: '兼容开发模式浏览器Vue
不支持 IE8 及更低版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但是，它支持所有兼容 ECMAScript 5 的浏览器。
基本原则：ES5 -> Object.defineProperty（）。
