前端学习(1865)vue之电商管理系统电商系统之实现表单的数据绑定

修改头像位置

 

 

3目录结构

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Login from './components/Login.vue'Vue.use(Router)export default new Router({routes:[{path:'/',redirect:'/login'},{path:'/login',component:Login}]
})

login.vue

<template><div class="login_container"><div class="login_box"><div class="avatar_box"><img src="../assets/logo.png"></div><!-- 表单区域--><el-form :model="loginForm" label-width="0px" class="login_form"><!-- 登录区域--><el-form-item label="" ><el-input v-model="loginForm.username" prefix-icon="iconfont icon-user"></el-input></el-form-item><el-form-item label="" ><el-input v-model="loginForm.password" prefix-icon="iconfont icon-3702mima"></el-input></el-form-item><el-form-item class="btns"><el-button type="primary">登录</el-button><el-button type="primary">重置</el-button></el-form-item></el-form></div>
</div></template><script>
export default{data(){return{//这是登录表单的数据loginForm:{username:'geyao',password:'geyao'}}}
}
</script><style lang="less" scoped>
.login_container {background-color: #2b4b6b;height: 100%;
}
.login_box {width: 450px;height: 360px;background-color: #fff;border-radius: 3px;position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%);background-color: #fff;
}.avatar_box {width: 130px;height: 130px;border: 1px solid #eee;border-radius: 50%;padding: 10px;box-shadow: 0 0 10px #ddd;position: absolute;left: 50%;transform: translate(-50%, -50%);background-color: #fff;img {width: 100%;height: 100%;border-radius: 50%;background-color: #eee;}}.login_form {position: absolute;bottom: 60px;width: 100%;padding: 0 20px;box-sizing: border-box;
}.btns {display: flex;justify-content: center;
}
</style>

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
//导入字体图标
import './assets/fonts/iconfont.css'
Vue.config.productionTip = false
//导入全局样式
import './assets/css/global.css'
new Vue({router,render: h => h(App)
}).$mount('#app')

global.css

/* 全局样式 */
html,
body,
#app {height: 100%;margin: 0;padding: 0;}

element.js

import Vue from 'vue'
import { Button } from 'element-ui'
import {Form,FormItem} from 'element-ui'
import {Input} from 'element-ui'
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)

运行结果

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/418687.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

前端学习(1866)vue之电商管理系统电商系统之登录退出实现表单的数据验证

修改头像位置 3目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vueVue.use(Router)export default new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login}] }) login.vue <templat…

前端学习(1867)vue之电商管理系统电商系统之登录退出实现表单的重置

修改头像位置 3目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vueVue.use(Router)export default new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login}] }) login.vue <templat…

前端学习(1868)vue之电商管理系统电商系统之登录退出实现表单的预先认证

修改头像位置 3目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vueVue.use(Router)export default new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login}] }) login.vue <templat…

前端学习(1869)vue之电商管理系统电商系统之配置axios发出登录请求

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vueVue.use(Router)export default new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login}] }) login.vue <template><div c…

前端学习(1870)vue之电商管理系统电商系统之配置message全局弹框组件

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vueVue.use(Router)export default new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login}] }) login.vue <template><div c…

前端学习(1871)vue之电商管理系统电商系统之路由导航守卫控制页面访问权限

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vue Vue.use(Router)export default new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login},{…

cd命令

当我们看到一个文件夹&#xff0c;想进去瞧一瞧是什么时&#xff0c;cd命令就能满足你的好奇心。 想进去gg里面瞧一瞧&#xff0c;ok。 eg&#xff1a;cd gg 结果如下 好了&#xff0c;进入到了gg里面&#xff0c;我们要看里面的dx我用到了ll命令&#xff0c;这个命令可以显示里…

强连通分量

强连通分量是有向图中的概念&#xff0c;就是每一个顶点到其它点都由路径&#xff0c;注意有方向. 有向图强连通分量&#xff1a;在有向图G中&#xff0c;如果两个顶点vi,vj间&#xff08;vi>vj&#xff09;有一条从vi到vj的有向路径&#xff0c;同时还有一条从vj到vi的有向…

前端学习(1872)vue之电商管理系统电商系统之完善登录之后的操作

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vueVue.use(Router)const router new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login},{pat…

前端学习(1873)vue之电商管理系统电商系统之实现退出功能

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vueVue.use(Router)const router new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login},{pat…

深入理解构造函数和原型链

使用构造函数初始化对象的过程function Base(){} //函数声明var basenew Base() //对象初始化执行Base()的过程&#xff1a; 创建一个名为Base的function对象&#xff1a; 执行function Base(){函数体}本质上相当于var Basenew Function("函数体")&#xff1b;所以Ba…

前端学习(1874)vue之电商管理系统电商系统之处理项目中eslint语法报错

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vueVue.use(Router)const router new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login},{pat…

Android一个自定义的进度环:ProgressChart

源代码及可执行文件下载地址:http://files.cnblogs.com/rainboy2010/ProgressChart.zip 因项目需要,自己尝试定义了一个进度环,用于显示进度,实现效果如下: 主要代码如下: public class ProgressChart extends View {private Context context;//圆环背景画笔private Paint pain…

前端学习(1876)vue之电商管理系统电商系统之整体布局

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vueVue.use(Router)const router new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login},{pat…

0414-复利计算再升级

目录 项目简介更新内容设计概要估算工作量任务分配github地址演示总结一、项目简介 项目名复利计算5.1版本号5.1开发语言java开发工具eclipse、IDEA、mysql更新内容功能完善开发人员颜文生、林集团二、更新内容 界面美化 改善交互 三、概要设计 加载图片美化界面&#xff0c;利…

前端学习(1874)vue之电商管理系统电商系统之修改element-ui组件的按需导入

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vueVue.use(Router)const router new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login},{pat…

前端学习(1877)vue之电商管理系统电商系统之头部布局

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vueVue.use(Router)const router new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login},{pat…

前端学习(1878)vue之电商管理系统电商系统之左侧菜单布局

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vueVue.use(Router)const router new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login},{pat…

前端学习(1879)vue之电商管理系统电商系统之通过axios拦截器添加token认证

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vueVue.use(Router)const router new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login},{pat…