主頁 > 後端開發 > 2023 年 7 個適合初學者的 Vue.js 教程

2023 年 7 個適合初學者的 Vue.js 教程

2023-07-07 07:40:41 後端開發

這個精心挑選的串列將幫助 Vue 初學者找到七個很棒的資源來開始學習 Vue,
我相信你來這里是為了尋找一些資源來開始學習 Vue.js 框架的奇妙旅程,無論是作為第一個工具還是你熟悉的其他框架的附加工具,不管怎樣,你很幸運,因為這就是我們將在這篇文章中介紹的內容,
隨著現代 Web 應用程式對更多功能、復雜性、可訪問性和性能的需求不斷增加,開發人員面臨著更艱巨的任務,即交付滿足現代用戶需求的高質量 Web 應用程式,
為了幫助實作這一目標,我們開發了經過深思熟慮的代碼塊,這些代碼塊提供了作為庫和框架存在的一致且標準化的應用程式結構,以進一步增強開發人員的能力并簡化將優秀應用程式交付到生產環境中所涉及的流程,
多年來,已經開發出了許多出色的前端框架/庫,每個框架/庫都有其獨特的方式來開展業務,為 Web 應用程式構建動態、資料驅動的用戶界面,在這篇文章中,我們將關注這一長串框架中的重要人物;根據StackOverflow 2021 年 Web 框架流行度統計,Facebook 的 React.js 排名第一,其次是 Google 的 Angular 和 Vue.js,
乍一看,根據上面介紹的受歡迎程度統計資料和科技巨頭的支持,你可能會想大驚小怪地放棄 Vue.js,但嘗試以這種方式解釋統計資料可能會產生一些誤導性的結果,你可能會感興趣的是,雖然 Vue.js 創建的時間較晚,但與較早出現的另外兩個相比,Vue.js 在 2014 年創建,在撰寫本文時,Vue 擁有最高的 GitHub 星數,為 190k,超過了 React 的 185k 和 Angular 的 80k ,這展示了 Vue.js 是如何發展并在業界真正流行的,
這三個框架都有其獨特之處,但它們的架構有一些相似之處,眾所周知,Vue.js 的核心結合了 React 和 Angular 的大部分最佳功能,Vue.js 使用虛擬 DOM,這是使 React 快速的相關功能之一,Vue.js 也是基于組件的,使用雙向資料系結并采用宣告式方法——Angular 和 React 共享的架構,因此,所有三個框架都遵循傳統的 MVC 模式,Vue.js 還與 Angular 共享類似的模板語法,

先決條件

在學習 Vue 之前,讀者必須至少對三種核心 Web 技術——HTML、CSS 和 JavaScript 有一定的了解,

為什么要學習 VueJS?

在我們開始討論如何做之前,這里列出了一些需要考慮的“原因”,

  1. Vue.js 是一個漸進式框架,這僅僅意味著它允許你根據需要在小型、中型或大型專案中采用和集成它,即,Vue 提供了我們將其完全集成到任何專案中所需的所有靈活性(其中將控制我們的整個應用程式)或部分地僅處理應用程式的某些部分,
  2. 憑借出色的檔案和活躍的社區支持的高度可定制性和簡單性,Vue.js 實作了非常平滑的學習曲線,從而加快了團隊和公司的采用速度
  3. 這個框架的簡單性(這絕不意味著使用上的限制)意味著,無論 Vue 如何使用,我們仍然提供了一個工具箱,允許構建最先進的 Web 應用程式,無論是簡單的還是復雜的,根據需要無縫擴展,
  4. 此外,Vue.js 現在被很多公司使用,例如阿里巴巴、Google、Gitlab、Upwork、Apple、Facebook 等,通過學習 Vue 被該行業聘用的可能性非常高,

如何學習 Vue

以下是一些頂級教程、書籍和相關文章的串列,可以幫助你盡快開始使用 Vue.js,
需要注意的是,本指南中提供的大部分資源可確保你了解最新版本的 Vue,即版本 3.x,它仍然完全向后兼容 Vue 2.0 或更低版本,你的學習路徑必須利用該技術的最新版本及其附帶的新功能,原因有幾個——最突出的是 Vue.js 的官方檔案已移至 Vue 3,
Vue 3 附帶了一些基于 Vue 2 構建的新功能,例如引入組合 API(它允許你開發更好的組件并提高 Web 應用程式的可重用性)、傳送組件以及對 TypeScript 的開箱即用支持; 更好地優化捆綁大小等,如果你已經熟悉 Vue 2,可以下載此備忘單以查看遷移指南,
以下是學習 Vue 的七個最佳教程的鏈接的快速串列,下面我將詳細介紹每個教程:

Vue - 完整指南(包括路由器和組合 API)
本課程由Maximilian Schwarzmüller創建并上傳到 Udemy,該課程目前的評分為 4.8 星,好評如潮,根據課程描述,該課程從頭開始非常詳細地教授最新版本的 Vue (Vue.js 3),
該課程還涵蓋了所有核心基礎知識,但并不止于此,它還深入探討了高級概念,例如 Vue 3 中引入的 Composition API,還需要注意的是,這是一門付費課程,

Vue視頻教程,Vue2 Vue3實戰精講,一套通關vue
本套Vue視頻教程從Vue2開始講解,一步一個案例,知識點由淺入深,然后很自然的過度到Vue3版本,
視頻中會把每一個Vue的知識點講解的非常通透,不但舉例告訴你怎么用,還會告訴你底層實作原理,
本套視頻中會從零手寫一個Vue的資料代理機制,都是原始碼級的講解,

Vue School 初學指南
Vue School 為各個級別的開發者提供了豐富的免費和付費視頻,幫助他們動手學習如何使用 Vue 框架,對于初學者部分,你將看到一組有序的資源,你可以在其中學習框架的核心概念 - 包括組件是什么,如何創建它們(即使用選項或組合 API),了解 props 以及如何重用組件,你還將了解 Vue.js 應用程式中組件的生命周期、創建和管理狀態、串列渲染指令、事件處理等等,
此處提供的課程描述適用于指南的免費部分,但是,你始終可以通過參加高級課程來升級并進一步提高你的靈活性,這些課程仍然是這個初學者系列的一部分,以進一步提高,

Vue JS 初學者(60 個視頻)
本系列由 Codevolution YouTube 頻道創建,是一個非常適合初學者的指南,從頭開始,涵蓋了在最基本的層面上熟悉 Vue.js 所需的所有必要概念,
你首先學習如何正確設定開發環境,然后了解在應用程式中使用 Vue.js 的各種方法,包括使用 Vue CLI 構建工具的流行方法,然后你將了解組件、指令、觀察者、槽、選項、組合 API 等,
本文是一個非常適合初學者的指南,從頭開始,涵蓋了在最基本的層面上熟悉 Vue.js 所需的所有必要概念,
你首先學習如何正確設定開發環境,然后了解在應用程式中使用 Vue.js 的各種方法,包括使用 Vue CLI 構建工具的流行方法,然后你將了解組件、指令、觀察者、槽、選項、組合 API 等,
本指南將逐步引導你從基本概念到與框架相關的更高級概念,

全堆疊 Vue 3
它是最暢銷的 Vue.js 書籍之一,由高級軟體工程師 Hassan Djirdeh 撰寫,由 Nate Murray 和 Ari Learner 共同撰寫,它們都是不斷發展且活躍的學習社區(稱為 newline)的一部分,本書為任何級別的開發人員提供了全面的指南,幫助他們掌握 Vue 的幾乎所有核心??功能以及 Vue 生態系統中的豐富工具;在本指南中,你將學習使用最佳實踐構建世界一流的 Web 應用程式的所有概念,
你將從逐步理解框架開始;如何以傳統方式設定開發環境,即使用腳本標簽和 Vue CLI,并逐漸接觸其他概念,例如指令、事件處理、高級狀態管理、路由、組合 API、測驗等,
本書通過實踐指南涵蓋了這些內容,你將在其中構建多個 Web 應用程式,從投票應用程式、日歷事件應用程式、筆記應用程式、購物車等開始,每個應用程式都會讓你接觸到使用一個或多個 Web 應用程式,更多框架的核心功能,

Vue 官方檔案
正如你可能已經推斷出的那樣,這些檔案準確地描述了有關框架及其功能的每個細節,檔案中有很多部分,每個部分都描述框架的一個方面或如何使用框架的一個或多個功能,
對于初學者,你可以獲得教程部分,其中提供了了解大部分 Vue 基礎知識的實踐指南,你還配備了一個編碼游樂場,讓你可以輕松地進行編碼,并在完成教程系列時親自動手,重要的是,盡管瀏覽了本指南中的所有其他資源,你仍然可以將檔案作為參考來進一步調整你對 Vue 的理解,

其他資源

Vue 3 要點備忘單
Vue 3備忘單〔 Vue 精通〕
Vue 速查表 | 終極版

結尾

盡管互聯網上有許多教程、課程和書籍可以學習任何技術,但本指南為你提供了一些特別精心挑選的寶貴資源,以開始你掌握 Vue.js 框架的旅程,

本文由博客群發一文多發等運營工具平臺 OpenWrite 發布

轉載請註明出處,本文鏈接:https://www.uj5u.com/houduan/556683.html

標籤:其他

上一篇:Servlet p7 ServletContext物件

下一篇:返回列表

標籤雲
其他(162126) Python(38266) JavaScript(25524) Java(18291) C(15238) 區塊鏈(8275) C#(7972) AI(7469) 爪哇(7425) MySQL(7288) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5876) 数组(5741) R(5409) Linux(5347) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4613) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2438) ASP.NET(2404) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) HtmlCss(1989) .NET技术(1985) 功能(1967) Web開發(1951) C++(1942) python-3.x(1918) 弹簧靴(1913) xml(1889) PostgreSQL(1882) .NETCore(1863) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • 【C++】Microsoft C++、C 和匯編程式檔案

    ......

    uj5u.com 2020-09-10 00:57:23 more
  • 例外宣告

    相比于斷言適用于排除邏輯上不可能存在的狀態,例外通常是用于邏輯上可能發生的錯誤。 例外宣告 Item 1:當函式不可能拋出例外或不能接受拋出例外時,使用noexcept 理由 如果不打算拋出例外的話,程式就會認為無法處理這種錯誤,并且應當盡早終止,如此可以有效地阻止例外的傳播與擴散。 示例 //不可 ......

    uj5u.com 2020-09-10 00:57:27 more
  • Codeforces 1400E Clear the Multiset(貪心 + 分治)

    鏈接:https://codeforces.com/problemset/problem/1400/E 來源:Codeforces 思路:給你一個陣列,現在你可以進行兩種操作,操作1:將一段沒有 0 的區間進行減一的操作,操作2:將 i 位置上的元素歸零。最終問:將這個陣列的全部元素歸零后操作的最少 ......

    uj5u.com 2020-09-10 00:57:30 more
  • UVA11610 【Reverse Prime】

    本人看到此題沒有翻譯,就附帶了一個自己的翻譯版本 思考 這一題,它的第一個要求是找出所有 $7$ 位反向質數及其質因數的個數。 我們應該需要質數篩篩選1~$10^{7}$的所有數,這里就不慢慢介紹了。但是,重讀題,我們突然發現反向質數都是 $7$ 位,而將它反過來后的數字卻是 $6$ 位數,這就說明 ......

    uj5u.com 2020-09-10 00:57:36 more
  • 統計區間素數數量

    1 #pragma GCC optimize(2) 2 #include <bits/stdc++.h> 3 using namespace std; 4 bool isprime[1000000010]; 5 vector<int> prime; 6 inline int getlist(int ......

    uj5u.com 2020-09-10 00:57:47 more
  • C/C++編程筆記:C++中的 const 變數詳解,教你正確認識const用法

    1、C中的const 1、區域const變數存放在堆疊區中,會分配記憶體(也就是說可以通過地址間接修改變數的值)。測驗代碼如下: 運行結果: 2、全域const變數存放在只讀資料段(不能通過地址修改,會發生寫入錯誤), 默認為外部聯編,可以給其他源檔案使用(需要用extern關鍵字修飾) 運行結果: ......

    uj5u.com 2020-09-10 00:58:04 more
  • 【C++犯錯記錄】VS2019 MFC添加資源不懂如何修改資源宏ID

    1. 首先在資源視圖中,添加資源 2. 點擊新添加的資源,復制自動生成的ID 3. 在解決方案資源管理器中找到Resource.h檔案,編輯,使用整個專案搜索和替換的方式快速替換 宏宣告 4. Ctrl+Shift+F 全域搜索,點擊查找全部,然后逐個替換 5. 為什么使用搜索替換而不使用屬性視窗直 ......

    uj5u.com 2020-09-10 00:59:11 more
  • 【C++犯錯記錄】VS2019 MFC不懂的批量添加資源

    1. 打開資源頭檔案Resource.h,在其中預先定義好宏 ID(不清楚其實ID值應該設定多少,可以先新建一個相同的資源項,再在這個資源的ID值的基礎上遞增即可) 2. 在資源視圖中選中專案資源,按F7編輯資源檔案,按 ID 型別 相對路徑的形式添加 資源。(別忘了先把檔案拷貝到專案中的res檔案 ......

    uj5u.com 2020-09-10 01:00:19 more
  • C/C++編程筆記:關于C++的參考型別,專供新手入門使用

    今天要講的是C++中我最喜歡的一個用法——參考,也叫別名。 參考就是給一個變數名取一個變數名,方便我們間接地使用這個變數。我們可以給一個變數創建N個參考,這N + 1個變數共享了同一塊記憶體區域。(參考型別的變數會占用記憶體空間,占用的記憶體空間的大小和指標型別的大小是相同的。雖然參考是一個物件的別名,但 ......

    uj5u.com 2020-09-10 01:00:22 more
  • 【C/C++編程筆記】從頭開始學習C ++:初學者完整指南

    眾所周知,C ++的學習曲線陡峭,但是花時間學習這種語言將為您的職業帶來奇跡,并使您與其他開發人員區分開。您會更輕松地學習新語言,形成真正的解決問題的技能,并在編程的基礎上打下堅實的基礎。 C ++將幫助您養成良好的編程習慣(即清晰一致的編碼風格,在撰寫代碼時注釋代碼,并限制類內部的可見性),并且由 ......

    uj5u.com 2020-09-10 01:00:41 more
最新发布
  • 2023 年 7 個適合初學者的 Vue.js 教程

    這個精心挑選的串列將幫助 Vue 初學者找到七個很棒的資源來開始學習 Vue。 我相信你來這里是為了尋找一些資源來開始學習 Vue.js 框架的奇妙旅程,無論是作為第一個工具還是你熟悉的其他框架的附加工具。不管怎樣,你很幸運,因為這就是我們將在這篇文章中介紹的內容。 隨著現代 Web 應用程式對更多 ......

    uj5u.com 2023-07-07 07:40:41 more
  • Servlet p7 ServletContext物件

    # ServletContext物件 **每一個 web 應用都有且僅有一個 ServletContext 物件**,又稱為 Application 物件,從名稱中可知,該物件是與應用程式相關的。在WEB 容器啟動時,會為每一個 WEB 應用創建一個對應的 ServletContex物件。 **該對 ......

    uj5u.com 2023-07-07 07:40:03 more
  • 基數排序

    ## 前言 基數排序是一種非常快且好寫的排序。 以前一直以為基數排序就是桶排,現在發現自己很智慧,警鐘長鳴。 # 思想 基數排序是一個以桶排為基礎的排序。 桶排我就不多說了,簡單且 $O(n)$。 但是桶排有一個弊端,就是由于考試時空間限制是 $10^8$ 左右,可需要排序的資料是 $10^9$ 的 ......

    uj5u.com 2023-07-07 07:00:09 more
  • SSO2.0 20-20230705

    ......

    uj5u.com 2023-07-06 09:39:00 more
  • SSO2.0 20-20230705

    ......

    uj5u.com 2023-07-06 09:32:13 more
  • 對敏感操作的二次認證 —— 詳解 Sa-Token 二級認證

    ### 一、需求分析 在某些敏感操作下,我們需要對已登錄的會話進行二次驗證。 比如代碼托管平臺的倉庫洗掉操作,盡管我們已經登錄了賬號,當我們點擊 **[洗掉]** 按鈕時,還是需要再次輸入一遍密碼,這么做主要為了兩點: 1. 保證操作者是當前賬號本人。 2. 增加操作步驟,防止誤洗掉重要資料。 這就 ......

    uj5u.com 2023-07-05 09:12:40 more
  • 對敏感操作的二次認證 —— 詳解 Sa-Token 二級認證

    ### 一、需求分析 在某些敏感操作下,我們需要對已登錄的會話進行二次驗證。 比如代碼托管平臺的倉庫洗掉操作,盡管我們已經登錄了賬號,當我們點擊 **[洗掉]** 按鈕時,還是需要再次輸入一遍密碼,這么做主要為了兩點: 1. 保證操作者是當前賬號本人。 2. 增加操作步驟,防止誤洗掉重要資料。 這就 ......

    uj5u.com 2023-07-05 09:11:38 more
  • 聊聊JVM虛方法表和方法呼叫

    > 作者:小牛呼嚕嚕 | [https://xiaoniuhululu.com](https://xiaoniuhululu.com/) > 計算機內功、原始碼決議、科技故事、專案實戰、面試八股等更多硬核文章,首發于公眾號「[小牛呼嚕嚕](https://www.xiaoniuhululu.com/i ......

    uj5u.com 2023-07-04 09:49:49 more
  • spring啟動流程 (3) BeanDefinition詳解

    BeanDefinition在Spring初始化階段保存Bean的元資料資訊,包括Class名稱、Scope、構造方法引數、屬性值等資訊,本文將介紹一下BeanDefinition介面、重要的實作類,以及在Spring中的使用示例。 # BeanDefinition介面 用于描述了一個Bean實體, ......

    uj5u.com 2023-07-04 09:49:38 more
  • 最簡單的人臉檢測(免費呼叫百度AI開放平臺介面)

    遠程呼叫百度AI開放平臺的web服務,快速完成人臉識別 ### 歡迎訪問我的GitHub > 這里分類和匯總了欣宸的全部原創(含配套原始碼):[https://github.com/zq2599/blog_demos](https://github.com/zq2599/blog_demos) ### ......

    uj5u.com 2023-07-04 09:49:16 more