在之前的實驗中，我們所演示的基本都是如何構建自定義組件的方法，但在具體開發實踐中，並非項目中所有的組件都是需要程序員們自己動手來創建的。畢竟在程序設計領域，“不要重復發明輪子”也是一項理應受到所有程序員遵守的基本原則。換而言之，在親自動手創建一個組件之前，程序員們理應先確認一下 Vue.js 框架的內置組件庫，以及當前流行的第三方組件庫中是否已經提供了類似功能的組件。如果有的話，就直接拿來使用即可，不必再去自定義一個功能重復的組件了。遵守這一基本原則不僅可以避免重復勞動，提高程序員們的項目開發效率，而且由於這些組件庫提供的組件通常都經歷過更嚴格、更系統性的測試和優化，所以直接使用它們來完成相關任務也有助於改善程序本身的性能和安全性。
使用內置組件
根據 Vue.js 框架的官方文檔，該框架主要為用戶提供了以下五個內置組件，讓我們先來簡單介紹這些組件的功能：
component組件：該組件主要用於在用戶界面中進行界面元素（包括自定義標簽）的動態切換。transition組件：該組件主要用於定義在用戶界面中切換界面元素（包括自定義標簽）時的動畫效果。transition-group組件：該組件主要用於定義在用戶界面中分組切換多個界面元素（包括自定義標簽）時的動畫效果。keep-alive組件：該組件主要用於在組件切換的過程中緩存不活動的組件對象，以便該組件被切換回來時能維持之前的狀態。slot組件：該組件主要用於在自定義組件模板預留其他組件標簽或 HTML 標准標簽可以插入的插槽位置。
細心的讀者可能已經發現了，上述組件除了slot組件是用於在自定義組件時預留插槽之外（我們在之前的實驗中已經演示過了該組件的使用方法），其他四個組件都與用戶界面中界面元素的切換有關。這讓人想到通過一個讓用戶在登錄界面和注冊界面之間來回切換的實驗來演示這些內置組件的使用方法。下面先從component組件開始，讓我們執行以下步驟來開始構建這個筆記系列的第六個實驗：
-
首先在
code/00_test目錄中再創建一個名為component_users的目錄，並在該目錄下創建public和src這兩個子目錄。 -
由於
component_users實驗所需要的依賴項以及目錄結構都與component_3實驗相同，為了免除不必要的工作量，節省花費在該實驗項目配置工作上的時間，我們可以直接將component_3目錄下的package.json和webpack.config.js這兩個分別與依賴項與項目打包相關的配置文件復制到component_users目錄下（並根據需要稍作修改），然后在component_users目錄下執行npm install命令來安裝已經配置在package.json文件中的項目依賴項。 -
在
src目錄下創建一個名為userLogin.vue文件，並在其中創建用於定義用戶登錄界面的組件。具體代碼如下：<template> <div id="tab-login"> <table> <tr> <td>用戶名：</td> <td><input type="text" v-model="userName"></td> </tr> <tr> <td>密 碼：</td> <td><input type="password" v-model="password"></td> </tr> <tr> <td><input type="button" value="登錄" @click="login"></td> <td><input type="button" value="重置" @click="reset"></td> </tr> </table> </div> </template> <script> export default { name: "tab-login", props : ['value'], data: function() { return { userName: '', password: '' }; }, methods: { login: function() { if(this.userName !== '' && this.password !== '') { if(this.userName === 'owlman' && this.password === '0000') { this.$emit('input', true); } else { window.alert('用戶名或密碼錯誤！'); } } else { window.alert('用戶名與密碼都不能為空！'); } }, reset: function() { this.userName = ''; this.password = ''; } } }; </script> -
在
src目錄下創建一個名為userSignUp.vue文件，並在其中創建用於定義用戶注冊界面的組件。具體代碼如下：<template> <div id="tab-sign"> <table> <tr> <td>請輸入用戶名：</td> <td><input type="text" v-model="userName"></td> </tr> <tr> <td>請設置密碼：</td> <td><input type="password" v-model="password"></td> </tr> <tr> <td>請重復密碼：</td> <td><input type="password" v-model="rePassword"></td> </tr> <tr> <td><input type="button" value="注冊" @click="signUp"></td> <td><input type="button" value="重置" @click="reset"></td> </tr> </table> </div> </template> <script> export default { name: "tab-sign", data() { return { userName: '', password: '', rePassword: '' }; }, methods: { signUp: function() { if(this.userName !== '' && this.password !== '' && this.rePassword !== '') { if(this.password === this.rePassword) { window.alert('用戶注冊'); } else { window.alert('你兩次輸入的密碼不一致！'); } } else { window.alert('請正確填寫注冊信息！'); } }, reset: function() { this.userName = ''; this.password = ''; this.rePassword = ''; } } }; </script> -
在
src目錄下創建main.js文件，並在實現 Vue 對象時將上面兩個新建的組件注冊成局部組件，具體代碼如下：import Vue from 'vue'; import userLogin from './userLogin.vue'; import userSignUp from './userSignUp.vue'; new Vue({ el: '#app', data: { componentId: 'login', isLogin: false }, components: { login: userLogin, signup : userSignUp } }) -
在
src目錄下創建index.htm文件，並在設計應用程序的用戶界面時使用<component>標簽指定首先要載入的組件，並用<input>標簽在該界面中設置兩個用於切換組件的按鈕元素，具體代碼如下：<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <style> body { background: black; color: floralwhite; } .box { width: 400px; height: 300px; border-radius: 14px; padding: 14px; color: black; background: floralwhite; } </style> <title>Vue 組件實驗（6）：使用動態組件</title> </head> <body> <div id="app" class="box"> <h1>用戶登錄</h1> <div v-show="!isLogin"> <input type="button" value="注冊新用戶" @click="componentId='signup'"> <input type="button" value="用戶登錄" @click="componentId='login'"> <component :is="componentId" v-model="isLogin"></component> </div> <div v-show="isLogin">登錄成功</div> </div> </body> </html> -
用瀏覽器訪問
public目錄下的index.html文件，就可以看到最后的結果了，如下圖所示：
在上述代碼中，讀者可以看到我們在使用component組件時主要設置了兩個屬性。首先是is屬性，這是使用component組件必須要設置的屬性。該屬性應該是一個字符串類型的值，主要用於在一組要被切換的組件中指定當前被激活的組件。在這里，我們先用v-bind指令將其綁定到了 Vue 對象中一個名為componentId的data成員上，然后再通過兩個按鈕元素的單擊事件來改變該屬性的值，從而實現了在userLoin和userSignUp這兩個組件之間的切換。接下來是用v-model指令雙向綁定的 Vue 對象中另一個名為isLogin的data成員，這不是使用component組件必須要設置的數學，我們綁定該數據是為了記錄用戶的登錄狀態，並以此來決定應用程序是否需要在用戶界面中顯示與用戶登錄與注冊功能相關的界面元素。
實驗進行到這一步，我們事實上已經在應用程序的用戶界面中初步實現了一個與用戶登錄與注冊功能相關的模塊，但這個模塊還存在着一個小問題亟待解決，那就是組件在被切換時已經獲得的用戶輸入會被丟失。也就是說，如果我們在用戶注冊界面中輸入信息的過程中不小心用鼠標單擊了“用戶登錄”按鈕元素，因此切換到了用戶登錄界面，然后再切換回去時之前輸入的信息就會全部丟失，這在用戶注冊時需要輸入輸入較多信息的應用程序中可能會帶來較差的用戶體驗，在 Vue.js 框架中，我們可以使用keep-alive組件來解決這個問題，該組件的使用方法非常簡單，只需要將上面的component組件的標簽放到keep-alive組件的標簽內部即可，像這樣：
<keep-alive>
<component :is="componentId" v-model="isLogin"></component>
</keep-alive>
除此之外，程序員們還可以通過在transition組件在界面元素切換過程中加入一些自己想要的過渡效果。下面是我們在使用transition組件可以設置的主要屬性：
name屬性：該屬性是一個字符串類型的值，主要用於自動生成界面元素在切換過程中過渡樣式的 CSS 類名。例如當我們將name屬性的值設置為'usersModule'時，就等於自動創建了.usersModule-enter、.usersModule-enter-active等一系列樣式的 CSS 類名。appear屬性：該屬性是一個布爾類型的值，主要用於指定是否要在用戶界面初始化時就使用過渡樣式。默認值為false。css屬性：該屬性是一個布爾類型的值，主要用於指定是否要使用 CSS 樣式類來定義過渡效果。默認值為true。type屬性：該屬性是一個字符串類型的值，主要用於指定過渡事件類型，偵聽過渡何時結束。有效值包括transition和animation。mode屬性：該屬性是一個字符串類型的值，主要用於控制界面元素退出/進入過渡的時間序列。有效值包括out-in和in-out。
通常情況下，我們只需依靠 CSS 樣式就可以實現一些簡單夠用的過渡效果了。但當transition組件的css屬性值為false或需要實現更復雜的過渡效果時，就需要通過定義一些由transition組件預設的事件鈎子函數來定義一些需要通過 JavaScript 代碼來執行的操作，下面是我們在使用transition組件時可以定義的主要事件鈎子函數：
before-enter函數：該鈎子函數會在相關界面元素進入之前用戶界面時被調用。before-leave函數：該鈎子函數會在相關界面元素退出之前用戶界面時被調用。enter函數：該鈎子函數會在相關界面元素進入用戶界面時被調用。leave函數：該鈎子函數會在相關界面元素退出用戶界面時被調用。after-enter函數：該鈎子函數會在相關界面元素進入之后用戶界面時被調用。after-leave函數：該鈎子函數會在相關界面元素退出之后用戶界面時被調用。
這里需要說明的是，以上列出的只是一些常用的屬性和函數，並非是transition組件提供的所有屬性和事件鈎子函數，讀者如果閱讀關於該組件更全面的參考資料，還請自行去查閱 Vue.js 的官方文檔[^3]。下面，我們來簡單示范一下transition組件的基本使用方式。在之前的第六個實驗中，如果想在userLoin和userSignUp這兩個組件的切換過程中加入一些過渡效果，可以將要切換的組件放到transition組件標簽內部，並根據需要設置該組件的屬性，例如像這樣：
<transition name='usersModule' mode='out-in'>
<keep-alive>
<component :is="componentId" v-model="isLogin"></component>
</keep-alive>
</transition>
在這里，我們先將transition組件的mode屬性設置成了out-in，使得界面元素的切換順序變成了先退出再進入，然后在將其name屬性設置成了userModule。正如之前所說，name屬性的設置會自動創建一系列用於定義過渡效果 CSS 類名。下面，我們只需要根據項目的需要在index.htm文件的<style>標簽或其外鏈的 CSS 文件中定義一下其中的某個類，例如像這樣：
@keyframes usersAni {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
.usersModule-leave-active {
animation: usersAni .5s;
}
如你所見，我們在上述代碼中定義了一個縮小放大效果的簡單過場動畫，然后在名為usersModule-leave-active的 CSS 類中使用了它。這樣一來，讀者就可以在userLoin和userSignUp這兩個組件的切換過程中看到類似放大鏡掃過的過渡效果了。當然，當前這個實驗中演示的只是最簡單的過渡效果設置。在后續具體的項目實踐中，我們將陸續演示如何使用transition組件和transition-group組件設置出更復雜、更具實用功能的過渡效果。
引入外部組件
由於 Vue.js 是一個開放性的前端框架，所以這些年在開源社區已經累積了不少既美觀又好用的第三方組件庫。在實際項目中，程序員們更多時候會選擇從外部引入第三方的組件來構建應用程序的用戶界面。下面，我們就以 Element 組件庫為例來介紹一下如何在一個基於 Vue.js 框架的前端項目中引入第三方組件庫。
-
先來創建第七個實驗項目所在的目錄，即在
code/00_test目錄中再創建一個名為hello_element的目錄，並在該目錄下創建public和src這兩個子目錄。 -
由於
hello_element實驗所需要的依賴項以及目錄結構都與component_3實驗相同，為了免除不必要的工作量，節省花費在該實驗項目配置工作上的時間，我們可以直接將component_3目錄下的package.json和webpack.config.js這兩個分別與依賴項與項目打包相關的配置文件復制到hello_element目錄下（並根據需要稍作修改），然后在hello_element目錄下執行npm install命令來安裝已經配置在package.json文件中的項目依賴項。 -
在
hello_element目錄下執行npm install --save element-ui命令將 Element 組件庫安裝到當前實驗項目中。 -
在
src目錄下創建main.js文件。在該文件中，我們會先使用import語句分別導入 Vue.js 框架與 Element 組件庫，接着再通過調用Vue.use()方法將 Element 組件庫加載到 Vue.js 框架中。然后就可以照常創建 Vue 對象了，具體代碼如下：import Vue from 'vue'; import ElementUI from 'element-ui'; Vue.use(ElementUI); new Vue({ el: '#app', data : { title: 'Element 組件庫', message : '一套為開發者、設計師和產品經理准備的基於 Vue 2.0 的桌面端組件庫。' }, methods : { goDocument : function() { window.open('https://element.faas.ele.me/#/zh-CN', '_blank'); } } }); -
在
src目錄下創建index.htm文件，並在設計應用程序的用戶界面時使用 Element 組件庫中的組件標簽。至於該組件庫中有多少可用的組件以及這些組件所對應的標簽，讀者可以自行查閱其官方文檔[^4]。我們在這里只是簡單示范了Card組件和Button組件的使用方法，為的是證明組件庫已經被成功引入到項目中，具體代碼如下：<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <!-- 在正式使用 Element 組件之前，請務必要記得加載其樣式文件。 --> <link rel="stylesheet" href="../node_modules/element-ui/lib/theme-chalk/index.css"> <title>Vue 組件實驗（7）：引入第三方組件庫</title> </head> <body> <div id="app"> <h1>引入第三方組件庫</h1> <el-card shadow="always"> <h2> {{ title }} </h2> <p> {{ message }} </p> <el-button type="info" @click='goDocument'> 查看官方文檔 </el-button> </el-card> </div> </body> </html> -
用瀏覽器訪問
public目錄下的index.html文件，就可以看到最后的結果了，如下圖所示：
需要特別說明的是，我們在這里只是簡單地介紹了如何在一個基於 Vue.js 框架的前端項目中引入第三方組件庫。至於在實際生產環境中是否真的就使用 Element 組件庫，還是選擇別的組件庫，還是要根據項目的實際需求和這些組件庫的具體特性來做決定。在后續具體的項目實踐中，我們將陸續演示如何使用這些第三方組件庫設計出更復雜、更符合實際需求的用戶界面。