上一篇 Vue學習3-(語法)
下一篇 Vue學習5-(webpack)

組件與路由

小結

一、created()與mouted()方法

二、組件(第三種常用)

1、創建全局組件第一種方式

代碼：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- 1. 導入Vue的包 -->
  <script src="./lib/vue-2.5.9.js"></script>
</head>

<body>
  <!-- 2. 創建要控制的區域 -->
  <div id="app">
    <!-- 如何引入一個全局的Vue組件呢？ 直接把 組件的名稱，以標籤的形式，放到頁面上就好了！ -->
    <mycom1></mycom1>
  </div>

  <script>

    // 創建全局組件的第一種方式：   component
    const com1 = Vue.extend({
      template: '<h1>這是創建的第一個全局組件</h1>' // template 屬性，表示這個組件的 UI 代碼解構
    })
    // 使用 Vue.component 向全局註冊一個組件
    // Vue.component('組件的名稱', 組件的構造函數)
    Vue.component('mycom1', com1)

    const vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        getList() {

        }
      },
      filters: {},
      directives: {},
      created() { // 表示 data 數據 和 methods 方法都已經可用了
        this.getList()
      },
      mounted() { // 表示 內存中渲染好的 DOM 樹，已經掛載到了真實的頁面中；
        //在網頁中，有一些 第三方的 插件，需要初始化；  
        // 使用 Jquery 封裝出來的框架分爲兩部分：  UI 解構    JS 代碼 
        // 因此： 一些第三方的插件，如果要結合Vue來使用，而且，這個插件需要手動初始化JS邏輯，此時，必須放到 mounted ，否則，可能無法出現預期效果；
      }
    })

    // console.dir(com1)
  </script>
</body>

</html>

運行結果：

2、創建全局組件第二種方式

運行結果：

3、創建全局組件第三種方式

代碼：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.5.9.js"></script>
</head>

<body>
  <div id="app">
    <mycom3></mycom3>
    
    <mycom4></mycom4>
  </div>


  <div id="app2">
    <mycom3></mycom3>
  </div>


  <!-- 定義一個 template 標籤元素  -->
  <!-- 使用 Vue 提供的 template 標籤，可以定義組件的UI模板解構 -->
  <template id="tmpl">
    <div>
      <h3>哈哈，這是在外界定義的組件UI解構</h3>
      <h3>我是來搗亂的</h3>
    </div>
  </template>



  <script>

    // 這是定義的全局組件
    Vue.component('mycom3', {
      template: '#tmpl'
    })

    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      components: { // 定義實例中私有組件的   組件的名稱   和組件的 解構
        'mycom4': {
          template: '<h6>這是定義的私有組件</h6>'
        }
      }
    });


    var vm2 = new Vue({
      el: '#app2'
    })
  </script>




</body>

</html>

運行結果：

三、組件的私有data與methods

爲什麼要把組件中的 data 定義爲一個function並返回對象？ --解決聯動問題

四、組件的切換

1、登錄註冊切換

代碼：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.5.9.js"></script>
</head>

<body>
  <div id="app">

    <input type="button" value="顯示登錄" @click="flag=true">
    <input type="button" value="顯示註冊" @click="flag=false">

    <login v-if="flag"></login>
    <reg v-else="flag"></reg>

  </div>

  <script>
    Vue.component('login', {
      template: `<div>
        用戶名：<input type="text" /><br/>
        密碼：<input type="text" /><br/>
        <input type="button" value="登錄" />
      </div>`
    })

    Vue.component('reg', {
      template: '<h3>註冊組件</h3>'
    })

    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        flag: false // 如果 flag 爲true，表示顯示登錄組件，如果爲 false，則顯示註冊組件
      },
      methods: {}
    });
  </script>
</body>

</html>

2、多個組件切換及添加動畫效果

效果：

代碼：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.5.9.js"></script>
  <style>
    .v-enter {
      /* 即將進入時候的座標 */
      opacity: 0;
      transform: translateX(100px);
    }

    .v-leave-to {
      /* 離開時候，最終到達的位置 */
      opacity: 0;
      transform: translateX(-100px);
    }

    .v-enter-active,
    .v-leave-active {
      transition: all 0.4s ease;

      position: absolute;
    }
  </style>
</head>

<body>
  <div id="app">
    <!-- transition     transition-group    template     component -->
    <!-- 通過 component  的  :is 屬性，可以顯示指定【名稱】的組件 -->
    <a href="#" @click="comname='com1'">顯示組件1</a>&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="#" @click="comname='com2'">顯示組件2</a>&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="#" @click="comname='com3'">顯示組件3</a>&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="#" @click="comname='com4'">顯示組件4</a>&nbsp;&nbsp;&nbsp;&nbsp;


    <!-- <transition mode="out-in"> -->
    <transition>
      <component :is="comname"></component>
    </transition>
  </div>

  <script>

    Vue.component('com1', {
      template: '<h3>奔波霸</h3>'
    })

    Vue.component('com2', {
      template: '<h3>霸波奔</h3>'
    })

    Vue.component('com3', {
      template: '<h3>孫行者</h3>'
    })

    Vue.component('com4', {
      template: '<h3>者行孫</h3>'
    })

    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        comname: 'com1' // 在 data 上定義 comname 來指定要渲染的組件名稱
      },
      methods: {}
    });
  </script>
</body>

</html>

五、屬性綁定

1.如果要向子組件傳遞 data 中的數據，則使用屬性綁定的形式 v-bind: 縮寫：
2.如果要向子組件傳遞 methods 中的方法，則使用事件綁定的形式 v-on: 縮寫 @

1、父組件向子組件傳值

2、父組件向子組件傳對象

3、父組件傳遞方法給子組件

4、子組件向父組件傳遞數據

6、評論列表

效果展示：

代碼：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.5.9.js"></script>
</head>

<body>
  <div id="app">

    <!-- 評論框區域 -->
    <cmt-box @func="addNewCmt"></cmt-box>


    <ul>
      <cmt-item v-for="(item, i) in list" :item="item" :key="i"></cmt-item>
    </ul>

  </div>

  <script>

    Vue.component('cmt-item', {
      template: `<li>
        <h3>評論人：{{ item.name }}</h3>
        <h5>評論內容：{{ item.content }}</h5>
      </li>`,
      props: ['item']
    })


    Vue.component('cmt-box', {
      template: `<div>
      <label>評論人：</label>
      <br>
      <input type="text" v-model="name">
      <br>
      <label>評論內容：</label>
      <br>
      <textarea v-model="content"></textarea>
      <br>
      <input type="button" value="發表評論" @click="postComment">
    </div>`,
      data: function () {
        return {
          name: '',
          content: ''
        }
      },
      methods: {
        postComment() { // 發表評論
          // console.log('ok')
          const cmt = { name: this.name, content: this.content }
          // 子組件中，調用父組件傳遞過來的方法，然後可以把 子組件的數據，當作參數，傳遞給父組件的方法去使用
          this.$emit('func', cmt)
          this.name = this.content = ''
          // console.log(cmt)
        }
      }
    })

    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        list: [
          { name: 'zs', content: '沙發' },
          { name: 'ls', content: '板凳' },
          { name: 'qqq', content: '涼蓆' },
          { name: 'eee', content: '磚頭' }
        ]
      },
      methods: {
        addNewCmt(cmt) { // 添加新評論
          // console.log(cmt)
          this.list.push(cmt)
        }
      }
    });
  </script>
</body>

</html>

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

1、獲取元素

2、獲取組件

七、在Vue組件中data和props的區別

data 在組件中，要被定義成function並返回一個對象
props 在組件中，要被定義成數組，其中，數組的值都是字符串名，表示父組件傳遞過來的數據；
props 的數據，不要直接拿來修改，如果想要修改，必須在 data 上重新定義一個 屬性，然後把屬性的值 從 this.props 拿過來；

data 上的數據，都是組件自己私有的， data 上的數據，都是可讀可寫的 props 數據，都是外界傳遞過來的數據， props 中的數據只能讀取，不能重新寫入

八、路由

1、路由的基本使用（登錄註冊切換）

2、登錄註冊切換高亮

效果：

代碼：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.5.9.js"></script>
  <!-- 1. 導入路由JS文件 -->
  <script src="./lib/vue-router-v3.0.1.js"></script>

  <style>
    .router-link-active {
      color: red;
      font-weight: bold;
      font-style: italic;
      font-size: 20px;
      text-decoration: underline;
    }

    .my-active {
      color: orange;
      font-size: 30px;
    }
  </style>
</head>

<body>
  <div id="app">

    <!-- 路由鏈接 -->
    <router-link to="/login">登錄</router-link>
    <router-link to="/reg">註冊</router-link>

    <!-- 展示路由組件的容器 -->
    <router-view></router-view>

  </div>

  <script>

    // 2. 定義兩個要切換的組件
    const login = {
      template: '<h3>登錄組件</h3>'
    }
    const reg = {
      template: '<h3>註冊組件</h3>'
    }

    // 3. 創建路由對象
    const router = new VueRouter({
      routes: [ // 路由規則的數組
        // { path: '/', component: login },
        { path: '/', redirect: '/login' },     // node 的 express 框架中，有 res.redirect('/login')   
        { path: '/login', component: login },
        { path: '/reg', component: reg }
      ],
      linkActiveClass: 'my-active' // 配置默認被 選中路由的高亮類名的 ， 默認類名爲 router-link-active
    })

    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      router // 4. 把路由對象，掛載到 VM 實例上
    });
  </script>
</body>

</html>