4. Vue系列學習筆記 - 路由

父組件向子組件傳值

1. 組件實例定義方式，注意：一定要使用props屬性來定義父組件傳遞過來的數據

<script>
    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '這是父組件中的消息'
      },
      components: {
        son: {
          template: '<h1>這是子組件 --- {{finfo}}</h1>',
          props: ['finfo']
        }
      }
    });
  </script>

2. 使用v-bind或簡化指令，將數據傳遞到子組件中：

<div id="app">
    <son :finfo="msg"></son>
  </div>

子組件向父組件傳值

1. 原理：父組件將方法的引用，傳遞到子組件內部，子組件在內部調用父組件傳遞過來的方法，同時把要發送給父組件的數據，在調用方法的時候當作參數傳遞進去；
2. 父組件將方法的引用傳遞給子組件，其中，getMsg是父組件中methods中定義的方法名稱，func是子組件調用傳遞過來方法時候的方法名稱

<son @func="getMsg"></son>

3. 子組件內部通過this.$emit('方法名', 要傳遞的數據)方式，來調用父組件中的方法，同時把數據傳遞給父組件使用

<div id="app">
    <!-- 引用父組件 -->
    <son @func="getMsg"></son>


    <!-- 組件模板定義 -->
    <script type="x-template" id="son">
      <div>
        <input type="button" value="向父組件傳值" @click="sendMsg" />
      </div>
    </script>
  </div>


  <script>
    // 子組件的定義方式
    Vue.component('son', {
      template: '#son', // 組件模板Id
      methods: {
        sendMsg() { // 按鈕的點擊事件
          this.$emit('func', 'OK'); // 調用父組件傳遞過來的方法，同時把數據傳遞出去
        }
      }
    });


    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        getMsg(val){ // 子組件中，通過 this.$emit() 實際調用的方法，在此進行定義
          alert(val);
        }
      }
    });
  </script>

組件中data和props的區別

評論列表案例

目標：主要練習父子組件之間傳值

使用 this.$refs 來獲取元素和組件

  <div id="app">
    <div>
      <input type="button" value="獲取元素內容" @click="getElement" />
      <!-- 使用 ref 獲取元素 -->
      <h1 ref="myh1">這是一個大大的H1</h1>


      <hr>
      <!-- 使用 ref 獲取子組件 -->
      <my-com ref="mycom"></my-com>
    </div>
  </div>


  <script>
    Vue.component('my-com', {
      template: '<h5>這是一個子組件</h5>',
      data() {
        return {
          name: '子組件'
        }
      }
    });


    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        getElement() {
          // 通過 this.$refs 來獲取元素
          console.log(this.$refs.myh1.innerText);
          // 通過 this.$refs 來獲取組件
          console.log(this.$refs.mycom.name);
        }
      }
    });
  </script>

什麼是路由

1. 後端路由：對於普通的網站，所有的超鏈接都是URL地址，所有的URL地址都對應服務器上對應的資源；
2. 前端路由：對於單頁面應用程序來說，主要通過URL中的hash(#號)來實現不同頁面之間的切換，同時，hash有一個特點：HTTP請求中不會包含hash相關的內容；所以，單頁面程序中的頁面跳轉主要用hash實現；
3. 在單頁面應用程序中，這種通過hash改變來切換頁面的方式，稱作前端路由（區別於後端路由）；

在 vue 中使用 vue-router

1. 導入 vue-router 組件類庫：

<!-- 1. 導入 vue-router 組件類庫 -->
  <script src="./lib/vue-router-2.7.0.js"></script>

2. 使用 router-link 組件來導航

<!-- 2. 使用 router-link 組件來導航 -->
<router-link to="/login">登錄</router-link>
<router-link to="/register">註冊</router-link>

3. 使用 router-view 組件來顯示匹配到的組件

<!-- 3. 使用 router-view 組件來顯示匹配到的組件 -->
<router-view></router-view>

4. 創建使用Vue.extend創建組件

    // 4.1 使用 Vue.extend 來創建登錄組件
    var login = Vue.extend({
      template: '<h1>登錄組件</h1>'
    });


    // 4.2 使用 Vue.extend 來創建註冊組件
    var register = Vue.extend({
      template: '<h1>註冊組件</h1>'
    });

5. 創建一個路由 router 實例，通過 routers 屬性來定義路由匹配規則

// 5. 創建一個路由 router 實例，通過 routers 屬性來定義路由匹配規則
    var router = new VueRouter({
      routes: [
        { path: '/login', component: login },
        { path: '/register', component: register }
      ]
    });

6. 使用 router 屬性來使用路由規則

// 6. 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      router: router // 使用 router 屬性來使用路由規則
    });

使用tag屬性指定router-link渲染的標籤類型

設置路由重定向

設置路由高亮

設置路由切換動效

在路由規則中定義參數

1. 在規則中定義參數：

{ path: '/register/:id', component: register }

2. 通過 this.$route.params來獲取路由中的參數：

var register = Vue.extend({
      template: '<h1>註冊組件 --- {{this.$route.params.id}}</h1>'
    });

使用 children 屬性實現路由嵌套

  <div id="app">
    <router-link to="/account">Account</router-link>


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


  <script>
    // 父路由中的組件
    const account = Vue.extend({
      template: `<div>
        這是account組件
        <router-link to="/account/login">login</router-link> | 
        <router-link to="/account/register">register</router-link>
        <router-view></router-view>
      </div>`
    });


    // 子路由中的 login 組件
    const login = Vue.extend({
      template: '<div>登錄組件</div>'
    });


    // 子路由中的 register 組件
    const register = Vue.extend({
      template: '<div>註冊組件</div>'
    });


    // 路由實例
    var router = new VueRouter({
      routes: [
        { path: '/', redirect: '/account/login' }, // 使用 redirect 實現路由重定向
        {
          path: '/account',
          component: account,
          children: [ // 通過 children 數組屬性，來實現路由的嵌套
            { path: 'login', component: login }, // 注意，子路由的開頭位置，不要加 / 路徑符
            { path: 'register', component: register }
          ]
        }
      ]
    });


    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      components: {
        account
      },
      router: router
    });
  </script>

命名視圖實現經典佈局

1. 標籤代碼結構：

<div id="app">
    <router-view></router-view>
    <div class="content">
      <router-view name="a"></router-view>
      <router-view name="b"></router-view>
    </div>
  </div>

2. JS代碼：

<script>
    var header = Vue.component('header', {
      template: '<div class="header">header</div>'
    });


    var sidebar = Vue.component('sidebar', {
      template: '<div class="sidebar">sidebar</div>'
    });


    var mainbox = Vue.component('mainbox', {
      template: '<div class="mainbox">mainbox</div>'
    });


    // 創建路由對象
    var router = new VueRouter({
      routes: [
        {
          path: '/', components: {
            default: header,
            a: sidebar,
            b: mainbox
          }
        }
      ]
    });


    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      router
    });
  </script>

3. CSS 樣式：

  <style>
    .header {
      border: 1px solid red;
    }


    .content{
      display: flex;
    }
    .sidebar {
      flex: 2;
      border: 1px solid green;
      height: 500px;
    }
    .mainbox{
      flex: 8;
      border: 1px solid blue;
      height: 500px;
    }
  </style>

watch屬性的使用

考慮一個問題：想要實現 名 和 姓 兩個文本框的內容改變，則全名的文本框中的值也跟着改變；（用以前的知識如何實現？？？）

1. 監聽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>

2. 監聽路由對象的改變：

<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>

computed計算屬性的使用

1. 默認只有getter的計算屬性：

<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'
      },
      methods: {},
      computed: { // 計算屬性； 特點：當計算屬性中所以來的任何一個 data 屬性改變之後，都會重新觸發 本計算屬性 的重新計算，從而更新 fullName 的值
        fullName() {
          return this.firstName + ' - ' + this.lastName;
        }
      }
    });
  </script>

2. 定義有getter和setter的計算屬性：

<div id="app">
    <input type="text" v-model="firstName">
    <input type="text" v-model="lastName">
    <!-- 點擊按鈕重新爲 計算屬性 fullName 賦值 -->
    <input type="button" value="修改fullName" @click="changeName">


    <span>{{fullName}}</span>
  </div>


  <script>
    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        firstName: 'jack',
        lastName: 'chen'
      },
      methods: {
        changeName() {
          this.fullName = 'TOM - chen2';
        }
      },
      computed: {
        fullName: {
          get: function () {
            return this.firstName + ' - ' + this.lastName;
          },
          set: function (newVal) {
            var parts = newVal.split(' - ');
            this.firstName = parts[0];
            this.lastName = parts[1];
          }
        }
      }
    });
  </script>

watch、computed和methods之間的對比

1. computed屬性的結果會被緩存，除非依賴的響應式屬性變化纔會重新計算。主要當作屬性來使用；
2. methods方法表示一個具體的操作，主要書寫業務邏輯；
3. watch一個對象，鍵是需要觀察的表達式，值是對應回調函數。主要用來監聽某些特定數據的變化，從而進行某些具體的業務邏輯操作；可以看作是computed和methods的結合體；

nrm的安裝使用

作用：提供了一些最常用的NPM包鏡像地址，能夠讓我們快速的切換安裝包時候的服務器地址；
什麼是鏡像：原來包剛一開始是隻存在於國外的NPM服務器，但是由於網絡原因，經常訪問不到，這時候，我們可以在國內，創建一個和官網完全一樣的NPM服務器，只不過，數據都是從人家那裏拿過來的，除此之外，使用方式完全一樣；

1. 運行npm i nrm -g全局安裝nrm包；
2. 使用nrm ls查看當前所有可用的鏡像源地址以及當前所使用的鏡像源地址；
3. 使用nrm use npm或nrm use taobao切換不同的鏡像源地址；

相關文件

1. URL中的hash（井號）