如何使用Wijmo控件创建VueJS应用程序?

如何使用Wijmo控件创建VueJS应用程序?

编码文章call10242025-03-29 13:09:3315A+A-

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


Wijmo 同样也非常紧凑,强大而且灵活。这两个类库配合的天衣无缝。

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

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

Wijmo 和 Vue

<script src="https://npmcdn.com/vue@1.0.25/dist/vue.js"></script>

<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>

<script src="scripts/app.js"></script>

现在您就可以在您的 Vue 应用程序中使用 Wijmo 组件,快来试用吧!

ComponentOne 产品线

Wijmo 是葡萄城 ComponentOne 产品线之一。ComponentOne 产品线包括 ComponentOne Studio(.Net控件集)、Wijmo(H5/JavaScript控件集)、Xuni(移动开发控件集)。 作为跨设备跨平台的控件集,ComponentOne 产品线的3大产品,能满足. NET、Web、移动等各种平台的高效开发。

免费试用

请通过以下方式联系葡萄城,获取 Wijmo 的免费试用版:

微信:GrapeCityDT

邮件:marketing.xa@grapecity.com

官网:wijmo.gcpowertools.com.cn

关于葡萄城控件

葡萄城是一家跨国软件研发集团,专注控件领域近30年,是全球最大的控件提供商,也是微软认证的金牌合作伙伴。

点击这里复制本文地址 以上内容由文彬编程网整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!
qrcode

文彬编程网 © All Rights Reserved.  蜀ICP备2024111239号-4