Vue常用方法記錄:

生命周期相關(guān):

created ()  {
},

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

updated () {
},

路由相關(guān):

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';
            }
        })
},

// 動態(tài)路由：路由的路徑是 /report/business-report/1234567 可以動態(tài)變化雀鹃，但是跳轉(zhuǎn)的文件只是一個vue文件栅螟，
{
    path: '/report/business-report/:id',
    meta: {
      title: '業(yè)務(wù)報表'
    },
    component: (resolve) => require(['@/views/report/business-report.vue'], resolve)
  }
// 在動態(tài)路由間切換時不會重新創(chuàng)建該vue文件（不會再走created 、mounted），想要知道路由切換需要監(jiān)聽路由變化：

watch: {
  '$route': function (newValue) {
      // 該方法只能監(jiān)聽動態(tài)路徑間的變化， 第一次進入該頁面不會走
   }
},

空頁面:

<template>
  <div class="main">

  </div>
</template>

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

<style scoped>
</style>

組件內(nèi)嵌套內(nèi)容的方法：

// 子組件：（核心是使用 slot 標(biāo)記子組件名稱）
<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添加內(nèi)容）
<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來標(biāo)識 happypack處理那里類文件
    id: 'happyBabel',
    // 如何處理  用法和loader 的配置一樣
    loaders: [{
      loader: 'babel-loader?cacheDirectory=true'
    }],
    // 共享進程池
    threadPool: happyThreadPool,
    // 允許 HappyPack 輸出日志
    verbose: true
  })
  ]

module: {
    rules: [{
      test: /\.js$/,
      // 把對.js 的文件處理交給id為happyBabel 的HappyPack 的實例執(zhí)行
      loader: 'happypack/loader?id=happyBabel',
      // 排除node_modules 目錄下的文件
      exclude: /node_modules/
    }]
  }

// 對應(yīng)庫可以去npm看下使用方法~

常用方法:

//過濾器
filters: {
},
//監(jiān)聽器
watch: {
    value: function (newValue) {

    },
}
//標(biāo)簽相關(guān)
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) // 假裝更改數(shù)組數(shù)據(jù) 強制更新dom

微信端vue項目跳轉(zhuǎn)HTML文件時返回會不刷新vue界面方法（包括路由），這樣會導(dǎo)致微信分享不受控制上岗，該問題只出現(xiàn)于 iOS (webview返回層緩存導(dǎo)致)，解決方法：

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渲染時找不到對應(yīng)標(biāo)簽,可能dom渲染和echarts旋轉(zhuǎn)的先后出了問題.
解決方法:

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表已經(jīng)存在再重新init時會報這個警告
解決方法:

//在init方法前判斷是否dom中已經(jīng)存在,若存在則dispose()
var oldChart = echarts.getInstanceByDom(document.getElementById(chartId));
 if (oldChart) {
    oldChart.dispose();
}
this.currentChart = echarts.init(document.getElementById(chartId));
this.currentChart.setOption(chartOption);

option 相關(guān)解釋

chartOption = {
    //鼠標(biāo)滑過時展示的詳細數(shù)據(jù)相關(guān)設(shè)置
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        }
    },
    //表格兩邊的留白距離
    grid :[
       {
            left:"70px",
            right:'70px'
        }
    ],
    //表格頂部顯示的數(shù)據(jù)分類
    legend: {
        data:['蒸發(fā)量','降水量','平均溫度']
    },
    //X坐標(biāo)
    xAxis: [
        {
            type: 'category',
            data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
            axisPointer: {
                type: 'shadow'
            },
            offset:10//X軸單位名稱上下編譯坐標(biāo)
        }
    ],
    //Y坐標(biāo)
    yAxis: [
        {
            type: 'value',
            name: '水量',
            min: 0, //最小值
            max: 250, //最大值
            interval: 50, //單位長度
            minInterval: 1,//坐標(biāo)軸最小間隔大小
            axisLabel: {
                //坐標(biāo)單位顯示格式化
                formatter: '{value} 萬'
            },
            splitLine: {
                //是否顯示橫線(平行于X軸對應(yīng)Y值得線)
                show: false
            },
        },
        {
            type: 'value',
            name: '溫度',
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
                formatter: '{value} 個'
            },
            splitLine: {
                show: false
            },
        }
    ],
    //數(shù)據(jù)配置
    series: [
        {
            name:'蒸發(fā)量',
            type:'bar',
            // stack:'總量', //是否累加數(shù)據(jù)(數(shù)據(jù)堆疊蕴坪，同個類目軸上系列配置相同的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],
            //在圖上顯示數(shù)值
            label: {
                normal: {
                    show: true,
                    position: 'insideTop'
                }
            },
            //圖的顏色等風(fēng)格設(shè)置
            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軸時通過這個設(shè)置對應(yīng)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 // 頂點字體大小 不能設(shè)置 radio 否則不能生效
          },
          splitLine: {
            lineStyle: {
              color: '#00aaff' // 每一圈的邊界顏色
            }
          },
          axisLabel: {
            inside: true
          },
          axisLine: {
            lineStyle: {
              color: '#00aaff' // 半徑線顏色
            }
          },
          splitArea: {
            areaStyle: {
              // color: ['#00aaff', '#0099ff', '#00aaff', '#0099ff', '#00aaff'] // 每一圈的顏色
            }
          },
          indicator: [
              {text: '健康風(fēng)險', max: 100, color: '#099aed'}, // 選中顏色
              {text: '駕乘風(fēng)險', max: 100},
              {text: '固定資產(chǎn)', max: 100},
              {text: '財務(wù)風(fēng)險', max: 100},
              {text: '贍養(yǎng)撫養(yǎng)', 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', // 頂點數(shù)字顏色
                fontSize: 24,  // 頂點數(shù)字大小
                formatter: function (params) {
                  return params.value
                }
              }
            }
          }]
        }]
      }

雷達圖效果