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

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

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

學(xué)習(xí)規(guī)劃

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

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

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

Vue.js 簡介

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

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

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

引入 Vue.js 框架

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

CDN 引用

CDN 是內(nèi)容分發(fā)網(wǎng)絡(luò)（Content Delivery Network 或 Content Distribution Network）的縮寫，這是一種利用現(xiàn)有的互聯(lián)網(wǎng)絡(luò)系統(tǒng)中最靠近目標(biāo)用戶的服務(wù)器，更快、更可靠地分發(fā)音樂、圖片、視頻、應(yīng)用程序以及其他數(shù)據(jù)資料的方式，目的是提供高性能、可擴(kuò)展性及低成本的網(wǎng)絡(luò)內(nèi)容傳遞給用戶。換而言之，在使用 CDN 這種引用方式時，Vue.js 框架文件會被存儲在指定的 CDN 服務(wù)網(wǎng)絡(luò)的某個服務(wù)器節(jié)點(diǎn)上，由該服務(wù)來集中負(fù)責(zé)針對該框架文件的訪問負(fù)載并維護(hù)該框架的版本，而我們只要在 HTML 文檔的<script>標(biāo)簽中引用相應(yīng) 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ù)器可以被放置到不同地點(diǎn)，這有助于減少計算機(jī)之間互連的流量，進(jìn)而降低帶寬成本。
• CDN 通常會指派較近、較順暢的服務(wù)器節(jié)點(diǎn)將資料傳輸給用戶。雖說距離并非影響傳輸?shù)慕^對因素，但這可以盡可能提高性能和用戶體驗。
• CDN 上存儲的資料通常都會有異地備援，即當(dāng)某個服務(wù)器故障時，系統(tǒng)將會調(diào)用其他鄰近地區(qū)的服務(wù)器資料，以提高服務(wù)的可靠度。
• CDN 提供給服務(wù)提供者