這篇學習筆記將記錄一些我個人在學習 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> <div id="app"> <h1> {{ sayHello }} </h1> <img :src="vueLogo" style="width:200px"> </div> </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 框架已經被引入到了程序中，並被成功執行起來了。
