Vue.js 概述與 MVVM 模式

一、Vue.js

1. Vue.js 是什么

Vue.js 是一個輕巧、高性能、可組件化的 MVVM 庫,擁有非常容易上手的 API;
Vue.js是一個構建數據驅動的 Web 界面的庫。

2. Vue.js 的特性

1. 輕量級的框架
2. 雙向數據綁定
3. 指令
4. 插件化(組件化)

3. MVVM 框架

  • MVVM(Model-View-ViewModel)是對 MVC(Model-View-Control)和 MVP(Model-View-Presenter)的進一步改進。

『View』:視圖層(UI 用戶界面)
『ViewModel』:業務邏輯層(一切 js 可視為業務邏輯)
『Model』:數據層(存儲數據及對數據的處理如增刪改查)

  • MVVM 將數據雙向綁定(data-binding)作為核心思想,View 和 Model 之間沒有聯系,它們通過 ViewModel 這個橋梁進行交互。

  • Model 和 ViewModel 之間的交互是雙向的,因此 View 的變化會自動同步到 Model,而 Model 的變化也會立即反映到 View 上顯示。

  • 當用戶操作 View,ViewModel 感知到變化,然后通知 Model 發生相應改變;反之當 Model 發生改變,ViewModel 也能感知到變化,使 View 作出相應更新。


  • Angular 和 Ember 都采用這種模式。

4. Vue 的開發模式

  • 通過 script 標簽直接引入 vue.js
  • 通過 Vue 的腳手架工具 vue-cli 來進行一鍵項目搭建

5. Vue.js 的優點

  • 簡單輕巧,功能強大,擁有非常容易上手的 API;
  • 可組件化 和 響應式設計;
  • 實現數據與結構分離,高性能,易于瀏覽器的加載速度;
  • MVVM 模式,數據雙向綁定,減少了 DOM 操作,將更多精力放在數據和業務邏輯上。

二、問答

1. 簡述 MVVM

  • MVVM 是 Model-View-ViewModel 的縮寫。MVVM 是一種設計思想。Model 層代表數據模型,也可以在 Model 中定義數據修改和操作的業務邏輯;View 代表 UI 組件,它負責將數據模型轉化成 UI 展現出來,ViewModel 是一個同步 View 和 Model 的對象。
  • 在 MVVM 架構下,View 和 Model 之間并沒有直接的聯系,而是通過 ViewModel 進行交互,Model 和 ViewModel 之間的交互是雙向的, 因此 View 數據的變化會同步到 Model 中,而 Model 數據的變化也會立即反應到 View 上。
  • ViewModel 通過雙向數據綁定把 View 層和 Model 層連接了起來,而View 和 Model 之間的同步工作完全是自動的,無需人為干涉,因此開發者只需關注業務邏輯,不需要手動操作DOM, 不需要關注數據狀態的同步問題,復雜的數據狀態維護完全由 MVVM 來統一管理。

2. 簡述 Vue.js 的優點

  • 低耦合。視圖(View)可以獨立于 Model 變化和修改,一個 ViewModel 可以綁定到不同的 "View" 上,當 View 變化的時候 Model 可以不變,當 Model 變化的時候 View 也可以不變。
  • 可重用性。你可以把一些視圖邏輯放在一個 ViewModel 里面,讓很多 View 重用這段視圖邏輯。
  • 獨立開發。開發人員可以專注于業務邏輯和數據的開發(ViewModel),設計人員可以專注于頁面設計。
  • 方便測試。界面素來是比較難于測試的,開發中大部分 Bug 來至于邏輯處理,由于 ViewModel 分離了許多邏輯,可以對 ViewModel 構造單元測試。
  • 易用 靈活 高效。

?

?

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/537622.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/537622.shtml
英文地址,請注明出處:http://en.pswp.cn/news/537622.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

ipad錄屏軟件_如何在 Mac 上優雅的截圖和錄屏

在使用電腦的時候,很多時候我們都需要截屏或者錄屏分享。所以你可能已經聽過 snip,或者經常使用 QQ、微信 等軟件來實現截屏。但是今天我們一起來看一下,怎么使用系統提供的功能,來優雅的實現截圖和錄屏。最開始的這幾篇都比較基礎…

數據庫的輔助工具:My-SqlViewer

閱讀目錄開始My-SqlViewer 使用說明程序安裝及啟動說明程序主界面DataBase瀏覽器搜索數據庫存儲過程的復制比較數據庫今天發一個我自己寫的且經常使用的數據庫的輔助工具:My-SqlViewer由于我比較喜歡使用存儲過程,但發現不管是SQL Server Management Stu…

安卓平板微信和手機微信同時登陸_Mac電腦如何同時登陸多個微信或QQ

現如今,微信和QQ已經不單單是簡單的社交軟件了,也成了工作必備軟件,工作中用它傳個文件,發個通知,不知道有多方便。但是很多人希望將工作圈和生活圈分開,有人想出拿兩部手機的方法,倒是可以&…

VSCode 開發Vue必備插件

工欲善其事,必先利其器 以下就是開發Vue必備插件: Vetur —— 語法高亮、智能感知、Emmet等 包含格式化功能, AltShiftF (格式化全文),CtrlK CtrlF(格式化選中代碼,兩個Ctrl需要同時…

蘋果x人臉識別突然失靈_教你解決mac電腦鍵盤失靈的問題

無論是使用WIN系統還是蘋果電腦都有可能遇到鍵盤失靈,無法使用的問題,那么蘋果電腦鍵盤失靈該怎么解決呢?這里macw小編為大家帶來了蘋果電腦鍵盤失靈解決教程,趕緊收藏起來吧!無線鍵盤失靈解決教程1、確保藍牙已啟用并…

產品文檔如何說清楚產品業務?關注這幾點就夠了

如果產品文檔沒把產品業務說清楚會有什么影響? 常見的:產品不符合業務(實際使用場景),驗收不通過,需要加班修改,調整。產品經理被罵。 嚴重的:甲方爸爸受不了了,換供應…

前端錯誤日志收集方案

前言 公司的項目上線出現問題后難以定位錯誤,研究過現存的錯誤監控方案,受限于特殊條件只能定制自己的錯誤收集方案。 基于以上背景我擼出來一個錯誤日志收集方案 - Ohbug。 歡迎各位大佬 star ~ 監控錯誤 說起錯誤的捕獲,首先想到的是 try c…

spring入門到放棄——spring事務管理

Spring事務提供了兩種管理的的方式:編程式事務和聲明式事務 簡單回顧下事務: 事務:邏輯上的一組操作,組成操作的各個單元,要么全部成功,要么全部失敗。 事務特性: 原子性:一個事務包…

高德百度地圖如何獲取附近小區酒店銀行等?

概述 實現以下功能:根據當前定位,查找附近小區 實現步驟 高德,百度地圖實現方式相同,步驟都是如下: 1.獲取當前位置的經緯度 2.查詢poitype編碼。 (小區,寫字樓,銀行&#xff0…

angular 字符串轉換成數字_Python基礎語法大全:字符串的處理與使用

本文來自牛鷺學院學員:鄧瑞杰字母處理string.capitalize()返回元字符串,且將字符串第一個字母轉為大寫,其它字母小寫string.title()返回元字符串,且將字符串第一個字母轉為大寫,其它字母小寫string.swapcase()用于對字…

Java實現MD5編碼32位

加入依賴包 <dependency><groupId>org.apache.directory.studio</groupId><artifactId>org.apache.commons.codec</artifactId><version>1.8</version></dependency> 實現代碼 DigestUtils.md5Hex(字符串)

計算機二級考試python_全國計算機等級考試考試大綱(2018年版)

級別 大綱名稱 一級 一級計算機基礎及WPS Office應用考試大綱&#xff08;2018年版&#xff09;點擊下載 一級計算機基礎及MS Office應用考試大綱&#xff08;2018年版&#xff09;點擊下載 一級計算機基礎及Photoshop應用考試大綱&#xff08;2018年版&#xff09;點擊下載 一…

人工智能的就業方向

關于AI在的就業方向主要有&#xff0c;科研機構(機器人研究所等)&#xff0c;軟硬件開發人員&#xff0c;高校講師等&#xff0c;在國內的話就業前景是比較好的&#xff0c;國內產業升級&#xff0c;IT行業的轉型工業和機器人和智能機器人以及可穿戴設備的研發將來都是強烈的熱…

1億像素的真相

世界那么大&#xff0c;謝謝你來看我&#xff01;&#xff01;關注我你就是個網絡、電腦、手機小達人 喬布斯曾說&#xff0c;“手機拍照上主打高像素&#xff0c;是手機廠商利用廣大消費者對照片成像原理知識漏洞的表現。” 小米發布了一款有1億像素的概念型手機&#xff0c…

python實現鏈表的刪除_Python中 為我們提供了一些獨特的解決方案的方法特性

實際上&#xff0c;在日常的工作中&#xff0c;我們很多需求&#xff0c;無論是常見的、還是不常見的&#xff0c;Python 都為我們提供了一些獨特的解決方案&#xff0c;既不需要自己造輪子&#xff0c;也不需要引入新的依賴(引入新的依賴勢必會增加項目的復雜度)。但是 Python…

打通C/4HANA和S/4HANA的一個原型開發:智能服務創新案例

2019獨角獸企業重金招聘Python工程師標準>>> 今年6月SAP發布C/4HANA之后&#xff0c;有顧問朋友們在公眾號后臺留言&#xff0c;詢問C/4HANA如何同SAP的數字化核心S/4HANA系統結合起來&#xff0c;從而打通企業的前后端業務&#xff0c;幫助企業實現數字化轉型。 有…

爬蟲的重要思想

1.理論上講只要網頁上面能夠看到的數據都是可以爬取的&#xff0c;因為所有看到的網頁上的數據都是服務器發送到我們電腦上面的&#xff0c;只是有的數據加密過&#xff0c;很難解密。 2.在網頁上無法看到或者無法獲取的數據&#xff0c;爬蟲同樣不可能拿到&#xff0c;比如一…

python web環境傻瓜搭建_python——web 環境搭建

1.安裝引用第三方庫 selenium pip install selenium 2.下載瀏覽器驅動&#xff08;驅動版本和瀏覽器版本要對應參考鏈接 http://npm.taobao.org/mirrors/chromedriver/&#xff09; 查看瀏覽器驅動對應關系&#xff0c;本次已最新驅動版本作為教材講解 版本2.42 發布時間2018.9…

項目管理十大知識領域,為何不含

問&#xff1a;項目管理十大知識領域&#xff0c;為何不含以下幾項&#xff1a;立項管理&#xff0c;合同管理&#xff0c;文檔管理&#xff0c;變更管理&#xff1f; 答&#xff1a; 立項完了才有項目&#xff1b; 合同管理包含在采購管理&#xff1b; 變更管理在整體管理&am…

B站視頻下載(VideoHelper)

繼續上次的知乎爬蟲&#xff0c; 這次開始了嗶哩嗶哩的爬蟲實踐&#xff1b; 首先介紹下如何下載吧&#xff1a; VideoHelper 里面有三種方式下載b站視頻。 同樣的流程&#xff0c; 還是先抓包&#xff0c;分析參數&#xff0c;尋找參數&#xff08;包括之前的請求包和頁面源碼…