Vue常用方法记录:

生命周期相关:

created ()  {
},

mounted :function(){
  this.$nextTick(function () {
  });
 },

updated () {
},

路由相关:

this.$router.push({ path: '/invite' , query:{
    qrUrl : this.qrUrl
}});

this.$router.replace({ path: '/invite' , query:{
    qrUrl : this.qrUrl
}});

this.$route.query.qrUrl;

beforeRouteEnter(to, from, next) {
        next(vm => {
            if (
                from.path == '/account/success' 
            ) {
                location.href = location.href.split('#')[0] + '#/account/apply-list';
            }
        })
},

// 动态路由：路由的路径是 /report/business-report/1234567 可以动态变化，但是跳转的文件只是一个vue文件，
{
    path: '/report/business-report/:id',
    meta: {
      title: '业务报表'
    },
    component: (resolve) => require(['@/views/report/business-report.vue'], resolve)
  }
// 在动态路由间切换时不会重新创建该vue文件（不会再走created 、mounted），想要知道路由切换需要监听路由变化：

watch: {
  '$route': function (newValue) {
      // 该方法只能监听动态路径间的变化， 第一次进入该页面不会走
   }
},

空页面:

<template>
  <div class="main">

  </div>
</template>

<script>
export default {
  components: {
  },
  props: {
  },
  watch: {
  },
  data () {
    return {
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
  },
  filters: {
  }
}
</script>

<style scoped>
</style>

组件内嵌套内容的方法：

// 子组件：（核心是使用 slot 标记子组件名称）
<template is="parent-scroller">
    <scroller class="scroller">
        <refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'">
          <text class="indicator">正在刷新 ...</text>
        </refresh>
        <slot name='scroller-content'></slot>
        <loading class="loading" @loading="onloading" :display="showLoading">
         <text class="indicator">正在加载 ...</text>
       </loading>
    </scroller>
</template>

// 父组件 ：（核心是使用slot添加内容）
<template>
  <div class="wrapper">
    <image src="/src/assets/images/travels/qy_background.png" class="background-image"></image>
    <scroller-list
      v-on:onrefresh='onrefresh'
      v-on:onpullingdown='onpullingdown'
      v-on:onloading='onloading'>
      <div slot='scroller-content'>
        <div class="title">
          <image src="/src/assets/images/travels/qy_title.png" class="title-image"></image>
        </div>
        <list-cell v-for="dataItem in lists"
          :dataItem='dataItem'
          :key='dataItem.id'>
        </list-cell>
      </div>
    </scroller-list>
  </div>
</template>

打包加速:

npm i -D happypack

npm install webpack-parallel-uglify-plugin --save

const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')
const HappyPack = require('happypack')
const os = require('os')
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })

// prod.conf.js 中
plugins: [
    new ParallelUglifyPlugin({
      cacheDir: '.cache/',
      uglifyJS: {
        output: {
          comments: false
        },
        compress: {
          warnings: false
        }
      }
    }),
  new HappyPack({
    // 用id来标识 happypack处理那里类文件
    id: 'happyBabel',
    // 如何处理  用法和loader 的配置一样
    loaders: [{
      loader: 'babel-loader?cacheDirectory=true'
    }],
    // 共享进程池
    threadPool: happyThreadPool,
    // 允许 HappyPack 输出日志
    verbose: true
  })
  ]

module: {
    rules: [{
      test: /\.js$/,
      // 把对.js 的文件处理交给id为happyBabel 的HappyPack 的实例执行
      loader: 'happypack/loader?id=happyBabel',
      // 排除node_modules 目录下的文件
      exclude: /node_modules/
    }]
  }

// 对应库可以去npm看下使用方法~

常用方法:

//过滤器
filters: {
},
//监听器
watch: {
    value: function (newValue) {

    },
}
//标签相关
v-for='(item, index) in array'
:class="{'charts-selected': chartSelectIndex === item.index, 'charts-unselected': chartSelectIndex !== item.index}"

<customfather v-on:clild-tell-me-something='listeToMyBoy'></customfather>
this.$emit('clild-tell-me-something','回家吃饭')

this.outCallData.splice(index, 1, item) // 假装更改数组数据 强制更新dom

微信端vue项目跳转HTML文件时返回会不刷新vue界面方法（包括路由），这样会导致微信分享不受控制，该问题只出现于 iOS (webview返回层缓存导致)，解决方法：

var u = navigator.userAgent
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
if (isiOS) {
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      window.location.reload()
    }
  })
}

单页面引入<script>

参考

var script = document.createElement('script');  
    script.type = 'text/javascript';  
    script.src = 'http://api.map.baidu.com/api?v=2.0&ak=ak&callback=init';  
    script.onerror = reject;  
    document.head.appendChild(script);  

Echars 库使用方法记录:

error:there is a chart instance already initialized on the dom

在同一界面多个图表展示,如果只有一个echarts对象时会报这个错误. 因为dom渲染时找不到对应标签,可能dom渲染和echarts旋转的先后出了问题.
解决方法:

updated () {
    //在update中去重新加载echarts的option
     this.currentChart = echarts.init(document.getElementById(chartId));
     this.currentChart.setOption(chartOption);
}

warning:There is a chart instance already initialized on the dom.

如果该echarts表已经存在再重新init时会报这个警告
解决方法:

//在init方法前判断是否dom中已经存在,若存在则dispose()
var oldChart = echarts.getInstanceByDom(document.getElementById(chartId));
 if (oldChart) {
    oldChart.dispose();
}
this.currentChart = echarts.init(document.getElementById(chartId));
this.currentChart.setOption(chartOption);

option 相关解释

chartOption = {
    //鼠标滑过时展示的详细数据相关设置
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        }
    },
    //表格两边的留白距离
    grid :[
       {
            left:"70px",
            right:'70px'
        }
    ],
    //表格顶部显示的数据分类
    legend: {
        data:['蒸发量','降水量','平均温度']
    },
    //X坐标
    xAxis: [
        {
            type: 'category',
            data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
            axisPointer: {
                type: 'shadow'
            },
            offset:10//X轴单位名称上下编译坐标
        }
    ],
    //Y坐标
    yAxis: [
        {
            type: 'value',
            name: '水量',
            min: 0, //最小值
            max: 250, //最大值
            interval: 50, //单位长度
            minInterval: 1,//坐标轴最小间隔大小
            axisLabel: {
                //坐标单位显示格式化
                formatter: '{value} 万'
            },
            splitLine: {
                //是否显示横线(平行于X轴对应Y值得线)
                show: false
            },
        },
        {
            type: 'value',
            name: '温度',
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
                formatter: '{value} 个'
            },
            splitLine: {
                show: false
            },
        }
    ],
    //数据配置
    series: [
        {
            name:'蒸发量',
            type:'bar',
            // stack:'总量', //是否累加数据(数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加。)
            data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
            //在图上显示数值
            label: {
                normal: {
                    show: true,
                    position: 'insideTop'
                }
            },
            //图的颜色等风格设置
            itemStyle: {
                normal: {
                    color : '#ff8a00'
                }
            }
        },
        {
            name:'降水量',
            type:'bar',
            // stack:'总量',
            data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
            label: {
                normal: {
                    show: true,
                    position: 'insideTop'
                }
            },
            itemStyle: {
                normal: {
                    color : '#2c80e9'
                }
            }
        },
        {
            name:'平均温度',
            type:'line',
            yAxisIndex: 1,//多个Y轴时通过这个设置对应Y轴
            data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
            label: {
                normal: {
                    show: true,
                    position: 'top'
                }
            },
            itemStyle: {
                normal: {
                    color : 'red'
                }
            }
        }
    ]
};

效果图

雷达图例子

this.chartOption = {
        radar: [{
          name: {
            fontSize: 24 // 顶点字体大小 不能设置 radio 否则不能生效
          },
          splitLine: {
            lineStyle: {
              color: '#00aaff' // 每一圈的边界颜色
            }
          },
          axisLabel: {
            inside: true
          },
          axisLine: {
            lineStyle: {
              color: '#00aaff' // 半径线颜色
            }
          },
          splitArea: {
            areaStyle: {
              // color: ['#00aaff', '#0099ff', '#00aaff', '#0099ff', '#00aaff'] // 每一圈的颜色
            }
          },
          indicator: [
              {text: '健康风险', max: 100, color: '#099aed'}, // 选中颜色
              {text: '驾乘风险', max: 100},
              {text: '固定资产', max: 100},
              {text: '财务风险', max: 100},
              {text: '赡养抚养', max: 100},
              {text: '出行意外', max: 100}
          ]
        }],
        series: [{
          type: 'radar',
          data: [{
            value: [60, 73, 85, 40, 50, 100],
            areaStyle: {
              normal: {
                opacity: 0.8, // 图表透明度
                color: '#6397ff' // 图表颜色
              }
            },
            lineStyle: {
              color: '#6397ff' // 图表边框颜色
            },
            label: {
              normal: {
                show: true,
                color: '#6397ff', // 顶点数字颜色
                fontSize: 24,  // 顶点数字大小
                formatter: function (params) {
                  return params.value
                }
              }
            }
          }]
        }]
      }

雷达图效果