第一次项目总结

板块一

npm安装步骤：装node -->npm -v -->cnpm安装  npm install -g cnpm --registry=https://registry.npm.taobao.org

重要命令：

npm i /install 包名 （-g）全局

npm run dev

板块二

新建vue-cli项目步骤：  npm i vue-cli（第一次装完就不用再装）  -->npm init webpack  项目名（在项目文件夹中执行） -->cd 项目名（打开）-->npm(cnpm) install(添加依赖) --> cd 项目名 -->npm run dev

vue-cli搭建项目（上）

vue-cli搭建项目（中）

vue-cli搭建项目（下）

vue-cli搭建项目（完）

一个组件基本结构（template写dom，只能有一个最外层父元素，script写js，data里写数据，methods写方法，style写样式，scoped表示样式只在这个文件中生效）

板块三

git重要指令 ：

第一次从远程代码库获取项目：git clone +网址(项目的远程代码库地址）

提交信息：git commit -m “你的修改标注”``

从远程代码库下拉项目（第二次用远程代码库的项目更新本地项目）：git commit  -m "something noticed"（提交信息）--> git pull

把本地写好的项目推送到远程库（下载远程库的代码并修改后提交）：git commit  -m "something noticed"（提交信息）--> git push

将本地一个文件夹初始为git可以管理的仓库：打开要被git管理的项目文件夹-->git init

板块四

图片放在静态文件夹里，图片路径

静态资源存放

在.vue中引用多个组件的方法：导入包、按需用标签、在data中注册components

板块五（5个动态效果实现）

动态导航效果

伪元素还能这么用？

把header设为透明 

z-index: 11; //值大一点表示显示的优先级高，不会被覆盖
opacity: 1;

关键代码：

edit on codepen

<ul>
  <li class="father">父菜单
    <ul class="child">
      <li>子菜单</li>
    </ul>
  </li>
</ul>

.father{
  position: relative;
}
.child{
  position: absolute;
  display: none;
}
.father:hover .child{
  display: block;
}

vue+elementui 构建项目

elementui

1.引入（按照官网）

2.用轮播图（官网中成为走马灯），要修改幻灯片的样式，需要在网页中按f12查看对应的类，因为用的时候是用它封装好的自定义标签。设置样式要查看真实dom结构

tab bar效果，可应用于轮播图，tabbar等效果

简单教程

步骤：

1.导航栏列表和内容两个板块（用v-for渲染出li和内容div，循环的时候用上index以便后面用，可以在两个板块的父板块中用同一个v-for渲染两个板块），记得要绑定key值

2.在data中设置一个变量tabMark，初值为0，用于存放当前鼠标移到的地方的index

3.在methods中写changeContent函数，一个参数，表示传入的index，在函数中设置tabMark=index

methods:{
        changeTab: function(i){
            this.tabMark = i ;
        }
    }

4.在导航板块绑定mouseenter事件为changeContent函数，传入参数index

5.在内容板块绑定v-show值，判断本内容板块index是否为移到的对应的li，要用全等号

过渡出现效果

步骤：

1.用一个li把两个对应图片包起来，li相对定位，二维码图片绝对定位

二维码diplay：none/visibility: hidden

原图hover时，diplay：block/visibility: visible

2.设置二维码图片在品牌图片正下方，并设置位置向上的过渡

.ex-brand li{
        float: left;
        width: 235px;
        text-align: left;
        position: relative;
    }//品牌图片
.dqcode{
        position: absolute;
        visibility: hidden;
        left: 0;
        top: 180px;
    }//二维码图片，注意二维码放在ex-brand li里面，与上图img同级
.dqcode{
        transition: top 1s;
        -moz-transition: top 1s;
        -webkit-transition: top 1s;
        -o-transition: top 1s;
}//过渡效果，本来位置在品牌图片正下方，绝对定位，并向上移动品牌图片高度的px
.ex-brand li:hover .dqcode{
        visibility: visible;
        top: 0;
}

版块六

1.设置父元素位置为relative，告诉儿子们要相对我来定位

设置子元素为absolute，可以固定在爸爸的某个角落，top、left、bottom、right都是相对爸爸元素的

2.height=line-height设置元素垂直居中于其父元素

例子:

两个例子css相同

.yellow{
            height: 100px;
            width: 180px;
            background-color: yellow;
        }
 .blue{
            background-color: blue;
            line-height: 100px;//把这句去掉就不居中了
 }

子元素为行内元素的情况

<div class="yellow">
        <span class="blue">hahahhah</span>
</div>

结果

子元素为块级元素的情况

<div class="yellow">
        <h3 class="blue">hahahhah</h3>
    </div>

结果