accunulate

1.解决单页面不刷新，拿不到数据

<router-view :key="$route.fullPath"></router-view>

2.利用findIndex() 查当前的索引

let  a = shun                          

arr=[{name:shun},{name:zhou},{name:liu}]

const index = arr.findIndex(item => item.name === a)      //查到返回当前的索引

arr.splice(index, 1)

  var a = 2
  var arr = [1, 2, 3, 4]
  var i = arr.findIndex(item => {
     return item === a
  })
  console.log(i)

3.lodash的用法，对象的方法

import _ from 'lodash'

_.cloneDeep() //对象的深拷贝

_.merge() //用于对象的合并

4.vue浏览器的兼容问题

因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性

在JavaScript对象中有一个 Object.defineProperties(obj, props)方法 该方法主要用来给指定对象添加自定义属性

1.安装babel-polyfill

npm install --save-dev babel-polyfill
2.然后再main.js中引入

import 'babel-polyfill'
3.如果也是用了官方脚手架vue-cli，还需要在webpack.config.js配置文件中做各修改，用
module.exports = {
  entry: {
    app: ["babel-polyfill", "./src/main.js"]   // 替换 app: './src/main.js'
  } 
};

5.项目中添加进度条

NProgress

6.生产环境移出console

安装依赖：cnpm install babel-plugin-transform-remove-console --save-dev、

在babel.config.js中配置 

const prodPlugins = []
if(process.env.NODE_ENV === 'production') {
  prodPlugins.push('transform-remove-console')
}

然后 ...prodPlugins

7.vue项目配合vscode，.prettierrc，默认分号和双引号

在根目录下创建 .prettierrc
{
  "printWidth": 100, //每行最多多少个字符换行
  "singleQuote": true, //单引号
  "trailingComma": "es5", // 对象属性最后有 "," 
  "semi":true //是否需要分号
}

8.css图片有缝隙

li 包裹的img 设置了宽高100%，但是li还是会多出几像素

dispaly: block;

vertical-align: middle

9. css属性 实现贯穿线的效果

text-decoration: line-through;

10. 修改对象的属性名(利用字符串的replace()方法)

arr = [{name:'fanshun'},{name:'xiaotian'}]

要求将对象的属性名 name 改成 title    用正则的方法，返回新的数组

let xiugaiarr = JSON.parse( JSON.stringify(arr).replace(/name /g, "title")

xiugaiarr = [{title:'fanshun'},{title:'xiaotian'}]

 var str = 'feooerjfowjrowe'
 console.log(str.replace(/o/g, 'a'))  // 全局将o 替换成a