网站为什么要改版,电商网站建设用php,建设局全称是什么,成都小程序制作工作室❤️作者主页#xff1a;IT技术分享社区 ❤️作者简介#xff1a;大家好,我是IT技术分享社区的博主#xff0c;从事C#、Java开发九年#xff0c;对数据库、C#、Java、前端、运维、电脑技巧等经验丰富。 ❤️个人荣誉#xff1a; 数据库领域优质创作者#x1f3c6;#x… ❤️作者主页IT技术分享社区 ❤️作者简介大家好,我是IT技术分享社区的博主从事C#、Java开发九年对数据库、C#、Java、前端、运维、电脑技巧等经验丰富。 ❤️个人荣誉 数据库领域优质创作者华为云享专家阿里云专家博主 ❤️个人博客IT技术分享社区 ❤️公众号/小程序IT技术分享社区 运营五年 ❤️好文章点赞 收藏 ⭐再看养成习惯 目录 一、简介 什么是 Vue 什么是 Element-UI Vue 与 Element-UI的关系 二、示例代码 1、HTML代码 2、JS文件内容 一、简介 Elementui它是由饿了么前端团队推出的基于 Vue 封装的 UI 组件库提供PC 端组件简化了常用组件的封装降低开发难度。 什么是 Vue Element一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。它是由饿了么前端团队推出的基于 Vue 封装的 UI 组件库提供了丰富的 PC 端组件简化了常用组件的封装大大降低了开发难度。 什么是 Element-UI Vue 是一套用于构建用户界面的渐进式 JavaScript 框架 开发者只需要关注视图层 它不仅易于上手还便于与第三方库或既有项目的整合。是基于 MVVMModel-View-ViewModel 即视图层-视图模型层-模型层设计思想。提供 MVVM 数据双向绑定的库专注于 UI 层面。 Vue 与 Element-UI的关系 1.Element-Ui 是基于 Vue 封装的组件库简化了常用组件的封装提高了重用性原则 2. Vue 是一个渐进式框架Element-Ui 是组件库。 二、示例代码 今天就给大家分享一下Element UI 多选框组用法笔记直接上代码 1、HTML代码 el-form-item label用户列表el-autocompleteclassinline-inputclearclearUserclearablev-modelparamData.userName:fetch-suggestionsquerySearchplaceholder请输入用户名selecthandleSelect/el-autocomplete
/el-form-item2、JS文件内容 var vue new Vue({data: {paramData: {userId: ,userName: },userList: []}created: function() {var self this;self.initUser();},mounted: function() {},methods: {},methods: {initUser: function(userName) {var self this;var queryParam {};$.ajax({url: xxx,contentType: application/json,data: JSON.stringify(queryParam),success: function(resultData) {if (resultData.success) {self.userList result.data;} else {self.userList [];}}});},handleSelect: function(item) {var self this;self.paramData.userName item.value;self.paramData.userId item.id;self.onSearch();},querySearch: function(queryString, cb) {var self this;var queryParam {};$.ajax({url: xxx,contentType: application/json,data: JSON.stringify(queryParam),success: function(resultData) {if (resultData.success) {cb(result.data);} else {cb([]);}}});},clearUser: function() {var self this;self.paramData.userName ;self.paramData.userId ;//重新加载数据列表}}
});
