vue-路由-顯示名稱

顯示名稱

方式1：

<div id="app">

    <!-- 分析： -->
    <!-- 1. 我們要監聽到 文本框數據的改變，這樣才能知道 什麼時候去拼接 出一個 fullname -->
    <!-- 2. 如何監聽到 文本框的數據改變呢？？？ -->

    <input type="text" v-model="firstname" @keyup="getFullname"> +
    <input type="text" v-model="lastname" @keyup="getFullname"> =
    <input type="text" v-model="fullname">

  </div>

// 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        firstname: '',
        lastname: '',
        fullname: ''
      },
      methods: {
        getFullname() {
          this.fullname = this.firstname + '-' + this.lastname
        }
      }
    });

方式2：

 <div id="app">

    <input type="text" v-model="firstname"> +
    <input type="text" v-model="lastname"> =
    <input type="text" v-model="fullname">

  </div>

// 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        firstname: '',
        lastname: '',
        fullname: ''
      },
      methods: {},
      watch: { // 使用這個 屬性，可以監視 data 中指定數據的變化，然後觸發這個 watch 中對應的 function 處理函數
        'firstname': function (newVal, oldVal) {
          // console.log('監視到了 firstname 的變化')
          // this.fullname = this.firstname + '-' + this.lastname

          // console.log(newVal + ' --- ' + oldVal)

          this.fullname = newVal + '-' + this.lastname
        },
        'lastname': function (newVal) {
          this.fullname = this.firstname + '-' + newVal
        }
      }
    });

方式3：

<div id="app">

    <input type="text" v-model="firstname"> +
    <input type="text" v-model="middlename"> +
    <input type="text" v-model="lastname"> =
    <input type="text" v-model="fullname">

    <p>{{ fullname }}</p>
    <p>{{ fullname }}</p>
    <p>{{ fullname }}</p>

  </div>

 // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        firstname: '',
        lastname: '',
        middlename: ''
      },
      methods: {},
      computed: { // 在 computed 中，可以定義一些 屬性，這些屬性，叫做 【計算屬性】， 計算屬性的，本質，就是 一個方法，只不過，我們在使用 這些計算屬性的時候，是把 它們的 名稱，直接當作 屬性來使用的；並不會把 計算屬性，當作方法去調用；

        // 註意1： 計算屬性，在引用的時候，一定不要加 () 去調用，直接把它 當作 普通 屬性去使用就好了；
        // 註意2： 只要 計算屬性，這個 function 內部，所用到的 任何 data 中的數據發送了變化，就會 立即重新計算 這個 計算屬性的值
        // 註意3： 計算屬性的求值結果，會被緩存起來，方便下次直接使用； 如果 計算屬性方法中，所以來的任何數據，都沒有發生過變化，則，不會重新對 計算屬性求值；
        'fullname': function () {
          console.log('ok')
          return this.firstname + '-' + this.middlename + '-' + this.lastname
        }
      }
    });

watch監視路由地址

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

    <!-- 容器 -->
    <router-view></router-view>

  </div>

 // 2. 創建子組件
    var login = {
      template: '<h3>這是登錄子組件，這個組件是 奔波霸 開發的。</h3>'
    }

    var register = {
      template: '<h3>這是註冊子組件，這個組件是 霸波奔 開發的。</h3>'
    }

    // 3. 創建一個路由對象
    var router = new VueRouter({
      routes: [ // 路由規則數組
        { path: '/', redirect: '/login' },
        { path: '/login', component: login },
        { path: '/register', component: register }
      ],
      linkActiveClass: 'myactive' // 和激活相關的類
    })

    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      // router: router
      router,
      watch: {
        //  this.$route.path
        '$route.path': function (newVal, oldVal) {
          // console.log(newVal + ' --- ' + oldVal)
          if (newVal === '/login') {
            console.log('歡迎進入登錄頁面')
          } else if (newVal === '/register') {
            console.log('歡迎進入註冊頁面')
          }
        }
      }
    });