Vue.js 學習記錄之一：學習規劃和了解 Vue.js

欄目介紹學習規劃和了解 Vue.js，可以一起來學習。

這篇學習筆記將記錄一些我個人在學習 Vue.js 框架時所編寫的程式程式碼與學習心得。為此，我會在ProgrammingLanguage/JavaScript目錄下建立一個名為的vuejs目錄，並在該目錄下設定以下兩個子目錄：

note目錄用於存放markdown格式的筆記。
code目錄則用於存放筆記中所記錄的程式程式碼。

學習規劃

學習基礎：
- 掌握 HTML、CSS、JavaScript 相關的基礎知識。好吧，我
- 掌握 npm 包管理器的基本用法。
- 瞭解 B/S 應用程式架構的基本原理。
學習資料：
- 視訊教學：黑馬程式設計師之 Vue.js 教學視訊
- 線上檔案：Vue.js 官方教學
- 參考書籍：《深入淺出 Vue.js》
學習目標：
- 開發一個"雲端記事本"應用。

第 1 部分：瞭解 Vue.js 框架

這部分筆記將記錄我對 Vue.js 框架的概念性瞭解，以及在專案中引入該框架的具體方法，並編寫一個"Hello World"程式。

Vue.js 簡介

Vue.js 是一套用於構建使用者介面的漸進式框架。該框架被設計為可以自底向上逐層應用，它的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合。另一方面，當與現代化的工具鏈以及各種支援類庫結合使用時，Vue.js 也完全能夠為複雜的單頁應用提供驅動。簡而言之，Vue.js 具有以下特性：

使用了傳統 HTML 類似的模版語法，對於新手來說，或許更易於上手。
使用了虛擬的 DOM 模型，簡化了對頁面元素的操作方式。
使用了響應式的檢視元件，有助於提高程式介面的使用者體驗。
頁面渲染速度極快，能賦予應用程式良好的執行效能。
既可以像 React 一樣提供用於構建複雜大型應用的路由介面。
也可以像 jQuery 一樣提供使用簡單、且封裝良好的操作介面。

當然，由於 Vue.js 的作者本身是一箇中國人，所以 Vue.js 社群的中文資料也相比其他 JavaScript 框架社群要豐富一些，這對於很多習慣中文閱讀的使用者來說，或許也是選擇使用這一框架的原因。

引入 Vue.js 框架

和大多數 JavaScript 前端程式庫和應用框架一樣，在自己的專案中引入 Vue.js 框架主要有 CDN 參照和本地參照兩種方式，下面分別來學習一下它們。

CDN 參照

CDN 是內容分發網路（Content Delivery Network 或 Content Distribution Network）的縮寫，這是一種利用現有的網際網路絡系統中最靠近目標使用者的伺服器，更快、更可靠地分發音樂、圖片、視訊、應用程式以及其他資料資料的方式，目的是提供高效能、可延伸性及低成本的網路內容傳遞給使用者。換而言之，在使用 CDN 這種參照方式時，Vue.js 框架檔案會被儲存在指定的 CDN 服務網路的某個伺服器節點上，由該服務來集中負責針對該框架檔案的存取負載並維護該框架的版本，而我們只要在 HTML 檔案的<script>標籤中參照相應 CDN 服務的 URL 即可，像這樣：

<!-- 開發環境版本，包含了有幫助的命令列警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 或者 -->
<!-- 生產環境版本，優化了檔案大小和載入速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

在上述範例中，我測試了使用cdn.jsdelivr.net提供的 CDN 服務來參照 Vue.js 框架，這也是 Vue.js 官方教學中推薦的服務。至於是該參照開發環境的版本，還是生產環境的版本，這就要取決於具體的使用場景了。在通常情況下，我會選擇在程式開發階段參照反饋資訊相對豐富的開發環境版本，而等到程式釋出之時再切換至更追求執行效率的生產環境版本。下面來了解一下使用 CDN 這種參照方式的優勢：

CDN 的總承載量可以比單一骨幹最大的頻寬還要大。這使得內容分發網路可以承載的使用者數量比起傳統單一伺服器多。
CDN 伺服器可以被放置到不同地點，這有助於減少計算機之間互連的流量，進而降低頻寬成本。
CDN 通常會指派較近、較順暢的伺服器節點將資料傳輸給使用者。雖說距離並非影響傳輸的絕對因素，但這可以儘可能提高效能和使用者體驗。
CDN 上儲存的資料通常都會有異地備援，即當某個伺服器故障時，系統將會呼叫其他鄰近地區的伺服器資料，以提高服務的可靠度。
CDN 提供給服務提供者更多的控制權，即提供服務的人可以針對客戶、地區，或是其他因素來做相應的調整。

當然了，這種參照方式歸根結底都得依賴於網路環境，甚至很多時候是國外的網路環境，由於眾所周知的原因，我們的網路環境經常會受到各種不可抗力的影響，所以我個人更傾向於將框架檔案下載到本地來參照。

本地參照

正如上面所說，如果想減少意外狀況，最好的選擇是將 Vue.js 的框架檔案下載到本地，然後再參照它們。下載這類檔案的方式有很多，現如今為了便於更新版本，人們通常會選擇使用 npm 這類包管理器來下載 JavaScript 的各種程式庫和應用框架。具體做法就是在之前建立的code目錄下執行以下命令：

npm install vue --save
# 如果需要相應的許可權，可以使用 sudo 命令來提權

如果安裝過程一切順利，接下來就只需要在 HTML 檔案的<script>標籤中參照框架檔案的路徑即可，像這樣：

<!-- 開發環境版本，包含了有幫助的命令列警告 -->
<script src="node_modules/vue/dist/vue.js"></script>
<!-- 或者 -->
<!-- 生產環境版本，優化了檔案大小和載入速度 -->
<script src="node_modules/vue/dist/vue.min.js"></script>

在這裡，選擇開發環境版本還是生產環境版本的依據是一樣的，就不再重複了。下面來驗證一下框架檔案是否被成功引入。

程式驗證

我將通過編寫一個"Hello World"程式來驗證 Vue.js 框架是否已被成功引入，具體步驟如下：

在code目錄下建立一個名為01_sayHello的專案目錄，並在該目錄下設定以下兩個子目錄：
- img目錄：用於存放圖片資源。
- js目錄：用於存放自定義 JavaScript 指令碼檔案。
將名為logo.png的圖表檔案儲存到code/01_sayHello/img目錄中。

在code/01_sayHello目錄中建立一個名為index.htm的 HTML 檔案，並在其中輸入如下程式碼：

<!DOCTYPE html>
<html lang="zh-cn">
<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">
    <script defer="defer" src="../node_modules/vue/dist/vue.js"></script>
    <script defer="defer" src="js/main.js"></script>
    <title>你好，Vue.js</title>
</head>
<body>
   <p id="app">
      <h1> {{ sayHello }} </h1>
      <img :src="vueLogo" style="width:200px">
   </p>
</body>
</html>

在code/01_sayHello/js目錄中建立一個名為main.js的 JavaScript 指令碼檔案，並在其中輸入如下程式碼：

// 程式名稱： sayHello
// 實現目標：
//   1. 驗證 Vue.js 執行環境
//   2. 體驗構建 Vue.js 程式的基本步驟

const app = new Vue({
   el: '#app',
   data:{
     sayHello: '你好，Vue.js！',
     vueLogo: 'img/logo.png'
   }
});

接下來只需將相關的 Web 服務執行起來（該伺服器可以是 Apache 或者 Nginx，也可以是 VSCode 的 Live Sever 外掛），然後如果在 Web 瀏覽器中看到如下頁面，就說明 Vue.js 框架已經被引入到了程式中，並被成功執行起來了。

更多相關免費學習推薦：

以上就是Vue.js 學習記錄之一：學習規劃和了解 Vue.js的詳細內容，更多請關注TW511.COM其它相關文章！