Vue.js 學習記錄之一：學習規劃與了解 Vue.js-Vue.js-PHP中文網

首頁

web前端

Vue.js

Vue.js 學習記錄之一：學習規劃與了解 Vue.js

coldplay.xixi

Oct 12, 2020 pm 05:15 PM

vue.js

Vue.js教學專欄介紹學習規劃和了解 Vue.js，可以一起來學習。

Vue.js 學習記錄之一：學習規劃與了解 Vue.js

這篇學習筆記將記錄一些我個人在學習 Vue.js 框架時所寫的程式碼與學習心得。為此，我會在ProgrammingLanguage/JavaScript目錄下建立一個名為的vuejs目錄，並在該目錄下設定以下兩個子目錄：

#note目錄用來存放markdown格式的筆記。
code目錄則用來存放筆記中所記錄的程式碼。

學習規劃

學習基礎：
- 掌握 HTML、CSS、JavaScript 相關的基礎知識。好吧，我
- 掌握 npm 套件管理器的基本用法。
- 了解 B/S 應用程式架構的基本原理。
學習資料：
- 影片教學：黑馬程式設計師之Vue.js 教學影片
- 線上文件：Vue.js 官方教學
- 參考書籍：《深入淺出Vue.js》
學習目標：
- 開發一個"雲端記事本"應用程式。

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

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

Vue.js 簡介

Vue.js 是一套用於建立使用者介面的漸進式框架。該框架被設計為可以自底向上逐層應用，它的核心庫只關注視圖層，不僅易於上手，還便於與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支援類別庫結合使用時，Vue.js 也完全能夠為複雜的單頁應用提供驅動。簡而言之，Vue.js 具有以下特性：

使用了傳統 HTML 類似的模版語法，對於新手來說，或許更容易上手。
使用了虛擬的 DOM 模型，簡化了對頁面元素的操作方式。
使用了響應式的視圖元件，有助於提高程式介面的使用者體驗。
頁面渲染速度極快，能賦予應用程式良好的執行效能。
既可以像 React 一樣提供建構複雜大型應用的路由介面。
也可以像 jQuery 一樣提供使用簡單、且封裝良好的操作介面。

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

引入Vue.js 框架

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

CDN 引用

CDN 是內容分發網路（Content Delivery Network 或Content Distribution Network）的縮寫，這是一種利用現有的互聯網絡系統中最靠近目標使用者的伺服器，更快、更可靠地分發音樂、圖片、影片、應用程式以及其他數據資料的方式，目的是提供高效能、可擴展性及低成本的網路內容傳遞給用戶。換而言之，在使用CDN 這種引用方式時，Vue.js 框架檔案會被儲存在指定的CDN 服務網路的某個伺服器節點上，由該服務集中負責針對該框架檔案的存取負載並維護框架的版本，而我們只要在HTML 文件的<script></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>标签中引用框架文件的路径即可，像这样：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<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">
      <h1 id="nbsp-nbsp-sayHello-nbsp-nbsp"> {{ sayHello }} </h1>
      <img  src="/static/imghwm/default1.png"  data-src="vueLogo"  class="lazy"  :   style="max-width:90%" alt="Vue.js 學習記錄之一：學習規劃與了解 Vue.js" >
   </p>
</body>
</html>

在code/01_sayHello/js目录中创建一个名为main.js的 JavaScript 脚本文档，并在其中输入如下代码：

// 程序名称： sayHello
// 实现目标：
//   1. 验证 Vue.js 执行环境
//   2. 体验构建 Vue.js 程序的基本步骤

const app = new Vue({
   el: &#39;#app&#39;,
   data:{
     sayHello: &#39;你好，Vue.js！&#39;,
     vueLogo: &#39;img/logo.png&#39;
   }
});

接下来只需将相关的 Web 服务运行起来（该服务器可以是 Apache 或者 Nginx，也可以是 VSCode 的 Live Sever 插件），然后如果在 Web 浏览器中看到如下页面，就说明 Vue.js 框架已经被引入到了程序中，并被成功执行起来了。

更多相关免费学习推荐：js视频教程

以上是Vue.js 學習記錄之一：學習規劃與了解 Vue.js的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：cnblogs。如有侵權，請聯絡admin@php.cn刪除

vue.js vs.後端框架：澄清區別Apr 25, 2025 am 12:05 AM

Vue.js是前端框架，後端框架用於處理服務器端邏輯。 1)Vue.js專注於構建用戶界面，通過組件化和響應式數據綁定簡化開發。 2)後端框架如Express、Django處理HTTP請求、數據庫操作和業務邏輯，運行在服務器上。

vue.js和前端堆棧：了解連接Apr 24, 2025 am 12:19 AM

Vue.js與前端技術棧緊密集成，提升開發效率和用戶體驗。 1)構建工具：與Webpack、Rollup集成，實現模塊化開發。 2)狀態管理：與Vuex集成，管理複雜應用狀態。 3)路由：與VueRouter集成，實現單頁面應用路由。 4)CSS預處理器：支持Sass、Less，提升樣式開發效率。

Netflix：探索React（或其他框架）的使用Apr 23, 2025 am 12:02 AM

Netflix選擇React來構建其用戶界面，因為React的組件化設計和虛擬DOM機制能夠高效處理複雜界面和頻繁更新。 1）組件化設計讓Netflix將界面分解成可管理的小組件，提高了開發效率和代碼可維護性。 2）虛擬DOM機制通過最小化DOM操作，確保了Netflix用戶界面的流暢性和高性能。

vue.js和前端：深入研究框架Apr 22, 2025 am 12:04 AM

Vue.js被開發者喜愛因為它易於上手且功能強大。 1)其響應式數據綁定係統自動更新視圖。 2)組件系統提高了代碼的可重用性和可維護性。 3)計算屬性和偵聽器增強了代碼的可讀性和性能。 4)使用VueDevtools和檢查控制台錯誤是常見的調試技巧。 5)性能優化包括使用key屬性、計算屬性和keep-alive組件。 6)最佳實踐包括清晰的組件命名、使用單文件組件和合理使用生命週期鉤子。

vue.js在前端的力量：關鍵特徵和好處Apr 21, 2025 am 12:07 AM

Vue.js是一個漸進式的JavaScript框架，適用於構建高效、可維護的前端應用。其關鍵特性包括：1.響應式數據綁定，2.組件化開發，3.虛擬DOM。通過這些特性，Vue.js簡化了開發過程，提高了應用性能和可維護性，使其在現代Web開發中備受歡迎。

vue.js比反應好嗎？Apr 20, 2025 am 12:05 AM

Vue.js和React各有優劣，選擇取決於項目需求和團隊情況。 1)Vue.js適合小型項目和初學者，因其簡潔和易上手；2)React適用於大型項目和復雜UI，因其豐富的生態系統和組件化設計。

vue.js的功能：增強前端的用戶體驗Apr 19, 2025 am 12:13 AM

Vue.js通過多種功能提升用戶體驗：1.響應式系統實現數據即時反饋；2.組件化開發提高代碼復用性；3.VueRouter提供平滑導航；4.動態數據綁定和過渡動畫增強交互效果；5.錯誤處理機制確保用戶反饋；6.性能優化和最佳實踐提升應用性能。

vue.js：定義其在網絡開發中的作用Apr 18, 2025 am 12:07 AM

Vue.js在Web開發中的角色是作為一個漸進式JavaScript框架，簡化開發過程並提高效率。 1)它通過響應式數據綁定和組件化開發，使開發者能專注於業務邏輯。 2)Vue.js的工作原理依賴於響應式系統和虛擬DOM，優化性能。 3)實際項目中，使用Vuex管理全局狀態和優化數據響應性是常見實踐。

See all articles