Vue是一个类似Angular、React的应用程序框架,但是更简单和轻便。Vue 1.0.25压缩过后的JavaScript代码小于80k。而Angular 1.5.6 和 React 15.1.0 均相当于该尺寸的两倍以上。尽管其占用空间如此之小,Vue非常强大且灵活。这里您可以看到Vue和其他一些流行的JavaScript框架的对比。

Wijmo同样也非常紧凑,强大而且灵活。这两个类库配合的天衣无缝。您可以在这里读到更多关于Wijmo 5的内容。

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 应用程序 --> 
<div id="app" class="container">
这里是一个有着自动生成列的<b>FlexGrid</b>:
 
 <wj-flex-grid
  control="theGrid"
  :items-source="data"
  :items-source-changed="gridItemsChanged"
  :initialized="initGrid">
  <wj-flex-grid-column binding="name" header="Name"></wj-flex-grid-column>
  <wj-flex-grid-column binding="date" header="Date"></wj-flex-grid-column>
  <wj-flex-grid-column binding="sales" header="Sales"></wj-flex-grid-column>
  <wj-flex-grid-column binding="expenses" header="Expenses"></wj-flex-grid-column>
 </wj-flex-grid>

    Wijmo组件具有一个“control”伪属性,暴露该控件实例给其父组件,因此您可以在标记语言中使用它。
  例如,以上表格具有 <b>{{ theGrid.rows.length }}</b> 行.
 
</div>

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

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

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

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

<!—Angular 1.x 应用程序 --> 
<div ng-app="app" ng-controller="appCtrl">

    这里是一个有着自动生成列的 <b>FlexGrid</b> :
  
  <wj-flex-grid
    control="theGrid"
    items-source="data"
    items-source-changed="gridItemsChanged(s,e)"
    initialized="initGrid(s,e)">
    <wj-flex-grid-column binding="name" header="Name"></wj-flex-grid-column>
    <wj-flex-grid-column binding="date" header="Date"></wj-flex-grid-column>
    <wj-flex-grid-column binding="sales" header="Sales"></wj-flex-grid-column>
    <wj-flex-grid-column binding="expenses" header="Expenses"></wj-flex-grid-column>
  </wj-flex-grid>

       Wijmo组件具有一个“control”伪属性,暴露该控件实例给其父组件,因此您可以在标记语言中使用它。
       例如,以上表格具有 <b>{{ theGrid.rows.length }}</b> 行.
  
</div>

“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应用程序中使用Wijmo

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

<head>
    <title>Wijmo 和 Vue</title>
    <!-- Vue -->
    <script src="https://npmcdn.com/vue@1.0.25/dist/vue.js"></script>
    <!-- Wijmo -->
    <link href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css" rel="stylesheet"/>
    <script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
    <script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
    <script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
    <!—Wijmo/Vue 互操作 -->
    <script src="scripts/wijmo.vue.js"></script>
    <!-- 应用程序脚本和样式 -->
    <link href="styles/app.css" rel="stylesheet"/>
    <script src="scripts/app.js"></script>
</head>

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

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

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

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

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

我们期待您的反馈!

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

现在就开始试用吧!

30天产品试用下载。在您下载试用之后,我们的技术支持工程师会全力帮助您同步解决遇到的产品问题。