摘要:相反,我們將專注于將添加到用編寫的簡(jiǎn)單應(yīng)用程序中。使用創(chuàng)建應(yīng)用程序。示例應(yīng)用程序有兩個(gè)組件應(yīng)用程序和。除在全球率先支持外,現(xiàn)已全面應(yīng)用于等主流框架中。
概述
在本文中,我們將展示如何將WijmoJS與NPM和Webpack一起使用來(lái)創(chuàng)建最流行的基于JavaScript應(yīng)用程序框架的Web應(yīng)用。 本文主要關(guān)注Vue.js,它是一個(gè)可以在一個(gè)庫(kù)和一個(gè)全功能框架之間自由擴(kuò)展的生態(tài)系統(tǒng),Vue.js是目前主流前端框架中最小且最不固定的一個(gè)。它允許您編寫結(jié)合HTML,JS和CSS的傳統(tǒng)HTML文件以及純JavaScript或“vue”文件,以創(chuàng)建封裝的可重用組件。 點(diǎn)擊下方鏈接,了解WijmoJS對(duì)Vue.js的支持(www.grapecity.com.cn/developer/wijmojs/vuejs)
在這里,我們不會(huì)詳細(xì)介紹NPM,Webpack或Vue.js本身。這些工具都非常受歡迎,并且有完整的幫助文檔,您可以閱讀我們關(guān)于框架的技術(shù)博客(www.grapecity.com.cn/blogs),以獲得良好的概述。相反,我們將專注于將WijmoJS添加到用Vue.js編寫的簡(jiǎn)單應(yīng)用程序中。
在所有框架中創(chuàng)建和維護(hù)應(yīng)用程序的基本步驟都是類似的:
l 安裝適當(dāng)?shù)腃LI(命令行界面實(shí)用程序)以生成,運(yùn)行,維護(hù)和部署應(yīng)用程序。
l 使用CLI創(chuàng)建應(yīng)用程序。
l 使用NPM將Wijmo添加到應(yīng)用程序。
l 導(dǎo)入您要使用的組件并添加適當(dāng)?shù)臉?biāo)記。
具體步驟如下:第1步,創(chuàng)建一個(gè)新的Vue.js應(yīng)用程序
我們將使用Visual Studio Code來(lái)創(chuàng)建一個(gè)新的Vue.js應(yīng)用程序。
第2步,添加WijmoJS模塊
Vue.js項(xiàng)目通常在具有“vue”擴(kuò)展名的文件中定義組件。這些文件包含組件的HTML,JavaScript和CSS樣式。類似React,標(biāo)記和腳本被捆綁到JSX文件中。
示例應(yīng)用程序有兩個(gè)組件:“應(yīng)用程序”和“HelloWorld”。 第一個(gè)是主要組成部分。 它在下面顯示Vue.js圖標(biāo)和“HelloWorld”組件。
在VS Code中打開“src / components / HelloWorld.vue”文件,并開始編輯文件的HTML部分:
{{ msg }}
Here are some Wijmo controls for you to get started:
WijmoJS標(biāo)簽看起來(lái)很像Vue.js。Vue指令對(duì)應(yīng)于WijmoJS控件或類,Vue屬性對(duì)應(yīng)于WijmoJS屬性。
第3步,添加WijmoJS控件及其數(shù)據(jù)
現(xiàn)在讓我們看一下HTML下的JavaScript代碼部分:
// import Wijmo
import "wijmo/styles/wijmo.css";
import { WjFlexGrid } from "wijmo/wijmo.vue2.grid";
import { WjFlexChart } from "wijmo/wijmo.vue2.chart";
import { CollectionView } from "wijmo/wijmo";
// apply Wijmo license key
import { setLicenseKey } from "wijmo/wijmo";
setLicenseKey("your key goes here");
// export component
export default {
name: "HelloWorld", data: function () { return { msg: "Welcome to Your Vue.js App", data: getData() } }
}
function getData() {
var countries = "US,Germany,UK,Japan,Italy,Greece".split(","), data = []; for (var i = 0; i < countries.length; i++) { data.push({ country: countries[i], sales: Math.random() * 10000, expenses: Math.random() * 5000, downloads: Math.round(Math.random() * 20000), }); } return new CollectionView(data);
}
通過(guò)代碼導(dǎo)入WijmoJS樣式和組件,然后導(dǎo)出一個(gè)對(duì)象,該對(duì)象包含要顯示在屏幕上的消息以及要顯示在控件中的數(shù)據(jù)。
第4步,更新樣式表
.App-panel {
margin: 0 48pt;
}
.App-panel .wj-control {
display: inline-block; vertical-align: top; width: 400px; height: 300px;
}
現(xiàn)在按ctrl + S保存更改并切換回瀏覽器以查看更改的結(jié)果:
由于表格和圖表綁定到同一個(gè)CollectionView,因此對(duì)表格中的數(shù)據(jù)所做的任何更改都會(huì)自動(dòng)反映在圖表中。例如,您可以單擊列標(biāo)題對(duì)數(shù)據(jù)進(jìn)行排序或使用鍵盤編輯一些值。
總結(jié)將WijmoJS集成到現(xiàn)代JavaScript應(yīng)用程序中只需要使用NPM進(jìn)行安裝并從庫(kù)中導(dǎo)入所需的組件即可。
WjimoJS確保您能夠在不同的框架中使用完全相同的UI組件,以便可以更輕松地使用兩個(gè)或更多的框架,或者未來(lái)在您的應(yīng)用程序中任意切換框架。
關(guān)于WijmoJS作為一款純前端控件集,WijmoJS 秉承“快如閃電,觸控優(yōu)先”的設(shè)計(jì)理念,在提供優(yōu)質(zhì)服務(wù)和產(chǎn)品的同時(shí),專注于企業(yè)應(yīng)用開發(fā),不斷優(yōu)化產(chǎn)品架構(gòu),與時(shí)俱進(jìn)。除在全球率先支持 AngularJS 外,現(xiàn)已全面應(yīng)用于 React、Vuejs、TypeScript 、Ionic 等主流框架中。
憑借先進(jìn)的觸控設(shè)計(jì)和全面的 AngularJS 支持,WijmoJS 的 FlexGrid 和圖表控件更專注于頂級(jí)性能和零依賴性。靈活的 API 為用戶提供易用、輕松的操作體驗(yàn),全面滿足開發(fā)所需,是構(gòu)建企業(yè)應(yīng)用程序最完整的純前端控件集。
點(diǎn)擊下方鏈接,查看Wijmo全部?jī)?nèi)容(www.grapecity.com.cn/developer/wijmojs)
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/95559.html
摘要:在之前的文章中,我們已經(jīng)介紹了使用與三大框架結(jié)合搭建您的應(yīng)用程序。使用創(chuàng)建應(yīng)用程序。擴(kuò)展閱讀用玩轉(zhuǎn)您的應(yīng)用用玩轉(zhuǎn)您的應(yīng)用用玩轉(zhuǎn)您的應(yīng)用近期活動(dòng)問(wèn)卷調(diào)查揚(yáng)帆萬(wàn)里,因您前行使用反饋意見征集 前言: 在本文中,我們將著重介紹如何將WijmoJS與Ionic一起使用,來(lái)創(chuàng)建一款移動(dòng)端支持優(yōu)先、快捷高效的應(yīng)用程序。在之前的文章中,我們已經(jīng)介紹了使用WijmoJS與Angular、React、Vu...
摘要:除在全球率先支持外,現(xiàn)已全面應(yīng)用于等主流框架中。本文中,我們將專注于如何將添加到用編寫的應(yīng)用程序中。使用創(chuàng)建應(yīng)用程序。接下來(lái),我們定義適用于這些元素中托管的應(yīng)用程序面板元素和控件的規(guī)則。往期精彩用玩轉(zhuǎn)您的應(yīng)用 為什么選擇WijmoJS? 作為一款純前端控件集,WijmoJS秉承快如閃電,觸控優(yōu)先的設(shè)計(jì)理念,在提供優(yōu)質(zhì)服務(wù)和產(chǎn)品的同時(shí),專注于企業(yè)應(yīng)用開發(fā),不斷優(yōu)化產(chǎn)品架構(gòu),與時(shí)俱進(jìn)。除在...
摘要:關(guān)于作為一款純前端控件集,秉承快如閃電,觸控優(yōu)先的設(shè)計(jì)理念,在提供優(yōu)質(zhì)服務(wù)和產(chǎn)品的同時(shí),專注于企業(yè)應(yīng)用開發(fā),不斷優(yōu)化產(chǎn)品架構(gòu),與時(shí)俱進(jìn)。靈活的為用戶提供易用輕松的操作體驗(yàn),全面滿足開發(fā)所需,是構(gòu)建企業(yè)應(yīng)用程序最完整的純前端控件集。 前文回顧 在《用 WijmoJS 玩轉(zhuǎn)您的Web應(yīng)用》系列文章中,我們已經(jīng)介紹了Angular和Vue框架下 WijmoJS 的玩法。 而今天,我們將展示如...
摘要:為了便于您更清晰的理解的體系架構(gòu),在這里我將為您展示年開發(fā)者知識(shí)圖譜,它包含了所有開發(fā)過(guò)程中的關(guān)鍵部分。在數(shù)據(jù)展示前端導(dǎo)入導(dǎo)出圖表面板數(shù)據(jù)綁定等場(chǎng)景無(wú)需大量代碼開發(fā)和測(cè)試,可極大節(jié)省企業(yè)研發(fā)成本并降低交付風(fēng)險(xiǎn)。 作為 Vue 的初學(xué)者,您或許已經(jīng)聽過(guò)很多關(guān)于它的專業(yè)術(shù)語(yǔ)了,例如:?jiǎn)雾?yè)面應(yīng)用程序、異步組件、服務(wù)器端呈現(xiàn)等,您可能還聽過(guò)和Vue經(jīng)常一起被提到的工具和庫(kù),如Vuex、Webp...
閱讀 3198·2023-04-26 01:30
閱讀 665·2021-11-08 13:15
閱讀 1774·2021-09-24 10:35
閱讀 999·2021-09-22 15:41
閱讀 1930·2019-08-30 15:44
閱讀 593·2019-08-30 13:22
閱讀 1005·2019-08-30 13:06
閱讀 1197·2019-08-29 13:22