關於vue.js的部分總結

来源:https://www.cnblogs.com/52cyd/archive/2019/07/22/11228019.html
-Advertisement-
Play Games

1.MVVM和MVC的區別: MVVM:是Model-View-ViewModel的簡寫,即模型-視圖-視圖模型 模型:後端傳遞的數據 試圖:所看到的頁面 視圖模型:mvvm模式的核心,它是連接view和model的橋梁。 兩個實現方向: 1)模型 》視圖:後端傳遞的數據轉化成所看到的頁面,實現方式 ...


1.MVVM和MVC的區別:
MVVM:是Model-View-ViewModel的簡寫,即模型-視圖-視圖模型
模型:後端傳遞的數據
試圖:所看到的頁面
視圖模型:mvvm模式的核心,它是連接view和model的橋梁。
兩個實現方向:
1)模型===》視圖:後端傳遞的數據轉化成所看到的頁面,實現方式(數據綁定)
2)視圖===》模型:即將所看到的頁面轉化成後端的數據,實現的方式是(DOM 事件監聽)
MVC:MVC是Model-View-Controller的簡寫,即模型-視圖-控制器
controller指的是頁面業務邏輯,使用MVC的目的就是將M和V代碼分離

使用MVVM模式有幾大好處:
  1). 低耦合。View可以獨立於Model變化和修改,一個ViewModel可以綁定到不同的View上,當View變化的時候Model可以不變,當Model變化的時候View也可以不變。
  2). 可重用性。可以把一些視圖的邏輯放在ViewModel裡面,讓很多View重用這段視圖邏輯。
  3). 獨立開發。開發人員可以專註與業務邏輯和數據的開發(ViewModel)。設計人員可以專註於界面(View)的設計。
  4). 可測試性。可以針對ViewModel來對界面(View)進行測試

2.vue的生命周期
八個:創建前、創建後、載入前、載入後、更新前、更新後、銷毀前、銷毀後
生命周期的作用:讓我們在控制整個Vue實例的過程時更容易形成好的邏輯
DOM 渲染在 載入後(mounted) 中就已經完成了。

3.vue實現雙向綁定原理
vue實現數據雙向綁定主要是:採用數據劫持結合發佈者-訂閱者模式的方式,通過Object.defineProperty()
來劫持各個屬性的setter,getter,在數據變動時發佈消息給訂閱者,觸發相應監聽回調。

4.Vue組件間的參數傳遞
1)父組件與子組件傳值
父===》子:子組件通過props方法接受數據;
子===》父:子組件通過$emit方法傳遞參數,觸發父組件event
2)非父子組件間的數據傳遞,兄弟組件傳值
eventBus,就是創建一個事件中心,相當於中轉站,可以用它來傳遞事件和接收事件
VUEX項目較大時

5.Vue與React的區別



6.vue路由的鉤子函數
首頁可以控制導航跳轉,beforeEach,afterEach等,一般用於頁面title的修改。
一些需要登錄才能調整頁面的重定向功能。
beforeEach主要有3個參數to、from、next
to:route即將進入的目標路由對象
from:route當前導航正要離開的路由
next:function一定要調用該方法resolve這個鉤子。執行效果依賴next方法的調用參數。可以控制網頁的跳轉。
全局導航鉤子:
router.beforeEach(to, from, next),
router.beforeResolve(to, from, next),
router.afterEach(to, from ,next)
組件內鉤子:
beforeRouteEnter,
beforeRouteUpdate,
beforeRouteLeave
單獨路由獨享組件:
beforeEnter


7.vuex是什麼?怎麼使用?哪種功能場景使用它?
只用來讀取的狀態集中放在store中; 改變狀態的方式是提交mutations,這是個同步的事物; 非同步邏輯應該封裝在action中。
在main.js引入store,註入。新建了一個目錄store,….. export 。
場景有:單頁應用中,組件之間的狀態、音樂播放、登錄狀態、加入購物車

vuex 的mutation和action的特性是什麼?有什麼區別?
mutation用於修改state的數據,是同步的。
action 類似於 muation, 不同在於:action 提交的是 mutation,而不是直接變更狀態
action 可以包含任意非同步操作

8.css只在當前組件起作用
在style標簽中寫入scoped即可:<style scoped></style>

9.v-if 和 v-show 區別
v-if按照條件是否渲染,v-show是display的block或none
v-show的值無論為true或false,元素都會存在與html代碼中,而只有當v-if的值為true,元素才會存在HTML中
v-show指令只是設置了元素css的style值

10.$route和$router的區別
$route是“路由信息對象”,包括path,params,hash,query,fullPath,matched,name等路由信息參數
$router是“路由實例”對象包括了路由的跳轉方法,鉤子函數等

11.vue.js的兩個核心是什麼?vue幾種常用的指令?
數據驅動、組件系統
指令:v-for、v-if、v-bind、v-on、v-show、v-else

12.vue常用的修飾符?
prevent:提交事件不再重載頁面
stop:阻止事件冒泡
self:當事件發生在該元素本身而不是子元素的時候會觸發
capture:事件偵聽,事件發生的時候會調用

13.對keep-alive的瞭解
keep-alive是 Vue 內置的一個組件,可以使被包含的組件保留狀態,或避免重新渲染。
keep-alive加入了兩個屬性:include(包含的組件緩存) 與 exclude(排除的組件不緩存,優先順序大於include)

<keep-alive include='include_components' exclude='exclude_components'>
<component>
<!-- 該組件是否緩存取決於include和exclude屬性 -->
</component>
</keep-alive>
參數解釋:
include - 字元串或正則表達式,只有名稱匹配的組件會被緩存
exclude - 字元串或正則表達式,任何名稱匹配的組件都不會被緩存
include 和 exclude 的屬性允許組件有條件地緩存。二者都可以用“,”分隔字元串、正則表達式、數組。當使用正則或者是數組時,要記得使用v-bind 。

13.vue.js是什麼?
是一套構建用戶界面的 漸進式框架。與其他重量級框架不同的是,Vue 採用自底向上增量開發的設計。
Vue 的核心庫只關註視圖層,並且非常容易學習,非常容易與其它庫或已有項目整合。另一方面,
Vue 完全有能力驅動採用單文件組件和Vue生態系統支持的庫開發的複雜單頁應用。
Vue.js 的目標是通過儘可能簡單的 API 實現響應的數據綁定和組合的視圖組件

14.vue.js特性
MVVM、組件化、指令系統、支持虛擬DOM
虛擬dom:虛擬DOM是用Object來代表一顆節點,這個Object叫做VNode,然後使用兩個VNode進行對比,根據對比後的結果修改真實DOM。
每次渲染都會生成一個新的VNode,然後和上一次渲染時用的VNode進行對比。然後將這一次新生成的VNode緩存,用來進行下一次對比。
虛擬dom的缺點:
1. 代碼更多,體積更大
2. 記憶體占用增大
3. 小量的單一的dom修改使用虛擬dom成本反而更高,不如直接修改真實dom快

15.vue.js的特點
簡潔:頁面由HTML模板+Json數據+Vue實例組成
數據驅動:自動計算屬性和追蹤依賴的模板表達式
組件化:用可復用、解耦的組件來構造頁面
輕量:代碼量小,不依賴其他庫
快速:精確有效批量DOM更新
模板友好:可通過npm,bower等多種方式安裝,很容易融入

16.Vue 項目時為什麼要在組件中寫 key,其作用是什麼?
在開發過程中,我們需要保證某個元素的 key 在其同級元素中具有唯一性。
在 Diff 演算法中 會藉助元素的 Key 值來判斷該元素是新近創建的還是被移動而來的元素,
從而減少不必要的元素重渲染。

17.computed 和 watched 的區別:
computed 是計算屬性,依賴其他屬性計算值,並且 computed 的值有緩存,只有當計算值變化才會返回內容。
watch 監聽到值的變化就會執行回調,在回調中可以進行一些邏輯操作。


18.axios是什麼?怎麼使用?描述使用它實現登錄功能的流程?
請求後臺資源的模塊。npm install axios -S裝好,然後發送的是跨域,需在配置文件中config/index.js進行設置。
後臺如果是Tp5則定義一個資源路由。js中使用import進來,然後.get或.post。返回在.then函數中如果成功,
失敗則是在.catch函數中

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

-Advertisement-
Play Games
更多相關文章
  • 達內全套前端視頻教程,包括js,h5,css3等,如果打不開,請聯繫本人,可重新分享 下載地址 ...
  • 後端路由:對於普通的網站,所有的超鏈接都是URL地址,所有的URL地址都對應伺服器上對應的資源 前端路由:對於單頁面應用程式來說,主要通過URL中的hash(#號)來實現不同頁面之間的切換(不會刷新頁面),同時,hash有一個特點:HTTP請求中不會包含hash相關的內容;所以,單頁面程式中的頁面跳 ...
  • 記錄一下使用項目中使用EasyUI遇到的bug,廢話少說直接上菜 - _-(bug)。。。。。 bug :: .netcore創建一個web應用時候,會自動引入jQuery庫以及一些插件,但是在使用EasyUI裡面的tree組件時,他會報一個錯,運行時候點擊F12即可顯示出來:.tree() is ...
  • CSS水平垂直居中 1 絕對定位 + 轉換 2 彈性模型 3 單元格方式 ...
  • npm install lib-flexible --save npm install px2rem-loader --save-dev rule .use('px2rem-loader') .loader('px2rem-loader') .options({emUnit:37.5}) 正常移動端 ...
  • 一、HTTP協議概述 HTTP是一個簡單的請求-響應協議,屬於應用層的面向對象的協議,由於其簡捷、快速的方式,適用於分散式超媒體信息系統。它通常運行在TCP之上。它指定了客戶端發送給伺服器什麼樣的消息得到什麼樣的響應。 二、HTTP協議的主要特點可概括如下: 1.B/S結構(Browser/Serv ...
  • *在js中不同類型之間的運算,所得到結果的類型也會有所變化: string + number = string string + boolean = string string + undefiend = string number + boolean = number number + undef ...
  • 概念 單例模式,也叫單子模式,是一種常用的軟體設計模式。在應用這個模式時,單例對象的類必須保證只有一個實例存在。 核心:確保只有一個實例,並提供全局訪問。 實現思路 一個類能返回對象一個引用(永遠是同一個)和一個獲得該實例的方法(必須是靜態方法,通常命名為 );當我們調用這個方法時,類持有的引用不為 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...