Kendo UI致力于新的开发来满足不断变化的需求。Kendo UI for Vue使用旨在提高性能和丰富用户体验的Vue组件帮助开发人员构建下一代应用程序。它是为Vue技术框架提供可用的Kendo UI组件以便更快地构建更好的Vue应用程序。购物程序可以帮助用户追踪购买商品今天将为大家介绍如何使用响应式UI组件​​​​​​​Kendo UI for Vue来构建购物应用程序。在本文中我们将学习什么是​​​​​​​Kendo UI以及如何使用Vue.js构建快速高效的购物应用程序。先决条件开发者必须具备使用Vue的基本知识并且熟悉创建Vue项目。引入Kendo UIKendo UI是一个JavaScript组件库用于构建一个完全交互式和高性能的网站它由四个UI库组成——Vue, Angular, React 和 jQueryKendo UI能创建移动、Web和桌面用户创建应用程序。Kendo UI有可配置的组件来完成Web应用程序创建它有很全的帮助文档包含了开发者想要在项目中实现的组件和功能的许多代码示例和演示。创建Vue项目接下来我们一起看看如何在项目中使用Kendo UI for Vue第一步是创建应用程序。用Vue创建一个项目使用下面的命令vue create shopping-app要运行服务器使用下面的命令Npm run serveKendo UI for Vue的设置和安装要设置和安装Kendo UI请访问​​​​​​​​​​​​​​Kendo UI for Vue并向下滚动到名为“All Vue Components”的部分接下来要选择用于项目的组件。在本文中我们将在应用程序中使用card组件。安装要安装card组件使用下面的命令npm install --save progress/kendo-vue-layout progress/kendo-vue-intl安装组件包后下一步是为安装的组件安装CSS样式(主题)要安装它使用下面的命令npm install --save progress/kendo-theme-default在安装card布局后要安装组件的许可授权密钥使用下面的命令npm install --save progress/kendo-licensing设置现在已经成功安装了包下一步是设置card的布局和主题。为此我们创建Vue组件CardComponent.vue并导入脚本标记中的包。script import { Card, CardHeader, CardBody, CardTitle, CardFooter, } from progress/kendo-vue-layout; import progress/kendo-theme-default; import { Button } from progress/kendo-vue-buttons; export default { components:{ card: Card, cardHeader: CardHeader, cardBody: CardBody, cardTitle: CardTitle, cardFooter: CardFooter, kbutton: Button } } /script在导入需要的所有包之后将创建我们的卡片。template card stylewidth: 300px; margin: auto; cardHeader cardTitleShopping List span classk-icon k-i-calendar/span/cardTitle /cardHeader cardBody p Shopping Items /p /cardBody cardFooter span kbutton :theme-colorprimaryAdd List/kbutton /span /cardFooter /card /template下面是我们的应用程序应该是什么样的示例获取列表项本节将使用Vue中的for循环获取我们的项目接下来看看下面的示例cardBody div classlist li v-for(list, index) in lists :keyindex div classform-box input typecheckbox v-modellist.checked classinput-box / label classlabel {{ list.text }} /label span classk-icon k-i-cart/span /div /li /div /cardBody下面是应用程序在获取我们的项目后的输出创建一个新的列表项目前我们已经获取并显示了项目下一步是创建一个新的列表用户可以在其中向购物列表中添加更多项目。要做到这一点我们将创建一个输入和按钮见下面的代码cardFooter classfooter-section div classcol-xs-12 col-md-6 example-col KInput :style{ width: 230px } v-modelcurrentList v-on:keyup.enteraddList /KInput /div div classcol-xs-12 col-md-6 example-col kbutton :theme-colorprimary :style{ width: 100px } clickaddList Add List/kbutton /div /cardFooter在这个例子中我们创建一个返回空列表的数据data() { return { currentList: , }; },函数addList将添加到购物列表应用程序中的新项目推送。methods: { addList() { this.lists.push({ text: this.currentList, checked: false }); this.currentList ; }, },删除列表项我们已经了解了如何向购物清单中添加新项目下一步是添加一个delete list函数将从它的索引中删除一个列表如下所示span classk-icon k-i-trash v-on:clickremoveList(index)/span我们将创建一个名为removeList的函数它将使用索引从列表中删除一个项目。请看下面的代码removeList(index) { this.lists.splice(index, 1); },最后一步是check函数它帮助我们跟踪已购买的商品和未购买的商品创建li v-for(list, index) in lists :keyindex :class{ removed: list.checked } div classform-box input typecheckbox v-modellist.checked classinput-box / /div /li最后让我们看看应用程序的整体功能是什么样子的。