<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算属性，方法，***，建议使用计算属性</title>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!--用计算属性computed调用显示 {{fullName}} -->
			<!--使用方法methods调用显示{{fullName1()}} -->
			{{fullName}}
		</div>
		<script>
			var vm=new Vue({
				el:"#app",
				data:{
					firstName:"Dell",
					lastName:"Lee",
					fullName:"Dell Lee"
				},
				//监听,也具有缓存机制
				watch:{
					firstName:function(){
						this.fullName=this.firstName+" "+this.lastName;
					},
					lastName:function(){
						this.fullName=this.firstName+" "+this.lastName;
					}
				}
				/* //方法
				methods:{
					fullName1:function(){
						return this.firstName+" "+this.lastName;
					}
				} */
				/* //计算属性,具有缓存机制
				computed:{
					fullName: function(){
						return this.firstName+" "+this.lastName;
					}
				} */
			})
			
		</script>
	</body>
</html>