DevExtreme初级入门教程（Vue篇）：支持TypeScript

以下代码显示了在 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';@Componentexport default class Item extends Vue {@Prop() public text!: string;public counter: number = 0;public addCounter() {this.counter = this.counter + 1;}}</script>

支持的版本

DevExtreme | 下载试用

DevExpress技术交流群5：742234706      欢迎一起进群讨论

DevExpress线上公开课主题票选火热开启，主题由你来定！点击填写问卷