1.computed：computed屬性的結果會被快取，除非依賴的響應式屬性變化才會重新計算，主要當作屬性來使用；

	<div id="app">
		<!-- 1.我們要監聽到文字框資料的改變，這樣才能知道什麼時候去拼接出一個fullname -->
		<!-- 2.如何監聽到文字框的資料改變 -->
		<input type="text" v-model="firstname" name="">+
		<input type="text" v-model="lastname" name="">=
		<input type
 
="text" v-model="fullname" name="">
		<p>{{fullname}}</p>
		<p>{{fullname}}</p>
		<p>{{fullname}}</p>
	</div>
	
	<script>
		
		var vm = new Vue ({
			el:'#app',
			data:{
				firstname:'',
				lastname:'',
			},
			methods:{
				
			},
			computed:{//在computed中可以定義一些屬性，這些屬性叫做計算屬性，計算屬性的本質就是一個方法，只不過我們在使用這些計算屬性的時候，是把它們的名稱，直接當作屬性來使用，當作方法去呼叫
 

				//注意：計算屬性在引用的時候一定不要加()去呼叫，直接把它當作普通屬性去使用就好
				//注意：只要計算屬性，這個function內部，所用到的任何data中的資料傳送了變化，就會立即重新計算這個計算屬性的值
				//3.計算屬性的求值結果會被快取起來，方便下一次直接使用，如果計算屬性的方法中，所得來的任何資料都沒有發生過變化則不會重新對計算屬性求值。
				'fullname': function () {
					console.log('ok')
					return this.firstname + '-' + this.lastname
				}
			}
			
		}
 
);
		
	</script>

2.methods：methods方法表示一個具體的操作，主要書寫業務邏輯

	<div id="app">
		<!-- 1.我們要監聽到文字框資料的改變，這樣才能知道什麼時候去拼接出一個fullname -->
		<!-- 2.如何監聽到文字框的資料改變 -->
		<input type="text" v-model="firstname" name="" @keyup="getFullname">+
		<input type="text" v-model="lastname" name="" @keyup="getFullname">=
		<input type="text" v-model="fullname" name="">
	</div>
	
	<script>
		
		var vm = new Vue ({
			el:'#app',
			data:{
				firstname:'',
				lastname:'',
				fullname:''
			},
			methods:{
				getFullname () {
					this.fullname = this.firstname + '-' + this.lastname;
				}
			}
			
		});
		
	</script>

3.watch：watch一個物件，鍵是需要觀察的表示式，值是對應回撥函式，主要用來監聽某些特定資料的變化從而進行某些具體的業務邏輯操作，可以看作是computed和methods的結合體

<div id="app">
		<!-- 1.我們要監聽到文字框資料的改變，這樣才能知道什麼時候去拼接出一個fullname -->
		<!-- 2.如何監聽到文字框的資料改變 -->
		<input type="text" v-model="firstname" name="">+
		<input type="text" v-model="lastname" name="">=
		<input type="text" v-model="fullname" name="">
	</div>
	
	<script>
		
		var vm = new Vue ({
			el:'#app',
			data:{
				firstname:'',
				lastname:'',
				fullname:''
			},
			methods:{
				
			},
			watch:{//使用這個屬性，可以監視data中指定資料的變化，然後觸發這個watch中對應的function處理函式
				'firstname':function (newVal,oldVal) {
					this.fullname = newVal + "-" + this.lastname;

				},
				'lastname': function (newVal){
					this.fullname = this.firstname + "-" + newVal;
				}
			}
			
		});
		
	</script>

watch監聽路由地址的改變

 <div id="app">
		<!-- <a href="#/login">登入</a>
		<a href="#/register">註冊</a> -->
		<!-- router-link預設渲染為一個a標籤 -->
		<router-link to="/login" tag="span">登入</router-link>
		<router-link to="/register">註冊</router-link>
		<!-- 這是vue-router提供的元素，專門用來當作佔位符的，將來路由規則匹配到的元件就會展示到router-view -->
		<transition mode="out-in">
			<router-view></router-view>
		</transition>
	</div>


	
	<script>
		var login = {
			template:"<h1>登入元件</h1>"
		}
		var register = {
			template:"<h1>註冊元件</h1>"
		}
		//建立一個路由物件，當匯入vue-router包之後，在window全域性物件中，就有一個路由的建構函式，叫做VueRouter
		//在new路由物件的時候，可以為建構函式，傳遞一個配置物件
		var routerObj = new VueRouter({
			//route //這個配置物件中的router表示路由匹配
			routes:[//路由匹配規則
				//每個路由規則，都是一個物件，這個規則物件，身上，有兩個必須的屬性；
				//屬性1是path，表示監聽哪個路由連結地址
				//屬性2是component，表示如果路由是前面匹配到的path，則表示component屬性對應的那個元件
				//component的屬性值，必須是一個元件的模版物件，不能是元件的引用名稱
				// {path:'/',component:login},
				{path:'/',redirect:'/login'},//這裡的redirect和node中的redirect完全是兩碼事
				{path:'/login',component:login},
				{path:'/register',component:register}
			],
			//修改預設樣式名router-link-active
			linkActiveClass:'active'
		})
		var vm = new Vue ({
			el:'#app',
			data:{
				
			},
			methods:{
				
			},
			router:routerObj,
			watch:{//使用這個屬性，可以監視data中指定資料的變化，然後觸發這個watch中對應的function處理函式
				'$route.path': function (newVal,oldVal) {
					console.log(newVal+'---'+oldVal)
					if(newVal=='/login'){
						console.log("歡迎進入登入頁面")
					}else if(newVal=='/register'){
						console.log('歡迎進入註冊頁面')
					}
				}
			},

			
		});
		
	</script>