watch屬性的使用
考慮一個問題：想要實現 名 和 姓 兩個文字框的內容改變，則全名的文字框中的值也跟著改變；（用以前的知識如何實現？？？）
監聽data中屬性的改變：

<div id="app">
    <input type="text" v-model="firstName"> +
    <input type="text" v-model="lastName"> =
    <span>{{fullName}}</span>
  </div>

  <script>
    // 建立 Vue 例項，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        firstName: 'jack',
        lastName: 'chen',
        fullName: 'jack - chen'
      },
      methods: {},
      watch: {
        'firstName': function (newVal, oldVal) { // 第一個引數是新資料，第二個引數是舊資料
          this.fullName = newVal + ' - ' + this.lastName;
        },
        'lastName': function (newVal, oldVal) {
          this.fullName = this.firstName + ' - ' + newVal;
        }
      }
    });
  </script>
監聽路由物件的改變：

<div id="app">
    <router-link to="/login">登入</router-link>
    <router-link to="/register">註冊</router-link>

    <router-view></router-view>
  </div>

  <script>
    var login = Vue.extend({
      template: '<h1>登入元件</h1>'
    });

    var register = Vue.extend({
      template: '<h1>註冊元件</h1>'
    });

    var router = new VueRouter({
      routes: [
        { path: "/login", component: login },
        { path: "/register", component: register }
      ]
    });

    // 建立 Vue 例項，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      router: router,
      watch: {
        '$route': function (newVal, oldVal) {
          if (newVal.path === '/login') {
            console.log('這是登入元件');
          }
        }
      }
    });
  </script>