做数据库与网站招什么人,商业网站开发岗位需求分析,小型企业的网站建设论文,苏州网站建设集团目录 Element UI介绍特点Vue2使用Element安装引入ElementUI组件库 使用ElementUI用户注册列表展示其他 mint-ui介绍特点安装组件引入组件Mint-ui相关组件 Element UI
介绍 官网(基于 Vue 2.x ):https://element.eleme.cn/#/zh-CN ElementUI 是一个基于 Vue.js 的桌面端组件库… 目录 Element UI介绍特点Vue2使用Element安装引入ElementUI组件库 使用ElementUI用户注册列表展示其他 mint-ui介绍特点安装组件引入组件Mint-ui相关组件 Element UI
介绍 官网(基于 Vue 2.x ):https://element.eleme.cn/#/zh-CN ElementUI 是一个基于 Vue.js 的桌面端组件库由饿了么前端团队开发并维护。它提供了一套丰富的 UI 组件和布局以及一些常用的功能组件让开发者可以快速搭建美观、可用的 Web 应用。 ElementUI 的组件库包括按钮、表单、输入框、下拉菜单、表格、弹窗等等它们都具有一致的样式和交互效果可以方便地进行组合和定制。ElementUI 还提供了一些常用的功能组件如日期选择器、分页器、消息提示等这些组件可以大大简化开发过程提高效率。 ElementUI 的设计风格简洁大方符合现代化的 UI 设计规范。它使用了灵活的栅格系统来布局页面可以适应不同尺寸的屏幕。同时ElementUI 支持多语言和主题定制开发者可以根据自己的需求进行配置。 ElementUI 提供了详细的文档和示例代码可以帮助开发者快速上手并解决问题。此外ElementUI 还有一个活跃的社区开发者可以在社区中分享经验、提问问题并获取帮助。 ElementUI 是一个功能强大、易于使用的前端组件库适用于快速构建漂亮且可用的 Web 应用。无论是个人项目还是企业级应用ElementUI 都能提供良好的支持让开发变得更加高效和愉快。
特点
ElementUI 的特点有以下几个 简洁美观ElementUI 的设计风格简洁大方符合现代化的 UI 设计规范。它提供了一致的样式和交互效果使得应用看起来非常美观并且可以适应不同尺寸的屏幕。 丰富的组件ElementUI 提供了一套丰富的 UI 组件包括按钮、表单、输入框、下拉菜单、表格、弹窗等等。这些组件具有灵活的用法和丰富的功能可以满足各种需求。 响应式布局ElementUI 使用了灵活的栅格系统来布局页面可以适应不同尺寸的屏幕。它支持响应式布局使得应用在不同设备上都能有良好的展示效果。 高度可定制ElementUI 支持多语言和主题定制开发者可以根据自己的需求进行配置。它提供了丰富的主题和样式变量可以方便地定制组件的外观和样式。 完善的文档和示例ElementUI 提供了详细的文档和示例代码开发者可以通过阅读文档和参考示例来快速上手和解决问题。它还有一个活跃的社区开发者可以在社区中分享经验、提问问题并获取帮助。
Vue2使用Element
安装
npm下载ElementUInpm install element-ui2.15.3或者npm i element-ui -S
引入ElementUI组件库
在main.js中内容
import Vue from vue
import App from ./App.vue
import ElementUI from element-ui;
//样式文件需要单独引入
import element-ui/lib/theme-chalk/index.css;
Vue.use(ElementUI);
Vue.config.productionTip falsenew Vue({render: h h(App),
}).$mount(#app)
使用ElementUI
其实在官网有很多很多案例这里我准备了一个用户注册的form表单案例和一个表格展示案例
用户注册
templatedivel-form :modeluser status-icon :rulesrules refuser label-width100px classdemo-userel-form-item label账号 propuserCodeel-input typetext v-modeluser.userCode autocompleteoff/el-input/el-form-itemel-form-item label姓名 propuserNameel-input typetext v-modeluser.userName autocompleteoff/el-input/el-form-itemel-form-item label密码 propuserPasswordel-input typeuserPassword v-modeluser.userPassword autocompleteoff/el-input/el-form-itemel-form-item label确认密码 propcheckPassel-input typepassword v-modeluser.checkPass autocompleteoff/el-input/el-form-itemel-form-item label性别 propel-radio-group v-modeluser.genderel-radio-button label0 男/el-radio-buttonel-radio-button label1 女/el-radio-button/el-radio-group/el-form-itemel-form-item label出生年月 propbirthdayel-date-pickerv-modeluser.birthdayalignrighttypedateplaceholder选择日期:picker-optionspickerOptions/el-date-picker/el-form-itemel-form-item label地址 propaddressel-input typetext v-modeluser.address autocompleteoff/el-input/el-form-itemel-form-item label手机号 propphoneel-input typetext v-modeluser.phone autocompleteoff/el-input/el-form-itemel-form-item label角色 propuserRoleel-select v-modeluser.userRole placeholder请选择el-optionv-foritem in roleList:keyitem.value:labelitem.name:valueitem.value:disableditem.disabled/el-option/el-select/el-form-itemel-form-item label兴趣爱好 prophobbysel-checkbox-groupv-modeluser.hobbysmax3el-checkbox v-forhobby in hobbys :labelhobby :keyhobby{{hobby}}/el-checkbox/el-checkbox-group/el-form-itemel-form-itemel-button typeprimary clicksubmitForm(user)提交/el-buttonel-button clickresetForm(user)重置/el-button/el-form-item/el-form/div
/template
script
export default {// eslint-disable-next-line vue/multi-word-component-namesname:Register,data() {//自定义校验规则var validatePass2 (rule, value, callback) {if (value ) {callback(new Error(请再次输入密码));} else if (value ! this.user.userPassword) {callback(new Error(两次输入密码不一致!));} else {callback();}};return {hobbys:[唱,跳,RAP,打篮球],roleList:[{name:系统管理员,value:1},{name:管理员,value:2},{name:会员,value:3},{name:游客,value:4}],//表单数据绑定user:{userCode:,userName:,userPassword:,gender:0,birthday:,phone:,address:,userRole:4,hobbys:[],checkPass:},//定义表单基本的验证rules: {userCode: [{ required:true,trigger: blur, message: 请输入账号, }],userName: [{ required:true,trigger: blur, message: 请输入用户名, }],userPassword: [{ required:true,trigger: blur, message: 请输入密码, }],checkPass: [{ validator: validatePass2, trigger: blur }],},//日期插件设置pickerOptions: {disabledDate(time) {return time.getTime() Date.now();},shortcuts: [{text: 今天,onClick(picker) {picker.$emit(pick, new Date());}}, {text: 昨天,onClick(picker) {const date new Date();date.setTime(date.getTime() - 3600 * 1000 * 24);picker.$emit(pick, date);}}, {text: 一周前,onClick(picker) {const date new Date();date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);picker.$emit(pick, date);}}]},};},methods: {submitForm(formName) {this.$refs[formName].validate((valid) {if (valid) {alert(submit!);} else {console.log(error submit!!);return false;}});},resetForm(formName) {this.$refs[formName].resetFields();}}
}
/script列表展示
templatedivel-table:datauserListstripestylewidth: 100%el-table-columnpropidlabelIDstylewidth: 15%/el-table-columnel-table-columnpropuserCodelabel账号stylewidth: 15%/el-table-columnel-table-columnpropuserNamelabel姓名stylewidth: 15%/el-table-columnel-table-columnpropgenderlabel性别stylewidth: 6%/el-table-columnel-table-columnpropbirthdaylabel出生年月stylewidth: 15%/el-table-columnel-table-columnpropphonelabel联系方式stylewidth: 15%/el-table-columnel-table-columnpropaddresslabel地址stylewidth: 15%/el-table-columnel-table-columnpropuserRolelabel角色/el-table-columnel-table-column label操作template slot-scopescopeel-buttonsizeminiclickhandleEdit(scope.$index, scope.row)编辑/el-buttonel-buttonsizeminitypedangerclickhandleDelete(scope.$index, scope.row)删除/el-button/template/el-table-column/el-table/div
/template
script
export default {// eslint-disable-next-line vue/multi-word-component-namesname:Register,data() {return{userList:[{id:1,userCode:admin,userName:系统管理员,gender:男,birthday:1993-11-12,phone:13865427845,address:北京市,userRole:系统管理员},{id:2,userCode:sunshangxiang,userName:孙尚香,gender:女,birthday:1999-12-17,phone:13965489527,address:郑州市,userRole:游客},{id:3,userCode:guanyu,userName:关羽,gender:男,birthday:2000-01-09,phone:15765842469,address:徐州市,userRole:会员},{id:4,userCode:sunquan,userName:孙权,gender:男,birthday:1992-10-08,phone:18965552451,address:杭州市,userRole:管理员},{id:5,userCode:liubei,userName:刘备,gender:男,birthday:1989-09-24,phone:15068689595,address:广州市,userRole:管理员},{id:6,userCode:caocao,userName:曹操,gender:男,birthday:1992-10-08,phone:15545211245,address:兖州市,userRole:管理员},{id:7,userCode:huangyueying,userName:黄月英,gender:女,birthday:2009-01-01,phone:15966648531,address:亳州市,userRole:游客},]}},methods: {}
}
/script其他
详见官网…
mint-ui
介绍
Mint UI是一个基于Vue.js的移动端组件库由饿了么前端团队开发。它提供了一系列丰富的UI组件包括按钮、输入框、弹窗、轮播图、下拉刷新等常用组件可以帮助开发者快速构建移动端的Web应用。Mint UI具有简单易用、效果好、样式漂亮等特点受到了广大开发者的欢迎。Mint UI官网 http://mint-ui.github.io/#!/zh-cn
特点
Mint UI具有以下特点 简单易用Mint UI提供了丰富的移动端UI组件使用简单开发者可以快速上手并快速构建移动端应用。 轻量化Mint UI的组件库比较轻量可以高效地加载和运行在移动设备上提供了更好的用户体验。 样式漂亮Mint UI的组件拥有精美的视觉效果具有现代化、时尚的外观能够满足用户对于UI设计的要求。 功能丰富Mint UI提供了丰富的组件包括按钮、输入框、弹窗、轮播图、下拉刷新等常见的移动端UI组件满足开发者在移动应用开发中的各种需求。 支持Vue.jsMint UI是基于Vue.js开发的组件库与Vue.js完美融合开发者可以使用Vue.js的特性和功能来更加灵活地定制和使用组件。
总之Mint UI具有简单易用、轻量化、样式漂亮、功能丰富等特点适用于开发移动端的Web应用。Mint UI具有以下特点 安装组件
npm install mint-ui -S引入组件 引入全部组件 // 引入全部组件 import Vue from vue; import Mint from mint-ui;
Vue.use(Mint);按需引入 借助 babel-plugin-component我们可以只引入需要的组件以达到减小项目体积的目的。 首先安装 babel-plugin-component npm install babel-plugin-component -D {presets: [[es2015, { modules: false }]],plugins: [[component, [{libraryName: mint-ui,style: true}]]]
}如果你只希望引入部分组件比如 Button 和 Cell那么需要在 main.js 中写入以下内容需要引入样式import mint-ui/lib/style.css; // The Vue build version to load with the import command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from vue
import App from ./App
import router from ./router// 1、引入Element-ui组件
// import { Button } from element-ui;
// Vue.use(Button)// 2、引入Mint-ui组件
import mint-ui/lib/style.css;
import {Button} from mint-ui;
Vue.component(Button.name, Button);Vue.config.productionTip false //设置在控制台环境进行代码提示作用// 1.全局路由守卫
router.beforeEach((to,from,next) {/*to:表示要去的新页面from:表示旧的页面next:表示是否*/// 0——表示未登录// 1——表示已登录var islogin 1;if(to.meta.needAuth){if(islogin 0){router.push({name:login})}if(islogin 1){next()}}else{next()}
})// 2.全局过滤器
Vue.filter(toFixed1,function(val,data,data1){return data1 val.toFixed(data)
})/* eslint-disable no-new */
new Vue({el: #app,router,components: { App },template: App/
})Mint-ui相关组件
官网文档 https://mint-ui.github.io/docs/#/zh-cn2
templatediv classhellomt-button typedanger clickmyToastdanger/mt-buttonhrel-button typeprimary主要按钮/el-buttonhrrouter-link to/mydetail产品详情/router-linkrouter-link to/mycar购物车/router-linkrouter-link to/myorder下单页面/router-linkhrbutton clickmytab点击/buttonhr/router-link to/tab选项卡/router-linkhr/myslotdiv slotname1{{msg}}/divdiv slotname2{{num}}/div/myslothr/input typetext placeholder请输入用户名 v-modelt1/input typetext placeholder请输入密码 v-modelt2/button :class{active:isTrue}登录/buttonhr/input typetext name id v-modelnum3/hr/input typetext placeholder请输入用户名 v-modeluser/input typetext placeholder请输入密码 v-modelpassword/button :class{active:getActive}登录/buttonh1{{getAvg}}/h1h1{{getSum}}/h1h1{{num | toFixed(5,$)}}/h1h1{{num1 | toFixed1(5,$)}}/h1h1{{msg}}/h1/div
/templatescript
import { Toast } from mint-ui;
import myslot from ./02slot;export default {name: HelloWorld,data () {return {num:10,num1:20,num3:100,msg: Welcome to Your Vue.js App,user:,password:,isTrue:false,t1:,t2:,}},filters:{toFixed(val,data,data1){return data1 val.toFixed(data)}},computed:{getSum(){return this.num this.num1;},getAvg(){return this.getSum/2;},getActive(){if(this.user||this.password){return false}return true}},watch:{num3(){console.log(num3修改了)},t1(){if(this.t1 || this.t2 ){this.isTrue false}else{this.isTrue true}},t2(){if(this.t1 || this.t2 ){this.isTrue false}else{this.isTrue true}}},components:{myslot,},methods:{mytab(){//链式路由跳转this.$router.push({// 方式一// name:tab// 方式二path:/tab,query:{id:100}})},myToast(){Toast({message: 提示,position: center,duration: 5000});}},
}
/script!-- Add scoped attribute to limit CSS to this component only --
style scoped.active{color: red;}h1, h2 {font-weight: normal;}ul {list-style-type: none;padding: 0;}li {display: inline-block;margin: 0 10px;}a {color: #42b983;}
/style前端第三方组件库国内官网地址
Vant-ui 国内官网: https://vant-contrib.gitee.io/vant/#/zh-CN/ layui 官网: https://layuion.com/docs/element/color.html jQuery 官网:https://www.jquery123.com/ Apache ECharts 官网https://echarts.apache.org/zh/index.html
微信开发文档官网https://developers.weixin.qq.com/miniprogram/dev/framework/
w3c国内官网https://www.w3school.com.cn/
mdn国内官网https://developer.mozilla.org/zh-CN/docs/Web/HTML
swiper官网 https://www.swiper.com.cn/usage/index.html
betterscroll官网添加链接描述
