「B/S端开发」DevExtreme初级入门教程 - 支持TypeScript DevExpressDevExtremevueTypeScript
程序员文章站
2022-03-03 18:42:01
...
DevExtreme Vue 组件随 TypeScript 声明一起提供,Strict类型允许您在早期阶段捕获错误并使用代码完成和自动重构等功能。
以下代码显示了在 Vue 应用程序中使用带有DevExtreme组件的 TypeScript 的示例:
App.vue
<template> <div> <DxList :items="items" ref="list"> <template #item="{data}"> <Item :text="data.text" /> </template> </DxList> </div> </template> <script lang='ts'> import { Component, Vue } from 'vue-property-decorator'; import { DxList } from 'devextreme-vue/ui/list'; import Item from './components/Item.vue'; interface IListItemProps { text: string; } @Component({ components: { DxList, Item } }) export default class App extends Vue { public $refs: Vue['$refs'] & { list?: DxList, } = {}; public items: IListItemProps[] = [ { text: 'Item 1' }, { text: 'Item 2' }, { text: 'Item 3' } ]; } </script>
Item.vue
<template> <div @click="addCounter"> {{text}} was clicked {{counter}} times </div> </template> <script lang='ts'> import { Component, Prop, Vue } from 'vue-property-decorator'; @Component export default class Item extends Vue { @Prop() public text!: string; public counter: number = 0; public addCounter() { this.counter = this.counter + 1; } } </script>
支持的版本
DevExtreme拥有高性能的HTML5 / JavaScript小部件集合,使您可以利用现代Web开发堆栈(包括React,Angular,ASP.NET Core,jQuery,Knockout等)构建交互式的Web应用程序。从Angular和Reac,到ASP.NET Core或Vue,DevExtreme包含全面的高性能和响应式UI小部件集合,可在传统Web和下一代移动应用程序中使用。 该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。
DevExpress技术交流群5:742234706 欢迎一起进群讨论
推荐阅读
-
「B/S端开发」DevExtreme初级入门教程 - 用模板生成一个应用 DevExtremeVUEvue.jsB/S端开发
-
「B/S端开发」DevExtreme初级入门教程 - 用模板生成一个应用 DevExtremeVUEvue.jsB/S端开发
-
B/S项目开发框架DevExtreme初级入门教程 - 使用Ionic devextremedevexpressB/Sweb应用
-
「B/S端开发」DevExtreme初级入门教程(React篇) - 状态管理 DevExtremeReactjavascripthtml
-
「B/S端开发」DevExtreme初级入门教程 - Vue篇入门指南 DevExtremeVueVue UI触控式 UI 组件
-
「B/S端开发」DevExtreme初级入门教程 - 添加到Vue应用程序 B/SDevExtremejavascriptvuevue.js
-
B/S项目开发框架DevExtreme初级入门教程 - 使用Ionic devextremedevexpressB/Sweb应用
-
「B/S端开发」DevExtreme初级入门教程 - 支持TypeScript DevExpressDevExtremevueTypeScript
-
「B/S端开发」DevExtreme初级入门教程 - 主题配置 & 验证 DevExtremevueB/S
-
「B/S端开发」DevExtreme初级入门教程 - 配置应用菜单、工具栏 DevExtremeVuejavascriptB/S