Vue 是一套用于构建用户界面的渐进式框架,与其它 JS 框架不同,Vue 被设计为可以自底向上逐层应用,由于其核心库只关注视图层,因此 Vue 更易上手,且很容易与第三方库或既有项目整合,当其与现代化的工具链或各种支持类库相结合时,Vue 也能为复杂的单页应用提供驱动。

WijmoJS 前端开发工具包同样强大且灵活,因此,这两个类库可以配合的天衣无缝。

Vue 和 Angular 有什么不同?

Vue.js 的目标是以尽可能简单的 API 提供反应式数据绑定以及可组合的视图组件。当您将 Vue 和 Angular 进行对比时,这些目标就变得非常清晰:

  • Vue 使用组件作为构建应用程序的基本构件。组件和 Angular 中的“元素指令(element directive)”非常相似。Vue 也有一些指令,这些指令和 Angular 的“属性指令(attribute directive)”很相似。这种清晰的区分使得创建和管理组件和指令更加简单。
  • Vue 的组件可以容易地进行组合,实际上,Vue 的应用程序可以被看做一个组件树。每一个组件具有其自己隔离开的范围,可以作为组件的常规属性直接访问。这一点和 Angular 1.x 有所不同,其中的组件和控制器在很大程度上是独立的。
  • Vue 通过属性 setter 侦测数据的改变。当侦测到数据变化时,Vue 会异步地触发 DOM 更新。不存在任何的 dirty 检查以及 digest 周期。这一点将大大的提升了性能,但是更重要的一点,这么做将逻辑大大简化。您不需要做任何特殊的操作以便在异步操作之后触发更新,比如说在一个 Ajax 调用或者某个 TimeOut 操作之后。
  • Vue 的 HTML 标记语法和 Angular 的非常相似,但是更加一致。在 Vue 中,常规属性(attrubite)始终表示字面值。之前有一个冒号的 attribute 属性则是“动态的”,或者说通过表达式计算出的值。双向的 attribute 属性具有一个“.sync ”后缀。这一点和 Angular 1.x 中有所不同,按照指令作者的喜好,attribute 属性既可以是字面值,也有可能是表达式。

尽管存在这些差异,Vue 应用程序中所使用的标记语言仍然和 Angular 非常相似。

举个例子,这里是一段简单的 Vue 应用程序,在页面上显示一个 FlexGrid 控件:

Vue 和 Angular 有什么不同?

“ app ”标识符标记了第一个 div 元素为该应用程序的主要组件。当该页面加载时,此组件将显式地被应用程序创建。

下面的“wj-flex-grid” 元素封装了 FlexGrid 控件的 Vue 组件。该组件可以包含一个或多个的 “wj-flex-grid-column” 组件,以定义表格中显示的列。

请注意大多数的 “wj-flex-grid” 的 attribute 属性之前都有一个冒号,表示它们是动态的而不是一个字面值。表格的 “itemsSource” 属性的内容应当设置为应用程序的 “ data ” 变量,而不是设置为一个字符串 “ data ”

现在我们可以将其和一段完成了相同功能的 Angular 1.x 标记进行比较:

Vue和Angular有什么不同?

“ng-app” 标识符标记第一个 div 元素为应用程序的主要组件。它的存在将自动地引导 Angular 。

下面的 “wj-flex-grid”元素是一个 Angular 指令,封装了 FlexGrid 控件,包含了一个或多个 “ wj-flex-grid-column ” 指令,定义显示在表格上的列。

在 Angular 标记语言中,attribute 属性没有初始的冒号。 “ itemsSource ” 属性本身清楚该值是一个动态的值而不是一个字面值,因为指令作者认为只有这样才是有意义的。

同样,事件处理器 attribute 属性指定为函数调用,而不是仅仅靠函数名称即可指定(例如“ initGrid(s,e) ”,而不是仅仅指定“ initGrid ”)。忘记在时间处理器中指定参数是在书写 Angular 1.x 标记语言时常见的错误。

总而言之,您可以看到 Vue 和 Angular 1.x 应用程序之间所使用的标记语言是多么的相似。

如何在 Vue 应用程序中使用 WijmoJS

为了在您的 Vue 应用程序中使用 WijmoJS ,首先需要添加到 Vue 和 WijmoJS 的引用至您的页面,接下来需要包含 “ wijmo.vue.js ”模块,该模块定义了封装 WijmoJS 控件的模块。例如:

Vue和Angular有什么不同?

现在您就可以在您的 Vue 应用程序中使用 WijmoJS 组件。

“ wijmo.vue.js ” 文件没有包含在 WijmoJS 的正式发布包中,但是您可以从 github 上获取:

https://github.com/Bernardo-Castilho/WijmoVue

您可以在以下示例中看到并体验最终效果:

http://bernardo-castilho.github.io/WijmoVue/default.htm

我们期待您的反馈!

我们青睐 Vue ,目前 WijmoJS 已经官方地支持了 Vue 。如果您有任何的建议和需求,请向我们发回您的 反馈