前端导航项目总结

jQuery 实现 项目预览

css 方面

学到了俩个不常用的属性
1.fill: currentColor; 继承父元素的颜色
2.text-transform: uppercase; 限制文本为大写字母

js方面

1.字符串的indexOf方法，会返回查找元素的索引值

let str = 'abc'
str.indexOf('b') = 1

2.字符串的replace方法，要替换的内容，填写正则不能加引号

str.replace('https://','')
str.replace(/\/.*/, '') // 找 / 开头的后面所有内容

3.jQuery的insertBefore方法，用来向指定节点(.class是css选择器)前添加新节点

const s= $('<div>我是新加的</div>').insertBefore('.class')

vue2 实现 项目预览

css方面

在使用display:flex布局时，设置弹性元素水平方向为justify-content: space-between;此时如果元素占据多行就会出现奇怪的现象

实际上我们期望第二行的俩个元素能靠左排列，那么可以用一个小技巧,利用伪类after在最后加一个空内容，宽度跟其他元素一样。

 &::after {
    content: '';
    width: 110px;
  }

vue方面

1.VUE中(img)图片加载失败时(onerror)显示替换的图片

<img :src="`${i.url}/favicon.ico`" :onerror="imgDefault"/>
------------
data(){
  return{
        imgDefault:`this.src="${require('../assets/windbell.png')}"`,
  }
}

还有一种更好的方法，用自定义指令。

2.使用deploy.sh 一键部署GitHub

#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run build

# 进入生成的文件夹
cd dist

git init
git add -A
git commit -m '部署'


# 如果发布到 https://<USERNAME>.github.io/<REPO>
 git push -f git@github.com:liutongyuA/nav-vue.git master:gh-pages

cd -

.... 未完成待续