vue basic

The data are only reactive if they existed when the instance was created. That means if you add a new property, like: vm.b = 'hi' Then changes to b will not trigger any view updates.
https://vuejs.org/v2/guide/instance.html

computed:

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})

Computed properties are cached based on their dependencies. A computed property will only re-evaluate when some of its dependencies have changed. In the example above, only when message is changed, the reversedMessage will be recalculated. The following computed property will never update, because Date.now() is not a reactive dependency

computed: {
  now: function () {
    return Date.now()
  }
}

https://vuejs.org/v2/guide/computed.html

List rendering

Due to limitations in JavaScript, Vue cannot detect the following changes to an array:
When you directly set an item with the index, e.g. vm.items[indexOfItem] = newValue
When you modify the length of the array, e.g. vm.items.length = newLength
To overcome caveat 1, both of the following will accomplish the same as vm.items[indexOfItem] = newValue, but will also trigger state updates in the reactivity system:

    // Vue.set
    Vue.set(example1.items, indexOfItem, newValue)
    // Array.prototype.splice
    example1.items.splice(indexOfItem, 1, newValue)

To deal with caveat 2, you can use splice:

    example1.items.splice(newLength)

https://vuejs.org/v2/guide/list.html

To register my component globally

in main.js

import Panel from './components/Panel'
Vue.component('panel', Panel)

Programmatic Navigation

this.$router.push({ name: 'Hello' })

https://router.vuejs.org/en/essentials/navigation.html

build and deploy PR env

打开chrome的审查元素，发现console出现了几个错误，原来打包的几个文件都是404 NOT FOUND.
#############解决办法###############
在目录build下面找到webpack.prod.conf.js文件，找到output节点，添加【publicPath:'./'】
npm run build
从 dist 目录下 copy index.html 和 static 去 web server 就可以
https://zmis.me/detail_1001

Reference

https://scotch.io/tutorials/getting-started-with-vue-router

Comparison with Other Frameworks
https://vuejs.org/v2/guide/comparison.html

example project
https://github.com/prograhammer/vue-example-project#configure-eslint

http://vuetips.com/

vuex
https://alligator.io/vuejs/intro-to-vuex/