用WijmoJS玩转您的Web应用 —— Vue.js

OnlyMyRailgun 发布于2019-08-22 18:09 / 2296人阅读

摘要：相反，我们将专注于将添加到用编写的简单应用程序中。使用创建应用程序。示例应用程序有两个组件应用程序和。除在全球率先支持外，现已全面应用于等主流框架中。

概述

在本文中，我们将展示如何将WijmoJS与NPM和Webpack一起使用来创建最流行的基于JavaScript应用程序框架的Web应用。本文主要关注Vue.js，它是一个可以在一个库和一个全功能框架之间自由扩展的生态系统，Vue.js是目前主流前端框架中最小且最不固定的一个。它允许您编写结合HTML，JS和CSS的传统HTML文件以及纯JavaScript或“vue”文件，以创建封装的可重用组件。点击下方链接，了解WijmoJS对Vue.js的支持(www.grapecity.com.cn/developer/wijmojs/vuejs)

在这里，我们不会详细介绍NPM，Webpack或Vue.js本身。这些工具都非常受欢迎，并且有完整的帮助文档，您可以阅读我们关于框架的技术博客(www.grapecity.com.cn/blogs)，以获得良好的概述。相反，我们将专注于将WijmoJS添加到用Vue.js编写的简单应用程序中。

在所有框架中创建和维护应用程序的基本步骤都是类似的：

l 安装适当的CLI（命令行界面实用程序）以生成，运行，维护和部署应用程序。

l 使用CLI创建应用程序。

l 使用NPM将Wijmo添加到应用程序。

l 导入您要使用的组件并添加适当的标记。

具体步骤如下：

第1步，创建一个新的Vue.js应用程序
我们将使用Visual Studio Code来创建一个新的Vue.js应用程序。

第2步，添加WijmoJS模块
Vue.js项目通常在具有“vue”扩展名的文件中定义组件。这些文件包含组件的HTML，JavaScript和CSS样式。类似React，标记和脚本被捆绑到JSX文件中。

示例应用程序有两个组件：“应用程序”和“HelloWorld”。第一个是主要组成部分。它在下面显示Vue.js图标和“HelloWorld”组件。

在VS Code中打开“src / components / HelloWorld.vue”文件，并开始编辑文件的HTML部分：

WijmoJS标签看起来很像Vue.js。Vue指令对应于WijmoJS控件或类，Vue属性对应于WijmoJS属性。

第3步，添加WijmoJS控件及其数据
现在让我们看一下HTML下的JavaScript代码部分：

通过代码导入WijmoJS样式和组件，然后导出一个对象，该对象包含要显示在屏幕上的消息以及要显示在控件中的数据。

第4步，更新样式表

现在按ctrl + S保存更改并切换回浏览器以查看更改的结果：

由于表格和图表绑定到同一个CollectionView，因此对表格中的数据所做的任何更改都会自动反映在图表中。例如，您可以单击列标题对数据进行排序或使用键盘编辑一些值。

总结

将WijmoJS集成到现代JavaScript应用程序中只需要使用NPM进行安装并从库中导入所需的组件即可。

WjimoJS确保您能够在不同的框架中使用完全相同的UI组件，以便可以更轻松地使用两个或更多的框架，或者未来在您的应用程序中任意切换框架。

关于WijmoJS

作为一款纯前端控件集，WijmoJS 秉承“快如闪电，触控优先”的设计理念，在提供优质服务和产品的同时，专注于企业应用开发，不断优化产品架构，与时俱进。除在全球率先支持 AngularJS 外，现已全面应用于 React、Vuejs、TypeScript 、Ionic 等主流框架中。

凭借先进的触控设计和全面的 AngularJS 支持，WijmoJS 的 FlexGrid 和图表控件更专注于顶级性能和零依赖性。灵活的 API 为用户提供易用、轻松的操作体验，全面满足开发所需，是构建企业应用程序最完整的纯前端控件集。

点击下方链接，查看Wijmo全部内容（www.grapecity.com.cn/developer/wijmojs）

私有云混合云 web应用防火墙实例有什么用用angularjs开发下一代web应用用python玩转数据分析 WijmoJS

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95559.html

用WijmoJS玩转您的Web应用 —— Ionic

摘要：在之前的文章中，我们已经介绍了使用与三大框架结合搭建您的应用程序。使用创建应用程序。扩展阅读用玩转您的应用用玩转您的应用用玩转您的应用近期活动问卷调查扬帆万里，因您前行使用反馈意见征集前言：在本文中，我们将着重介绍如何将WijmoJS与Ionic一起使用，来创建一款移动端支持优先、快捷高效的应用程序。在之前的文章中，我们已经介绍了使用WijmoJS与Angular、React、Vu...

fjcgreat 2019-08-22 18:17 评论0 收藏0
用WijmoJS玩转您的Web应用 —— Angular6

摘要：除在全球率先支持外，现已全面应用于等主流框架中。本文中，我们将专注于如何将添加到用编写的应用程序中。使用创建应用程序。接下来，我们定义适用于这些元素中托管的应用程序面板元素和控件的规则。往期精彩用玩转您的应用为什么选择WijmoJS？作为一款纯前端控件集，WijmoJS秉承快如闪电，触控优先的设计理念，在提供优质服务和产品的同时，专注于企业应用开发，不断优化产品架构，与时俱进。除在...

hedge_hog 2019-08-22 17:59 评论0 收藏0
用WijmoJS玩转您的Web应用 —— Angular6

摘要：除在全球率先支持外，现已全面应用于等主流框架中。本文中，我们将专注于如何将添加到用编写的应用程序中。使用创建应用程序。接下来，我们定义适用于这些元素中托管的应用程序面板元素和控件的规则。往期精彩用玩转您的应用为什么选择WijmoJS？作为一款纯前端控件集，WijmoJS秉承快如闪电，触控优先的设计理念，在提供优质服务和产品的同时，专注于企业应用开发，不断优化产品架构，与时俱进。除在...

Ku_Andrew 2019-08-05 14:09 评论0 收藏0
用WijmoJS玩转您的Web应用 —— React

摘要：关于作为一款纯前端控件集，秉承快如闪电，触控优先的设计理念，在提供优质服务和产品的同时，专注于企业应用开发，不断优化产品架构，与时俱进。灵活的为用户提供易用轻松的操作体验，全面满足开发所需，是构建企业应用程序最完整的纯前端控件集。前文回顾在《用 WijmoJS 玩转您的Web应用》系列文章中，我们已经介绍了Angular和Vue框架下 WijmoJS 的玩法。而今天，我们将展示如...

FleyX 2019-08-22 18:09 评论0 收藏0
Vue 2019开发者图谱

摘要：为了便于您更清晰的理解的体系架构，在这里我将为您展示年开发者知识图谱，它包含了所有开发过程中的关键部分。在数据展示前端导入导出图表面板数据绑定等场景无需大量代码开发和测试，可极大节省企业研发成本并降低交付风险。作为 Vue 的初学者，您或许已经听过很多关于它的专业术语了，例如：单页面应用程序、异步组件、服务器端呈现等，您可能还听过和Vue经常一起被提到的工具和库，如Vuex、Webp...

cgspine 2019-08-23 18:14 评论0 收藏0