领先的免费Web技术教程，涵盖HTML到ASP.NET

网站首页 > 知识剖析 正文

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

nixiaole 2025-08-02 20:57:38 知识剖析 1 ℃

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 控件的模块。例如：

<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 组件，快来试用吧！

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年，是全球最大的控件提供商，也是微软认证的金牌合作伙伴。

Tags：

猜你喜欢

最近发表
标签列表