Vue对象属性详解

<div id="tabName">
	<p>{{message}}</p>
</div>

new Vue({
  el: '#tagName',	// 绑定的元素ID，例：<div id="tabName">
  data: {			// 数据，可以直接在标签中显示，使用 mustache 模板语法 {{message}}
    message: "show message"
  }
  // 声明周期回调方法
  beforeCreate () {
    console.log('==============' + 'beforeCreated' + '===================')
  },
  created () {
    console.log('==============' + 'created' + '===================')
  },
  beforeMount () {
    console.log('==============' + 'beforeMount' + '===================')
  },
  mounted () {
    console.log('==============' + 'mounted' + '===================')
  },
  beforeUpdate () {
    console.log('==============' + 'beforeUpdate' + '===================')
  },
  updated () {
    console.log('==============' + 'updated' + '===================')
  },
  beforeDestroy () {
    console.log('==============' + 'beforeDestroy' + '===================')
  },
  destroyed () {
    console.log('==============' + 'destroyed' + '===================')
  },
  router,// 路由管理器（vue-router），创建VueRouter对象
  store,// 状态管理器（vuex），创建Vuex.Store对象
  methods: {	// methods 函数
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  },
  // 计算属性函数，进行复杂计算时，建议使用计算属性，计算属性中的函数会对计算结果进行缓存，第二次调用时会直接返回缓存好的计算结果，只有当相关属性message发生变化时，才会重新运行整个函数，再返回计算结果。
  computed:{	
  	reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  },
  watch:{	// 监听属性，当监听属性message发生变化时，会调用此函数
  	message：function(newMessage){
  		console.log(newMessage)
  	}
  },
   components:{		// 局部组件注册（组件名称：组件对象）
 	'component-a': ComponentA,
    'component-b': ComponentB
   }
 )