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

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

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

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

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

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

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

Vue.js 簡(jiǎn)介

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

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

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

引入 Vue.js 框架

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

CDN 引用

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

<!-- 開(kāi)發(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>

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

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