Vue对象大体结构

Vue对象大体结构

var app=new Vue({
	el:'#app', //vue对象绑定的元素id
	data:{
		//vue对象具备的属性
		htmlContent:false,
		message: 'Hello',
		firstName: 'Foo',
    	lastName: 'Bar',
    	fullName: 'Foo Bar'	
	},
	//方法，利用的不是缓存，调用一次算一次
	methods:{
		//调用方式reversedMessage()
		reversedMessage: function () {
    		return this.message.split('').reverse().join('')
  		}
	},
	//计算属性，它利用的是缓存，当监听对象发生变化时它才改变
	//所谓计算属性也是属性的一种它和data块中的属性大致一样所以当
	//computed中有fullName的时候，data中就不需要在写fullName了
	computed:{
		//默认只有getter，setter需要时才写，
		//监听别人改变自己，监听对象是firstName和lastName，该变fullName
		fullName: {
    		// getter，vue对象中的firstName和..变了，改变vue的fullName从而改变前台显示
    		get: function () {
      			return this.firstName + ' ' + this.lastName
    		},
    		// setter，前台的fullName改变，从而影响firstName和..
    		set: function (newValue) {
      			var names = newValue.split(' ')
      			this.firstName = names[0]
      			this.lastName = names[names.length - 1]
    		}
  		}
	},
	//watch属性侦听器,它的作用和computed差不多，但是computed更常被使用，watch的独特性在于它可以设置中间状态，这个的具体用法请百度
	watch: {
		//监听对象为firstName或..，当firstName或..改变时要干点什么。。
    	firstName: function (val) {
      		this.fullName = val + ' ' + this.lastName
    	},
    	lastName: function (val) {
      		this.fullName = this.firstName + ' ' + val
    	}
  }
})