Vue DevExtreme 组件语法

环境搭建
参考

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

组件

按钮

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

      



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

条形图

  
      
      
      
      
  



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

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

列表

  
      
          
              Available items
          
      
      
          
              {{ item.text }}
          
      
  



import DxList, {
  DxItem
} from 'devextreme-vue/list';

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

提示框

  



import DxButton from 'devextreme-vue/button';
import notify from 'devextreme/ui/notify';

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

单向绑定

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

  
  




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)
}

双向绑定

  
  




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)
}

表单验证

  
      
          
              
              
          
      

      
          
              
          
      

      

      
  



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);
  }
}