环境搭建

参考

Vue DevExtreme 环境搭建 - 掘金 (juejin.cn)

组件

按钮

创建一个按钮，并且绑定点击事件

<template>
      <DxButton
        text="Click me"
        :disabled="false"
        :width="366"
        @click="sayHelloWorld"
    />
</template>

<script setup>
import DxButton from 'devextreme-vue/button';
 
 const sayHelloWorld = () => {
     alert('Hello world!')
 }
</script>

条形图

<template>
  <DxChart
      :data-source="data">
      <DxTooltip
            :enabled="true"
            format="thousands"
        />
      <DxArgumentAxis :tick-interval="10" />
      <DxSeries type="bar" />
      <DxLegend :visible="false" />
  </DxChart>
</template>

<script setup>
import DxChart, {
  DxArgumentAxis,
  DxSeries,
  DxLegend,
  DxTooltip
} from 'devextreme-vue/chart';

const data = [{
  arg: 1990,
  val: 5320816667
}, {
  arg: 2000,
  val: 6127700428
}, {
  arg: 2010,
  val: 6916183482
}];
</script>

列表

<template>
  <DxList>
      <DxItem>
          <template #default>
              <h1>Available items</h1>
          </template>
      </DxItem>
      <DxItem
          v-for="item in listItems"
          :key="item.text"
          :badge="item.badge">
          <template #default>
              {{ item.text }}
          </template>
      </DxItem>
  </DxList>
</template>

<script setup>
import DxList, {
  DxItem
} from 'devextreme-vue/list';

const listItems = [{
  text: 'Cars',
  badge: '12'
}, {
  text: 'Bikes',
  badge: '5'
}];
</script>

提示框

<template>
  <DxButton
      text="OK"
      @click="okClicked"
  />
</template>

<script setup>
import DxButton from 'devextreme-vue/button';
import notify from 'devextreme/ui/notify';

const okClicked = (e) => {
  notify('The OK button was clicked')
}
</script>

单向绑定

即使值已经修改，也无法获取修改后的值

<template>
  <DxTextBox :value="bindingProperty" @click="click"/>
  <DxButton
        text="Click me"
        :disabled="false"
        :width="366"
        @click="click"
    />
</template>

<script setup>

import { ref } from "vue";

import DxButton from 'devextreme-vue/button';
import DxTextBox from 'devextreme-vue/text-box';

let bindingProperty = ref('Some value');

const click = ()=>{
  console.log(bindingProperty.value)
}

</script>

双向绑定

<template>
  <DxTextBox  v-model:value="bindingProperty" @click="click"/>
  <DxButton
        text="Click me"
        :disabled="false"
        :width="366"
        @click="click"
    />
</template>

<script setup>

import { ref } from "vue";

import DxButton from 'devextreme-vue/button';
import DxTextBox from 'devextreme-vue/text-box';

let bindingProperty = ref('Some value');

const click = ()=>{
  console.log(bindingProperty.value)
}

</script>

表单验证

<template>
  <DxValidationGroup>
      <DxTextBox v-model:value="email">
          <DxValidator>
              <DxRequiredRule message="Email is required" />
              <DxEmailRule message="Email is invalid" />
          </DxValidator>
      </DxTextBox>

      <DxTextBox v-model:value="password" mode="password">
          <DxValidator>
              <DxRequiredRule message="Password is required" />
          </DxValidator>
      </DxTextBox>

      <DxValidationSummary />

      <DxButton @click="validate" text="Submit" />
  </DxValidationGroup>
</template>

<script setup>
import DxTextBox from 'devextreme-vue/text-box';
import DxValidator, {
  DxRequiredRule,
  DxEmailRule
} from 'devextreme-vue/validator';
import DxValidationGroup from 'devextreme-vue/validation-group';
import DxValidationSummary from 'devextreme-vue/validation-summary';
import DxButton from 'devextreme-vue/button';

let email = undefined;
let password = undefined;

const validate = (params) => {
  let result = params.validationGroup.validate();
  if (result.isValid) {
      // the values are valid
      // submit and reset them
      // params.validationGroup.reset();
      console.log(result);
  }
}
</script>