Vue.js教程欄目介紹學習規(guī)劃和了解 Vue.js，可以一起來學習。

這篇學習筆記將記錄一些我個人在學習 Vue.js 框架時所編寫的程序代碼與學習心得。為此，我會在ProgrammingLanguage/JavaScript目錄下創(chuàng)建一個名為的vuejs目錄，并在該目錄下設(shè)置以下兩個子目錄：

• note目錄用于存放markdown格式的筆記。
• code目錄則用于存放筆記中所記錄的程序代碼。

學習規(guī)劃

• 學習基礎(chǔ)：
  • 掌握 HTML、CSS、JavaScript 相關(guān)的基礎(chǔ)知識。好吧，我
  • 掌握 npm 包管理器的基本用法。
  • 了解 B/S 應用程序架構(gòu)的基本原理。
• 學習資料：
  • 視頻教程：黑馬程序員之 Vue.js 教學視頻
  • 線上文檔：Vue.js 官方教程
  • 參考書籍：《深入淺出 Vue.js》
• 學習目標：
  • 開發(fā)一個"云端記事本"應用。

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

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

Vue.js 簡介

Vue.js 是一套用于構(gòu)建用戶界面的漸進式框架。該框架被設(shè)計為可以自底向上逐層應用，它的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時，Vue.js 也完全能夠為復雜的單頁應用提供驅(qū)動。簡而言之，Vue.js 具有以下特性：

1. 使用了傳統(tǒng) HTML 類似的模版語法，對于新手來說，或許更易于上手。
2. 使用了虛擬的 DOM 模型，簡化了對頁面元素的操作方式。
3. 使用了響應式的視圖組件，有助于提高程序界面的用戶體驗。
4. 頁面渲染速度極快，能賦予應用程序良好的執(zhí)行性能。
5. 既可以像 React 一樣提供用于構(gòu)建復雜大型應用的路由接口。
6. 也可以像 jQuery 一樣提供使用簡單、且封裝良好的操作接口。

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

引入 Vue.js 框架

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

CDN 引用

CDN 是內(nèi)容分發(fā)網(wǎng)絡(luò)（Content Delivery Network 或 Content Distribution Network）的縮寫，這是一種利用現(xiàn)有的互聯(lián)網(wǎng)絡(luò)系統(tǒng)中最靠近目標用戶的服務(wù)器，更快、更可靠地分發(fā)音樂、圖片、視頻、應用程序以及其他數(shù)據(jù)資料的方式，目的是提供高性能、可擴展性及低成本的網(wǎng)絡(luò)內(nèi)容傳遞給用戶。換而言之，在使用 CDN 這種引用方式時，Vue.js 框架文件會被存儲在指定的 CDN 服務(wù)網(wǎng)絡(luò)的某個服務(wù)器節(jié)點上，由該服務(wù)來集中負責針對該框架文件的訪問負載并維護該框架的版本，而我們只要在 HTML 文檔的<script>標簽中引用相應 CDN 服務(wù)的 URL 即可，像這樣：

<!-- 開發(fā)環(huán)境版本，包含了有幫助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 或者 --> <!-- 生產(chǎn)環(huán)境版本，優(yōu)化了文件大小和載入速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script>

在上述示例中，我測試了使用cdn.jsdelivr.net提供的 CDN 服務(wù)來引用 Vue.js 框架，這也是 Vue.js 官方教程中推薦的服務(wù)。至于是該引用開發(fā)環(huán)境的版本，還是生產(chǎn)環(huán)境的版本，這就要取決于具體的使用場景了。在通常情況下，我會選擇在程序開發(fā)階段引用反饋信息相對豐富的開發(fā)環(huán)境版本，而等到程序發(fā)布之時再切換至更追求執(zhí)行效率的生產(chǎn)環(huán)境版本。下面來了解一下使用 CDN 這種引用方式的優(yōu)勢：

• CDN 的總承載量可以比單一骨干最大的帶寬還要大。這使得內(nèi)容分發(fā)網(wǎng)絡(luò)可以承載的用戶數(shù)量比起傳統(tǒng)單一服務(wù)器多。
• CDN 服務(wù)器可以被放置到不同地點，這有助于減少計算機之間互連的流量，進而降低帶寬成本。
• CDN 通常會指派較近、較順暢的服務(wù)器節(jié)點將資料傳輸給用戶。雖說距離并非影響傳輸?shù)慕^對因素，但這可以盡可能提高性能和用戶體驗。
• CDN 上存儲的資料通常都會有異地備援，即當某個服務(wù)器故障時，系統(tǒng)將會調(diào)用其他鄰近地區(qū)的服務(wù)器資料，以提高服務(wù)的可靠度。
• CDN 提供給服務(wù)提供者