外国网站建设公司,公众号的微网站怎么做,同时部署WordPress和django,网站开发和网络工程哪个好Element ui 就是基于vue的一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面。
官网: https://element.eleme.io/#/zh-CN 安装Element UI
vue init webpack element(项目名)确认项目是否构建成功#xff1a;进入到项目的根路径
执行 npm start
访问 h…Element ui 就是基于vue的一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面。
官网: https://element.eleme.io/#/zh-CN 安装Element UI
vue init webpack element(项目名)确认项目是否构建成功进入到项目的根路径
执行 npm start
访问 http://localhost:8080/ 在vue脚手架项目中安装elementui
# 1.下载elementui的依赖npm i element-ui -S# 2.在【main.js】中指定当前项目中使用elementuiimport ElementUI from element-ui;import element-ui/lib/theme-chalk/index.css;//在vue脚手架中使用elementuiVue.use(ElementUI);默认样式按钮
el-rowel-button默认按钮/el-buttonel-button typeprimary主要按钮/el-buttonel-button typesuccess成功按钮/el-buttonel-button typeinfo信息按钮/el-buttonel-button typewarning警告按钮/el-buttonel-button typedanger危险按钮/el-button
/el-row简洁按钮【plain】
el-rowel-button plain朴素按钮/el-buttonel-button typeprimary plain主要按钮/el-buttonel-button typesuccess plain成功按钮/el-buttonel-button typeinfo plain信息按钮/el-buttonel-button typewarning plain警告按钮/el-buttonel-button typedanger plain危险按钮/el-button
/el-row圆角按钮【round】
el-rowel-button round圆角按钮/el-buttonel-button typeprimary round主要按钮/el-buttonel-button typesuccess round成功按钮/el-buttonel-button typeinfo round信息按钮/el-buttonel-button typewarning round警告按钮/el-buttonel-button typedanger round危险按钮/el-button
/el-row图标按钮【icon】
el-rowel-button iconel-icon-search circle/el-buttonel-button typeprimary iconel-icon-edit circle/el-buttonel-button typesuccess iconel-icon-check circle/el-buttonel-button typeinfo iconel-icon-message circle/el-buttonel-button typewarning iconel-icon-star-off circle/el-buttonel-button typedanger iconel-icon-delete circle/el-button
/el-row按钮组使用
el-button-groupel-button typeprimary iconel-icon-back上一页/el-buttonel-button typeprimary iconel-icon-right下一页/el-button
/el-button-group在element ui中所有组件都是 el-组件名称 方式进行命名在element ui中组件的属性使用都是直接将属性名属性值方式写在对应的组件标签上 文字链接组件
el-link target_blank hrefhttp://www.baidu.com 默认链接/el-link
el-link typeprimary:underlinefalse默认链接/el-link
el-link typesuccess disabled默认链接/el-link
el-link typeinfo iconel-icon-platform-eleme默认链接/el-link
el-link typewarning默认链接/el-link
el-link typedanger默认链接/el-linkLayout (栅格)布局组件的使用
el-rowel-col :span8占用8份/el-colel-col :span8占用8份/el-colel-col :span8占用8份/el-col
/el-rowel-row :gutter50 tagspanel-col :span4div styleborder: 1px red solid;占用4份/div/el-colel-col :span8div styleborder: 1px red solid;占用8份/div/el-colel-col :span3div styleborder: 1px red solid;占用3份/div/el-colel-col :span9div styleborder: 1px red solid;占用9份/div/el-col
/el-rowel-rowel-col :span12 :offset9 :psuh3 xsdiv styleborder: 1px blue solid;我是占用12分/div/el-colel-col :span6div styleborder: 1px blue solid;我是占用6分/div/el-col
/el-rowContainer 布局容器组件
!--创建容器--
el-container!--header--el-headerdivh1我是标题/h1/div/el-header!--容器嵌套使用--el-container!--aside--el-asidedivh1我是菜单/h1/div/el-aside!--main--el-maindivh1我是中心内容/h1/div/el-main/el-containerel-footerdivh1我是页脚/h1/div/el-footer
/el-container水平容器
el-container directionhorizontal
当子元素中没有有 【el-header】 或 【el-footer】 时容器排列为【水平】
垂直容器
el-container directionvertical Form相关组件
Radio按钮
el-radio v-modellabel namesex disabled label男男/el-radio
el-radio v-modellabel namesex border sizesmall label女女/el-radio
el-radio v-modellabel border sizemini label女女/el-radio
el-radio v-modellabel border sizemedium label女女/el-radioradio按钮组
el-radio-group v-modelradioel-radio :label3备选项3/el-radioel-radio :label6备选项6/el-radioel-radio :label9备选项9/el-radio
/el-radio-group
scriptexport default {name: Radio,data() {return {radio: 6}}}
/scriptcheckbox组件
el-checkbox v-modelchecked disabled true-label北京北京/el-checkbox
el-checkbox checked border true-label上海上海/el-checkbox
el-checkbox v-modelchecked true-label天津天津/el-checkbox复选框组的使用
el-checkbox-group changebb :min1 v-modelcheckListel-checkbox label复选框 A/el-checkboxel-checkbox label复选框 B/el-checkboxel-checkbox label复选框 C/el-checkboxel-checkbox label禁用 disabled/el-checkboxel-checkbox label选中且禁用 disabled/el-checkbox
/el-checkbox-groupscriptexport default {name: Checkbox,data(){return{checked:true,checkList:[],}},methods:{bb(){console.log(this.checkList);}}}
/scriptInput组件
el-input v-modelname disabled typetextarea/el-input
el-input v-modelprice :maxlength10 show-word-limit :minlength5/el-input
el-input prefix-iconel-icon-user-solid placeholder请输入用户名 clearable v-modelusername/el-input
el-input suffix-iconel-icon-star-off placeholder请输入密码 show-password typepassword clearable v-modelpassword/el-input
scriptexport default {name: Input,data() {return {restaurants: [],state1: ,state2: ,name:xiaochen,price:0.0,username:,password:,};},}
/scriptel-input v-modelname disabled typetextarea/el-input
el-input v-modelprice :maxlength10 show-word-limit :minlength5/el-input
el-input prefix-iconel-icon-user-solid placeholder请输入用户名 clearable v-modelusername/el-input
el-input suffix-iconel-icon-star-off placeholder请输入密码 show-password typepassword clearable v-modelpassword/el-input
scriptexport default {name: Input,data() {return {restaurants: [],state1: ,state2: ,name:xiaochen,price:0.0,username:,password:,};},}
/script注意:在elementui中所有组件 都存在 【属性、事件、方法】 属性:直接写在对应的组件标签上 使用方式:属性名属性值方式 事件: 直接使用vue绑定事件方式写在对应的组件标签上 使用方式:事件名vue中事件处理函数 方法: 1. 在对应组件标签上使用ref组件别名 2.通过使用this.$refs.组件别名.方法名()进行调用 Select选择器组件
# 1.数据写死在页面上
el-select v-modelcityNameel-option value北京北京/el-optionel-option value天津天津/el-option
/el-select注意:1.要求下拉列表中【必须存在option的value属性值】2.要求select中【必须使用v-model进行数据绑定】# 2.如何动态获取数据el-selectel-option v-foroption in options :labeloption.name :valueoption.id :keyoption.id/el-option/el-selectscriptexport default {name: Select,data(){return{options:[{id:1,name:研发部},{id:2,name:小卖部},{id:3,name:小米部},]}},}/script# 3.获取下拉列表选中数据
!--选中哪个值哪个值的value就会绑定给cityId--el-select v-modelcityId multiple clearableel-option v-foroption in options :labeloption.name :valueoption.id :keyoption.id/el-option
/el-select
scriptexport default {name: Select,data(){return{options:[{id:1,name:研发部},{id:2,name:小卖部},{id:3,name:小米部},],cityId:}},}
/scriptSwitch 开关组件
el-switch v-modelvalue/el-switchscriptexport default {name: Switchs,data(){return{value:true}}}
/scriptDatePicker组件
el-date-pickerv-modelcreateDate:editablefalse:clearablefalseplaceholder请输入创建时间typedaterangestart-placeholder生产时间end-placeholder过期时间formatyyyy/MM/dd
/el-date-pickerShortcuts: 用来增加日期组件的【快捷面板】Picker Options: 用来对日期控件做自定义配置 Upload组件
el-upload :limit3 :on-exceedexceed :multiplefalse :before-removebeforeRemove :on-removeremove :on-previewshow :dragtrue accept.txt,.png :show-file-listtrue nameaaa :datainfo actionhttps://jsonplaceholder.typicode.com/posts/:file-listfileListi classel-icon-upload/idiv classel-upload__text将文件拖到此处或em点击上传/em/divdiv classel-upload__tip slottip只能上传jpg/png文件且不超过500kb/div
/el-uploadscriptexport default {name: Uploads,data() {return {fileList: [{name: food.jpeg,url: https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100}, {name: food2.jpeg,url: https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100}],info: {id:21}}},methods:{show(file){console.log(file);},remove(file,fileList){console.log(file);console.log(fileList);//alert(fileList.length)},beforeRemove(file,fileList){if(fileList.length3){alert(上传文件不能少于3个)return false;}},exceed(file,fileList){alert(文件超出上传的个数限制)}}}
/scriptForm组件
el-form refform :modelform label-width80pxel-form-item label活动名称el-input v-modelform.name/el-input/el-form-item......el-form-itemel-button typeprimary clickonSubmit立即创建/el-buttonel-button取消/el-button/el-form-item
/el-form
scriptexport default {name: Form,data() {return {form: {name: ,region: ,date1: ,date2: ,delivery: false,type: [],resource: ,desc: }}},methods: {onSubmit() {console.log(submit!);}}}
/script警告提示
el-alert title成功信息提示 :closablefalse typesuccessdiv slot我是辅助信息/div
/el-alert
el-alert title成功信息提示 typeinfo/el-alert
el-alert title成功信息提示 typewarning/el-alert
el-alert title成功信息提示 typeerror/el-alertMessage消息提示
# 1.创建最简单的消息this.$message(这是一个消息提示!!)# 2.自定义消息内容this.$message({message: h(p, null, [h(span, null, 订单创建成功,您的订单编号为: ),h(i, { style: color: teal }, 87)])});# 3.不同主题的消息提示this.$message({message:这是信息提示,type:success,})//主题样式: success info warning error# 4.属性使用this.$message({message:这是信息提示,type:success,showClose:true,center:true,iconClass:el-icon-user-solid,duration:0})
# 5.方法的使用this.$message.closeAll(); table表格组件
el-table :datatableDatael-table-column propid label编号/el-table-columnel-table-column propname label姓名/el-table-columnel-table-column propage label年龄/el-table-columnel-table-column propemail label邮箱/el-table-column
/el-table
scriptexport default {name: Tables,data(){return {tableData:[{id:21,name:小陈,age:23,email:60037647qq.com},{id:22,name:小张,age:25,email:60038647qq.com},]}}}
/scriptel-table :datatableData.filter(data !search || data.name.toLowerCase().includes(search.toLowerCase())) .....!--展示搜索和操作--el-table-columntemplate slotheader slot-scopescopeel-inputv-modelsearchsizeminiplaceholder输入关键字搜索//templatetemplate slot-scopescopeel-buttonsizeminiclickhandleEdit(scope.$index, scope.row)编辑/el-buttonel-buttonsizeminitypedangerclickhandleDelete(scope.$index, scope.row)删除/el-button/template/el-table-column
/el-table
scriptexport default {name: Tables,data() {return {tableData: [{id: 21, name: 小陈, age: 23, email: 60037647qq.com,dept: {id: 1, name: 研发部}},{id: 22, name: 小张, age: 25, email: 60038647qq.com,dept: {id: 1, name: 小卖部}},{id: 23, name: 小李, age: 25, email: 60038657qq.com,dept: {}},{id: 24, name: 小四, age: 25, email: 60038657qq.com,dept: {}},],search: }},methods: {sorts(a, b) {return a.age - b.age;},showDept(row, column, cellValue, index) {if (cellValue) {return cellValue}return 暂无部门;},showCss({row, rowIndex}) {if (rowIndex % 2 0) {return warning-row;}return success-row;},selectRow(selection, row){console.log(selection);console.log(row);},clearSelect(){this.$refs.mytable.clearSelection();},handleEdit(index,row){console.log(index);console.log(row);},handleDelete(index,row){console.log(index);console.log(row);}}}
/script
