溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了學習Vue.js框架時所編寫的程序代碼與學習心得，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
學習基礎：
掌握 HTML、CSS、JavaScript 相關的基礎知識。好吧，我
掌握 npm 包管理器的基本用法。
了解 B/S 應用程序架構的基本原理。
學習資料：
視頻教程：黑馬程序員之 Vue.js 教學視頻
線上文檔：Vue.js 官方教程
參考書籍：《深入淺出 Vue.js》
學習目標：
開發一個"云端記事本"應用。
這部分筆記將記錄我對 Vue.js 框架的概念性了解，以及在項目中引入該框架的具體方法，并編寫一個"Hello World"程序。
Vue.js 是一套用于構建用戶界面的漸進式框架。該框架被設計為可以自底向上逐層應用，它的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue.js 也完全能夠為復雜的單頁應用提供驅動。簡而言之，Vue.js 具有以下特性：
使用了傳統 HTML 類似的模版語法，對于新手來說，或許更易于上手。
使用了虛擬的 DOM 模型，簡化了對頁面元素的操作方式。
使用了響應式的視圖組件，有助于提高程序界面的用戶體驗。
頁面渲染速度極快，能賦予應用程序良好的執行性能。
既可以像 React 一樣提供用于構建復雜大型應用的路由接口。
也可以像 jQuery 一樣提供使用簡單、且封裝良好的操作接口。
當然，由于 Vue.js 的作者本身是一個中國人，所以 Vue.js 社區的中文資料也相比其他 JavaScript 框架社區要豐富一些，這對于很多習慣中文閱讀的用戶來說，或許也是選擇使用這一框架的原因。
和大多數 JavaScript 前端程序庫和應用框架一樣，在自己的項目中引入 Vue.js 框架主要有 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>
<p id="app">
<h2> {{ sayHello }} </h2>
<img :src="vueLogo" style="width:200px">
</p>
</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 框架已經被引入到了程序中，并被成功執行起來了。
更多相關免費學習推薦：js視頻教程
感謝你能夠認真閱讀完這篇文章，希望小編分享的“學習Vue.js框架時所編寫的程序代碼與學習心得”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
