UI组件库Kendo UI for Vue原生组件中文教程：入门指南（二）

本文主要为大家介绍如何开始使用Kendo UI for Vue的原生组件开发，欢迎下载最新版控件体验！

在本文中，您将通过构建一个包含 Grid、DropDownList、Window 和设计主题的小应用程序来学习如何使用

5. 添加Kendo UI for Vue DropDownList

现在您已经完成所有设置并准备就绪，可以开始使用Kendo UI for Vue组件了，从DropDownList组件开始。在此之前需要使用以下代码将已经安装的 DropDownList 组件导入到 src/App.vue 文件和 appdata/categories.json 文件中：

import { DropDownList } from '@progress/kendo-vue-dropdowns';import categories from './appdata/categories.json';

使用以下代码添加 DropDownList 组件：

export default {name: 'App',components: {'dropdownlist': DropDownList,},//..............

导入组件后，使用下面的代码将 DropDownList 绑定到类别列表。

<dropdownlist:data-items="categories":data-item-key="'CategoryID'":text-field="'CategoryName'"></dropdownlist>

DropDownList 的 data-items 属性指向对象或原始值的数组，在这种情况下，您使用的是对象数组，因此需要同时指定data-item-key和text-field属性。

您还可以使用 default-item 属性在未选择任何项目时向用户显示提示，默认项目应该有一个与文本字段名称匹配的字段。

要显示更多 DropDownList 的实际效果，请更新 src/App.vue 文件来使用以下代码。

<template><div id="app"><h1>Hello Kendo UI for Vue!</h1><p><dropdownlist:data-items="categories":data-item-key="'CategoryID'":text-field="'CategoryName'":default-item="defaultItems"@change="handleDropDownChange"></dropdownlist>&nbsp; Selected category ID: <strong>{{this.dropdownlistCategory}}</strong></p></div></template><script>import categories from './appdata/categories.json';import { DropDownList } from '@progress/kendo-vue-dropdowns';import '@progress/kendo-theme-default/dist/all.css';export default {name: 'App',components: {'dropdownlist': DropDownList,},data: function() {return {categories: categories,defaultItems: {CategoryID: null, CategoryName: "Product categories"},dropdownlistCategory: null}},methods: {handleDropDownChange (e) {this.dropdownlistCategory = e.target.value.CategoryID;}}}</script>

上面的代码还在 DropDownList 旁边呈现了所选类别的 ID，为此您可以在数据选项中定义一个 dropdownlistCategory 字段并实现一个 onChange 处理程序来设置它。

现在您已经看到了Kendo UI for Vue组件的基本样子，在接下来的教程中我们将讲解使用 Kendo UI for Vue Data Grid实现更复杂的东西。

Kendo UI for Vue | 下载试用

Kendo UI致力于新的开发，来满足不断变化的需求。Kendo UI for Vue使用旨在提高性能和丰富用户体验的Vue组件，帮助开发人员构建下一代应用程序。它是为Vue技术框架提供可用的Kendo UI组件，以便更快地构建更好的Vue应用程序。

Telerik_KendoUI产品技术交流群：726377843    欢迎一起进群讨论

了解最新Kendo UI最新资讯，请关注Telerik中文网！

来源：慧都