學(xué)習(xí)Vue.js框架時(shí)所編寫的程序代碼與學(xué)習(xí)心得

這篇文章主要介紹了學(xué)習(xí)Vue.js框架時(shí)所編寫的程序代碼與學(xué)習(xí)心得，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

學(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)目中引入該框架的具體方法，并編寫一個(gè)"Hello World"程序。

Vue.js 簡(jiǎn)介

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

1. 使用了傳統(tǒng) HTML 類似的模版語(yǔ)法，對(duì)于新手來(lái)說(shuō)，或許更易于上手。

2. 使用了虛擬的 DOM 模型，簡(jiǎn)化了對(duì)頁(yè)面元素的操作方式。

3. 使用了響應(yīng)式的視圖組件，有助于提高程序界面的用戶體驗(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í)慣中文閱讀的用戶來(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àn)有的互聯(lián)網(wǎng)絡(luò)系統(tǒng)中最靠近目標(biāo)用戶的服務(wù)器，更快、更可靠地分發(fā)音樂(lè)、圖片、視頻、應(yīng)用程序以及其他數(shù)據(jù)資料的方式，目的是提供高性能、可擴(kuò)展性及低成本的網(wǎng)絡(luò)內(nèi)容傳遞給用戶。換而言之，在使用 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ò)可以承載的用戶數(shù)量比起傳統(tǒng)單一服務(wù)器多。

• CDN 服務(wù)器可以被放置到不同地點(diǎn)，這有助于減少計(jì)算機(jī)之間互連的流量，進(jìn)而降低帶寬成本。

• CDN 通常會(huì)指派較近、較順暢的服務(wù)器節(jié)點(diǎn)將資料傳輸給用戶。雖說(shuō)距離并非影響傳輸?shù)慕^對(duì)因素，但這可以盡可能提高性能和用戶體驗(yàn)。

• CDN 上存儲(chǔ)的資料通常都會(huì)有異地備援，即當(dāng)某個(gè)服務(wù)器故障時(shí)，系統(tǒng)將會(huì)調(diào)用其他鄰近地區(qū)的服務(wù)器資料，以提高服務(wù)的可靠度。

• CDN 提供給服務(wù)提供者更多的控制權(quán)，即提供服務(wù)的人可以針對(duì)客戶、地區(qū)，或是其他因素來(lái)做相應(yīng)的調(diào)整。

當(dāng)然了，這種引用方式歸根結(jié)底都得依賴于網(wǎng)絡(luò)環(huán)境，甚至很多時(shí)候是國(guó)外的網(wǎng)絡(luò)環(huán)境，由于眾所周知的原因，我們的網(wǎng)絡(luò)環(huán)境經(jīng)常會(huì)受到各種不可抗力的影響，所以我個(gè)人更傾向于將框架文件下載到本地來(lái)引用。

本地引用

正如上面所說(shuō)，如果想減少意外狀況，最好的選擇是將 Vue.js 的框架文件下載到本地，然后再引用它們。下載這類文件的方式有很多，現(xiàn)如今為了便于更新版本，人們通常會(huì)選擇使用 npm 這類包管理器來(lái)下載 JavaScript 的各種程序庫(kù)和應(yīng)用框架。具體做法就是在之前創(chuàng)建的code目錄下執(zhí)行以下命令：

npm install vue --save
# 如果需要相應(yīng)的權(quán)限，可以使用 sudo 命令來(lái)提權(quán)

如果安裝過(guò)程一切順利，接下來(lái)就只需要在 HTML 文檔的<script>標(biāo)簽中引用框架文件的路徑即可，像這樣：

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

在這里，選擇開(kāi)發(fā)環(huán)境版本還是生產(chǎn)環(huán)境版本的依據(jù)是一樣的，就不再重復(fù)了。下面來(lái)驗(yàn)證一下框架文件是否被成功引入。

程序驗(yàn)證

我將通過(guò)編寫一個(gè)"Hello World"程序來(lái)驗(yàn)證 Vue.js 框架是否已被成功引入，具體步驟如下：

1. 在code目錄下創(chuàng)建一個(gè)名為01_sayHello的項(xiàng)目目錄，并在該目錄下設(shè)置以下兩個(gè)子目錄：

• img目錄：用于存放圖片資源。

• js目錄：用于存放自定義 JavaScript 腳本文件。

2. 將名為logo.png的圖表文件存儲(chǔ)到code/01_sayHello/img目錄中。

3. 在code/01_sayHello目錄中創(chuàng)建一個(gè)名為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">
         <h2> {{ sayHello }} </h2>
         <img :src="vueLogo" style="width:200px">
      </p>
   </body>
   </html>

4. 在code/01_sayHello/js目錄中創(chuàng)建一個(gè)名為main.js的 JavaScript 腳本文檔，并在其中輸入如下代碼：

   // 程序名稱： sayHello
   // 實(shí)現(xiàn)目標(biāo)：
   //   1. 驗(yàn)證 Vue.js 執(zhí)行環(huán)境
   //   2. 體驗(yàn)構(gòu)建 Vue.js 程序的基本步驟
   
   const app = new Vue({
      el: '#app',
      data:{
        sayHello: '你好，Vue.js！',
        vueLogo: 'img/logo.png'
      }
   });

接下來(lái)只需將相關(guān)的 Web 服務(wù)運(yùn)行起來(lái)（該服務(wù)器可以是 Apache 或者 Nginx，也可以是 VSCode 的 Live Sever 插件），然后如果在 Web 瀏覽器中看到如下頁(yè)面，就說(shuō)明 Vue.js 框架已經(jīng)被引入到了程序中，并被成功執(zhí)行起來(lái)了。

更多相關(guān)免費(fèi)學(xué)習(xí)推薦：js視頻教程

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“學(xué)習(xí)Vue.js框架時(shí)所編寫的程序代碼與學(xué)習(xí)心得”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!