day70:Vue:Git&路飞学城页面效果
发布时间：2020-12-20 09:58:47 所属栏目：Python 来源：网络整理
导读：目录 1.Git 2.路飞学城项目页面效果 0.安装elements UI 1.顶部导航栏效果 2.轮播图效果 1.Git 什么是git？分布式版本管理工具 1.git操作 # 1 创建git本地仓库 创建文件夹,cd到文件夹中,执行 git init 2 查看仓库状态 git status 3 将想要上传的文件添加进去
目录1.Git 2.路飞学城项目页面效果 0.安装elements UI 1.顶部导航栏效果 2.轮播图效果 1.Git什么是git？分布式版本管理工具 1.git操作# 1 创建git本地仓库 创建文件夹,cd到文件夹中,执行 git init 2 查看仓库状态 git status 3 将想要上传的文件添加进去 git add 文件名称(.表示所有文件和目录) 4.commit之前必须配置用户 git config --global user.name chao git config --global user.email 1069696250@qq.com 5.提交，生成版本 git commit -m '描述' 如果在git已经创建了账户和邮箱，那么当你创建vue项目的时候，就会自动生成vue账户和密码 2.路飞学城项目页面效果0.安装element UI?1.element UI介绍
ElementUI是饿了么团队开发的一个UI组件框架，这个框架提前帮我们提供了很多已经写好的通用模块，我们可以在Vue项目中引入来使用，这个框架的使用类似于我们前面学习的bootstrap框架，也就是说，我们完全可以把官方文档中的组件代码拿来就用，有定制性的内容，可以直接通过样式进行覆盖修改就可以了。
文档快速入门：http://element-cn.eleme.io/#/zh-CN/component/quickstart 2.快速安装element UI项目根目录执行以下命令: npm i element-ui -S --registry https://registry.npm.taobao.org
npm i element-ui --save --registry https://registry.npm.taobao.org
3.配置element UI到项目中// elementUI 导入 import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; 需要import引入一下css文件，和我们的link标签引入是一个效果，而import .. from ..是配合export default来使用的 // 调用插件 Vue.use(ElementUI); 1.顶部导航栏效果<template> div class="total-header"> ="header"> el-container> <!-- ele中的栅格系统--> el-header height="80px" class="header-cont"> el-row ele将整个页面分为24个区域 --> el-col ="logo" :span="3" 路飞学城的logo图标 --> a href="/"> img src="@/assets/header-logo.svg" alt="" 可点击的一个路飞logo图片 </a> el-col="nav"="10"> :span> router-link to="/"="active">免费课router-link>轻课>学位课>题库>教育> ="11"="header-right-box"="search" 搜索框，默认显示 --> 当元素失去焦点时触发inputShowHandler方法,isH方法将s_status的值变为True --> input type="text" id="Input" placeholder="请输入想搜索的课程" style="" @blur="inputShowHandler" ref v-show="!s_status" 元素失去焦点，"请输入"这个搜索框不显示，显示的是PythonLinux的那个 ul @click="ulShowHandler" v-show="s_status"="search-ul"="xx" 默认显示的就是这个pythonLinux 因为s-status默认就是true，当用户点击输入框以外别的地方的时候，会触发blur动作，也会将s-status修改为True --> span>Python>Linuxul> p="icon" src="@/assets/sousuo1.png"="s_status" 点外面时 是黑色放大镜 ="@/assets/sousuo2.png" 点输入框时 是黄色放大镜 ="new"="@/assets/new.png"div> 1.登录成功展示购物车和对应的那个下拉框 2. 没有登录的时候展示登录和注册按钮="register"="!token"="/login"button ="signin">登录button> | target="_blank" href="https://www.luffycity.com/signup"="/register"> ="signup">注册="shop-car"="token"="/cart"b>6="@/assets/shopcart.png">购物车 ="nav-right-box"="nav-right"="/myclass"="nav-study">我的教室 mouSEOver鼠标经过，mouSEOut鼠标离开 1.鼠标经过触发personInfoList list-status变为true 显示下拉框="nav-img" @mouSEOver="personInfoList" @mouSEOut="personInfoOut"="@/assets/touxiang.png"="border: 1px solid rgb(243,243,243);"="home-my-account"="list_status"="personInfoList"> li> 我的账户 ="https://hcdn2.luffycity.com/media/frontend/activity/back_1568185800.821227.svg" alt> 我的订单 贝里小卖铺 我的优惠券 我的消息 >(26)> 退出 > > > el-header> > > script> export default { name: "Vheader,data() { return { // 通过标签中一些属性的值来让一些标签展示或隐藏 token: true 登录成功与否的标记 s_status: 放大镜效果切换控制,默认input标签不显示 list_status: false 个人中心下拉菜单是否显示 } },methods: { ulShowHandler() { console.log(this); this.s_status = ; console.log(.$refs); this.$nextTick(()=>{ //延迟回调方法 console.log(this); this.$refs.Input.focus(); }) 延迟回调方法，Vue中DOM更新是异步的,也就是说让Vue去显示我们的input标签的操作是异步的，如果我们直接执行this.$refs.Input.focus();是不行的 当方法的DOM操作完成之后，才执行延时动作 .$nextTick(function () { console.log(); .$refs.Input.focus(); }); },inputShowHandler() { ; },personInfoList() { .list_status ; } } } style scoped .header-cont .nav .active { color: #f5a623; font-weight 500 border-bottom 2px solid #f5a623; } .total-header min-width 1200px z-index 100 box-shadow 0 4px 8px 0 hsla(0,0%,59%,.1) .header width margin 0 auto .header .el-header padding 0 .logo height 80px; /*line-height: 80px;*/ text-align: center;*/ display flex; css3里面的弹性布局，高度设定好之后，设置这个属性就能让里面的内容居中 align-items center .nav .el-row .el-col line-height text-align; .nav a font-size 15px 400 cursor pointer #4a4a4a text-decoration none .nav .el-row .el-col a:hover 2px solid #f5a623 .header-cont position relative .search input 185px 26px 14px border 1px solid #ffc210 outline .search ul padding-bottom 3px 1px solid hsla(0,.25) text font-family Helvetica Neue,Helvetica,Microsoft YaHei,Arial,sans-serif .search .search-ul,.search #Input padding-top 10px .search ul span #545c63 12px 3px 12px background #eeeeef margin-right border-radius 11px .hide .search auto .search p 20px margin-left 4px .search p .icon 16px .search p .new 18px absolute left top .register 36px .register .signin,.register .signup #5e5e5e white-space nowrap .register button outline transparent .register a #000 .header-right-box 100% right .shop-car 99px 28px #f7f7f7 justify-content .shop-car b -1px #fff 350 50% #ff0826 overflow hidden transform scale(.8) .shop-car img 7px .nav-right-box .nav-right-box .nav-right float right 60px .nav-right .nav-study 300 .nav-right .nav-study:hover .nav-img img inline-block .home-my-account 101 190px 0 4px 8px 0 #d0d0d0 li list-style .home-my-account li 40px padding-left padding-right space-between box-sizing border-box .home-my-account li img 5px .home-my-account li span .home-my-account li span b margin-top -2px} style> 2.轮播图效果el-carousel indicator-position="outside" height="400px"el-carousel-item v-for="(value,index) in banner_list" :key="value.id"> :to="value.url":src="value.img_src"="width: 100%;height: 400px;"> <img src="@/assets/banner1.png" alt="">el-carousel-itemel-carousel export { name: Banner { 将每张轮播图的路径和url放在字典中，将字典组成一个大列表。 将列表作为整个数据传递给template banner_list:[ {id:1,img_src:'@/assets/banner1.png',url:'http://www.baidu.com'}, {id:2,img_src:'@/assets/banner2.png',1)"> {id:3,img_src:'@/assets/banner3.png', {id:1'../../../static/img/banner1.pnghttp://www.baidu.com},{id:2../../../static/img/banner2.png3../../../static/img/banner3.png 当使用文件路径使用数据属性动态生成到试图当中时，不能使用@符号，如果想使用@符号，那么需要我们自动调用require方法，对路径进行转换，不然就将图片文件放到static文件夹下面。 ] } } } > （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |