可能有用2

1.map()

原文地址---https://blog.csdn.net/liminwang0311/article/details/86480829

map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

var a=['a','s','d','f','g'];
a.map(function(item,index){
//a,s,d,f,g
console.log(item);
//0,1,2,3,4
console.log(index)
})

map()方法创建了一个新数组，但新数组并不是在遍历完array1后才被赋值的，而是每遍历一次就得到一个值。

var array1 = [1, 4, 9, 16];
const map1 = array1.map(x => {
    if (x == 4) {
        return x * 2;
    }
});
console.log(map1);
打印结果为：
> Array [undefined, 8, undefined, undefined]

为什么会出现三个undefined呢？而不是我预期的[1,8,9,16]。

这样写只是增加了一个条件，即x的值为4时才乘以2，之所以会出现undefined，是因为map()方法创建了一个新数组，但新数组并不是在遍历完array1后才被赋值的，而是每遍历一次就得到一个值。所以，下面这样修改后就正确了：

var array1 = [1, 4, 9, 16];
const map1 = array1.map(x => {
    if (x == 4) {
        return x * 2;
    }
    return x;
});

2.路径栏 hash 路径栏拼接 search

http://www.xx.com/xxx.aspx?a1=1&a2=2014&a3=201&a4=abc
?分隔 后面的是参数 参数之间以&分隔

原文地址---https://www.cnblogs.com/codebook/p/5918079.html

如果URL中“？”之前有一个“#”比如：“http://localhost:63342/index.html#/version？type=35&id=5”那么使用window.location.search得到的就是空（“”）。因为“？type=35&id=5”串字符是属于“#/version？type=35&id=5”这个串字符的，也就是说查询字符串search只能在取到“？”后面和“#”之前的内容，如果“#”之前没有“？”search取值为空。

3.vue动态添加class类名

原文地址---https://www.cnblogs.com/zhixi/p/9734632.html

在vue中按条件为class动态添加直接使用

:class="[{ active: isActive }, errorClass]"

之类的表达式就可以

但是如果我们要为一个循环列表按条件添加不同的class又如何写呢

其实也很简单，我们只要把class按字符串拼接起来就可以了

<div class="section" :class="'pages'+item.activeClass" v-for="(item,index) in anchors">

4.select文字右对齐

原文地址---https://www.cnblogs.com/flicat/p/4446784.html

select {
    direction: rtl;
}
select option {
    direction: ltr;
}

5.css选中第一个和最后一个元素

原文地址---https://blog.csdn.net/zsg88/article/details/64165993

li:first-child{background:#ff0}

li:last-child{background:#3f0}

li:nth-child(3){background:#f00}

nth-child(2n) 

这个表示选择列表中的偶数标签，即选择 第2 4 6...

nth-child(2n-1)

这个表示选择列表中的奇数标签，即选择 第1 3 5...

6.vue的拦截器

原文地址---https://blog.csdn.net/sinat_17775997/article/details/83379367

axios使用拦截器
在请求或响应被 then 或 catch 处理前拦截它们。

http request拦截器

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

http respones拦截器

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});

移除拦截器

var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

为自定义axios实例添加拦截器

var instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});

7.main.js/index.js/app.vue

原文地址---https://www.cnblogs.com/dongzhuangdian/p/9478321.html

helloworld.vue中的内容能在app.vue中显示, 首先在index.js配置了路由路径,在main.js中加载了路由,在app.vue指明了路由显示位置<router-view>标签. 

8.vue public文件 打包

https://blog.csdn.net/qq_32963841/article/details/85679285

https://www.cnblogs.com/flyape/p/6823888.html

https://cli.vuejs.org/zh/guide/html-and-static-assets.html#public-%E6%96%87%E4%BB%B6%E5%A4%B9

vue只是做了view这一层，所以需要打包为静态文件上传服务器

项目打包过后生成一个dist文件 这个文件就是需要上线的文件

项目中有一个静态资源的文件夹---public(assets/static)

public 文件夹

任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack。你需要通过绝对路径来引用它们。

这个文件里的内容不会被webpack处理

比如src下得一个文件内有一个img文件 图片以相对路径引用这里的图片

<img src="../img/123.png" alt="">
webpack打包编译后
会带上hash值或base64啥的
<img src="data:image/png;base64,iVBO...ybFLxU/QGSS0hl...=" alt="">

public里面图片

绝对路径---不会经过webpack打包编译
相对路径会复制一份图片(两张相同的图片)(带 hash值存放在(复制出来存放在dist static img下) 原图片仍存在)vue-cli2
相对路径会复制一份图片(带 hash值存放在(复制出来存放在dist img下) 原图片仍存在)vue-cli3
而文件夹(src)里面的img文件会经过webpack打包编译
编译过后的图片相对路径后面会带上hash值(变化的)(public里的相对路径也是这样带上hash值)

vue项目打包编译后会生成一个dist文件 这个文件就是最终要上线的文件 (里面应该有index.html和public(公共静态文件)...)

9.vue中img src 动态加载图片路径

https://www.jb51.net/article/160254.htm

<img class="card1-img" :src="picLoading(item.name)" alt="">

methods:{
    picLoading(expression){
          switch(expression){
                case '123' :return '../img/123.png'
                break; 
                case '234' :return '../img/234.png'
                break; 
                // default : 
        }
    }
}
这样不能正常显示图片 因为路径实际路径会被webpack处理 加上一些东西
但是页面上会显示
<img class="card1-img" :src="../img/123.png" alt="">
显示不出图片

这样写可以正常动态加载图片
methods:{
    picLoading(expression){
          switch(expression){
                case '123' :return require('../img/123.png')
                break; 
                case '234' :return require('../img/234.png') 
                break; 
                // default : 
        }
    }
}

10.更改对象的key的名称

var list1=[{key1:123},{key1:234}]

var list2=[];

list2= JSON.parse(JSON.stringify(list1).replace(/key1/g,"key2"));

console.log(list2);---[{key2:123},{key2:234}]