Vue 快速入門(一)

来源:https://www.cnblogs.com/liudinglong/archive/2023/01/16/17054802.html
-Advertisement-
Play Games

1、介紹 Vue(讀音/vju/,類似view),是中國的大神尤雨溪開發的,為數不多的國人開發的世界頂級開源軟體。是一套用於構建用戶界面的漸進式框架,Vue 被設計為可以自底向上逐層應用。MVVM響應式編程模型,避免直接操作DOM,降低DOM操作的複雜性。 Vue官網地址:https://cn.vu ...


 

1、介紹

Vue(讀音/vju/,類似view),是中國的大神尤雨溪開發的,為數不多的國人開發的世界頂級開源軟體。是一套用於構建用戶界面的漸進式框架,Vue 被設計為可以自底向上逐層應用。MVVM響應式編程模型,避免直接操作DOM,降低DOM操作的複雜性。

Vue官網地址:https://cn.vuejs.org/

 

2、MVVM編程思想

 

 

MVVM:頁面輸入改變數據,數據改變影響頁面數據展示與渲染。

Vue中的MVVM模式即Model-View-ViewModel。即模型-視圖-視圖模型。

View層:視圖層,在前端開發中通常就是DOM層,主要作用是給用戶展示各種信息。

Model層:數據可能使我們固定的死數據,更多的是來自我們伺服器,從網路上請求下來的數據。

ViewModel層:

    • 視圖模型層,視圖模型層是View和Model溝通的橋梁;
    • 一方面它實現了Data Binding,也就是數據綁定,將Model的改變實時的反應到View中;
    • 另一方面它實現了DOM Listener,也就是DOM監聽,當DOM發生一些事件(點擊、滾動、touch等)時,可以監聽到,併在需要的情況下改變對應的Data。

簡單來說:

M(Model): 普通的javascript數據對象;

V(view):前端展示頁面;

VM(ViewModel):用於雙向綁定數據與頁面。

 

3、漸進式框架

 

 

 

漸進式框架非常簡單 ,就是用你想用或者能用的功能特性 ,你不想用的部分功能可以先不用。VUE不強求你一次性 接受並使用它的全部功能特性。

場景一:公司剛開始一個項目 ,技術人員對Vue的掌握也不足夠。那麼我們就不能使用VUE了麽?當然不是, 如果你只是使用VUE做些基礎操作 ,如:頁面渲染、表單處理提交功能 ,那還是非常簡單的 ,成熟技術人員上手 也就一兩天。完全可以用它去代替JQuery。並不需要你去引入其他複雜特性功能。

場景二:我們項目用了VUE ,使用的效果也挺好。那麼我們想逐漸實現代碼組件化 ,實現代碼的復用 ,或者是 基於組件原型的跨項目的代碼復用。那麼我們就可以引入VUE的components組件特性了。

場景三:我們的項目規模逐漸的變大了 ,我們可能會逐漸用到前端路由、狀態集中管理、並最終實現一個高度工程化的前端項目。這些功能特性我們可以逐步引入 ,當然不用也可以。

所以VUE的適用面很廣 ,你可以用它代替老項目中的JQuery。也可以在新項目啟動初期 ,有限的使用VUE的功能特性, 從而降低上手的成本。

 

4、Vue核心功能

基礎功能:頁面渲染、表單處理提交、幫我們管理DOM(虛擬DOM)節點

組件化開發:增強代碼的復用能力 ,複雜系統代碼維護更簡單

 

 

前端路由:更流暢的的用戶體驗、靈活的在頁面切換已渲染組件的顯示 ,不需與後端做多餘的交互

狀態集中管理:MVVM響應式模型基礎上實現多組件之間的狀態數據同步與管理

前端工程化:結合webpack等前端打包工具 ,管理多種靜態資源 ,代碼 ,測試 ,發佈等 ,整合前端大型項目。

 

5、Vue需要的前置ES6知識

ES6:

ECMAScript 6(簡稱ES6)是於2015年6月正式發佈的JavaScript語言的標準,正式名為ECMAScript 2015(ES2015)。它的目標是使得JavaScript語言可以用來編寫複雜的大型應用程式。

另外,一些情況下ES6也泛指ES2015及之後的新增特性,雖然之後的版本應當稱為ES7、ES8等。

 

Vue先就簡單介紹到這裡,雖然比較枯燥,還是瞭解一下比較好。

 


作者:全棧測試開發日記
出處:https://www.cnblogs.com/liudinglong/
csdn:https://blog.csdn.net/liudinglong1989/
微信公眾號:全棧測試開發日記
本文版權歸作者和博客園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接,否則保留追究法律責任的權利。

 
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • SummingMergeTree引擎繼承自MergeTree。區別在於,當合併SummingMergeTree表的數據片段時,ClickHouse會把所有具有相同主鍵的行合併為一行,該行包含了被合併的行中具有數值數據類型的列的彙總值。如果主鍵的組合方式使得單個鍵值對應於大量的行,則可以顯著的減少存儲 ...
  • 用正則表達式進行搜索 正則表達式介紹 正則表達式是用來匹配文本的特殊的串(字元集合)。 使用MySQL正則表達式 MySQL用WHERE子句對正則表達式提供了初步的支持,允許你指定正則表達式,過濾SELECT檢索出的數據。MySQL僅支持多數正則表達式實現的一個很小的子集。 基本字元匹配 SELEC ...
  • 1. MySQL8安裝 安裝環境 操作系統:CentOS7 MySQL版本:8.0.28 安裝方式:二進位Generic 軟體路徑:/app/database 數據路徑:/data/3306 日誌路徑:/binlog/3306 MySQL Community Server 社區版官網下載鏈接 MyS ...
  • 摘要:華為日曆月活高達數千萬,這使其對支撐業務的資料庫提出了巨大挑戰:高併發場景下,資料庫如何實現快速擴容?海量數據運行,如何確保業務穩定性? 本文分享自華為雲社區《穩定支撐千萬級月活,華為日曆背後的英雄》,作者: GaussDB 資料庫。 隨著科技進步,手機日曆早已融入我們的生活,不僅可以記錄時間 ...
  • 列表中自動播放視頻,常規方案是在每個 xml 中寫入視頻佈局,然後在滑動時獲取當前的下標,播放此下標的視頻 弊端:播放容易出錯,需要精準控制好停止播放操作,並且適配器中容易觸發多次刷新,導致執行多次同樣的操作,不易控制離開停止等操作,增加了佈局的負擔,影響滑動流暢度,無法復用... 使用過的都比較清 ...
  • 前言 最近在做博客園的界面美化,用的是博客園[guangzan]的開源項目,配置超級簡單,只需要複製粘貼代碼就好啦。 但在粘貼 CSS 代碼時遇到一個問題,那就是所有代碼都擠在了一行,沒有一點排板的樣子(如下圖),對我來說是不能忍受的,便決定解決這一問題。 經過一番網上衝浪後,我找到瞭解決方法,並且 ...
  • JavaScript 中有多種方法來判斷變數的類型,如 typeof、instanceof、Object.prototype.toString.call()、constructor屬性、Symbol.toStringTag屬性以及 lodash 等第三方庫 ...
  • JavaScript 中的拷貝分為兩種:淺拷貝和深拷貝。 淺拷貝是指在拷貝過程中,只拷貝一個對象中的指針,而不拷貝實際的數據。所以,淺拷貝中修改新對象中的數據時,原對象中的數據也會被改變。 深拷貝是指在拷貝過程中,拷貝一個對象中的所有數據,並創建一個新對象,對新對象進行操作並不會影響到原對象。 ...
一周排行
    -Advertisement-
    Play Games
  • 一:背景 1. 講故事 年前遇到了好幾例托管堆被損壞的案例,有些運氣好一些,從被破壞的托管堆記憶體現場能觀測出大概是什麼問題,但更多的情況下是無法做出準確判斷的,原因就在於生成的dump是第二現場,借用之前文章的一張圖,大家可以理解一下。 為了幫助更多受此問題困擾的朋友,這篇來整理一下如何 快狠準 的 ...
  • 前言 .NET6 開始,.NET Croe API 項目取消了 Startup.cs 文件,在 Program.cs 文件的 Main 函數中完成服務的註冊和中間件管道的管理。但當我們項目引入更多包的時候,Program.cs 文件也會看起來很臃腫。 而且,我們不只會有一個後端項目,為了方便快速創建 ...
  • 目錄 背景 get 與 post 的區別 所有介面都用 post 請求? 背景 最近在逛知乎的時候發現一個有趣的問題:公司規定所有介面都用 post 請求,這是為什麼? 看到這個問題的時候其實我也挺有感觸的,因為我也曾經這樣問過我自己。在上上一家公司的時候接到一個項目是從零開始搭建一個微服務,當時就 ...
  • *以下內容為本人的學習筆記,如需要轉載,請聲明原文鏈接 微信公眾號「englyf」https://mp.weixin.qq.com/s/2GFLTstDC7w6u3fTJxflNA 本文大概 1685 個字,閱讀需花 6 分鐘內容不多, 但也花了一些精力如要交流, 歡迎關註我然後評論區留言 謝謝你的 ...
  • 在新版本的pandas中,上述代碼會引起警告,建議改成SQLAlchemy connectable(engine/connection),後續代碼將引入這種升級的連接方式。 ...
  • 幾乎所有的高級編程語言都有自己的垃圾回收機制,開發者不需要關註記憶體的申請與釋放,Python 也不例外。Python 官方團隊的文章 https://devguide.python.org/internals/garbage-collector 詳細介紹了 Python 中的垃圾回收演算法,本文是這篇 ...
  • 如果您想查找高於或低於平均值的數字,可以不必計算該平均值,就能查看更高或更低的值。通過Java應用程式,可以自動突出顯示這些數字。除了快速突出顯示高於或低於平均值的值外,您還可以查看高於或低於的值的個數。現在讓我們看看如何在 Java應用程式中實現此操作。 引入jar包 導入方法1: 手動引入。將  ...
  • 第一種方式:使用{} firstDict = {"name": "wang yuan wai ", "age" : 25} 說明:{}為創建一個空的字典對象 第二種方式:使用fromkeys()方法 second_dict = dict.fromkeys(("name", "age")) #valu ...
  • 在golang中可以使用a := b這種方式將b賦值給a,只有當b能進行深拷貝時a與b才不會互相影響,否則就需要進行更為複雜的深拷貝。 下麵就是Go賦值操作的一個說明: Go語言中所有賦值操作都是值傳遞,如果結構中不含指針,則直接賦值就是深度拷貝;如果結構中含有指針(包括自定義指針,以及切片,map ...
  • 本文結合京東監控埋點場景,對解決樣板代碼的技術選型方案進行分析,給出最終解決方案後,結合理論和實踐進一步展開。通過關註文中的技術分析過程和技術場景,讀者可收穫一種樣板代碼思想過程和解決思路,並對Java編譯器底層有初步瞭解。 ...