uniapp與vue的區(qū)別有哪些？相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

成都一家集口碑和實力的網(wǎng)站建設(shè)服務(wù)商，擁有專業(yè)的企業(yè)建站團隊和靠譜的建站技術(shù)，十載企業(yè)及個人網(wǎng)站建設(shè)經(jīng)驗 ,為成都成百上千客戶提供網(wǎng)頁設(shè)計制作,網(wǎng)站開發(fā),企業(yè)網(wǎng)站制作建設(shè)等服務(wù),包括成都營銷型網(wǎng)站建設(shè)，高端網(wǎng)站設(shè)計，同時也為不同行業(yè)的客戶提供網(wǎng)站制作、網(wǎng)站建設(shè)的服務(wù),包括成都電商型網(wǎng)站制作建設(shè),裝修行業(yè)網(wǎng)站制作建設(shè)，傳統(tǒng)機械行業(yè)網(wǎng)站建設(shè),傳統(tǒng)農(nóng)業(yè)行業(yè)網(wǎng)站制作建設(shè)。在成都做網(wǎng)站,選網(wǎng)站制作建設(shè)服務(wù)商就選成都創(chuàng)新互聯(lián)。

vue是什么軟件

Vue是一套用于構(gòu)建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫只關(guān)注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。

   uniapp和vue的區(qū)別

組件/標(biāo)簽的變化

以前是html標(biāo)簽，現(xiàn)在是小程序標(biāo)簽。

• p 改成 view

• span、font 改成 text

• a 改成 navigator

• img 改成 image

• input 還在，但type屬性改成了confirmtype

• form、button、checkbox、radio、label、textarea、canvas、video
  這些還在。

• select 改成 picker

• iframe 改成 web-view

• ul、li沒有了，都用view替代

• audio 不再推薦使用，改成api方式，背景音頻api文檔
  其實老的HTML標(biāo)簽也可以在uni-app里使用，uni-app編譯器會在編譯時把老標(biāo)簽轉(zhuǎn)為新標(biāo)簽，比如把p編譯成view。但不推薦這種用法，調(diào)試H5端時容易混亂。

除了改動外，新增了一批手機端常用的新組件

• scroll-view 可區(qū)域滾動視圖容器

• swiper 可滑動區(qū)域視圖容器

• icon 圖標(biāo)

• rich-text 富文本（不可執(zhí)行js，但可渲染各種文字格式和圖片）

• progress 進度條

• slider 滑塊指示器

• switch 開關(guān)選擇器

• camera 相機

• live-player 直播

• map 地圖

• cover-view 可覆蓋原生組件的視圖容器

cover-view需要多強調(diào)幾句，uni-app的非h6端的video、map、canvas、textarea是原生組件，層級高于其他組件。如需覆蓋原生組件，比如在map上加個遮罩，則需要使用cover-view組件

除了內(nèi)置組件，還有很多開源的擴展組件，把常用操作都進行封裝，DCloud建立了插件市場收錄這些擴展組件，詳見插件市場

js的變化

js的變化，分為運行環(huán)境變化、數(shù)據(jù)綁定模式變化、api變化3部分。

• 運行環(huán)境從瀏覽器變成v8引擎

標(biāo)準(zhǔn)js語法和api都支持，比如if、for、settimeout、indexOf等。

但瀏覽器專用的window、document、navigator、location對象，包括cookie等存儲，只有在瀏覽器中才有，app和小程序都不支持。

可能有些人以為js等于瀏覽器里的js。其實js是ECMAScript組織管理的，瀏覽器中的js是w3c組織基于js規(guī)范補充了window、document、navigator、location等專用對象。

在uni-app的各個端中，除了h6端，其他端的js都運行在一個獨立的v8引擎下，不是在瀏覽器中，所以瀏覽器的對象無法使用。如果你做過小程序開發(fā)，對此應(yīng)當(dāng)很了解。

這意味著依賴document的很多HTML的庫，比如jqurey無法使用。

當(dāng)然app和小程序支持web-view組件，里面可以加載標(biāo)準(zhǔn)HTML，這種頁面仍然支持瀏覽器專用對象window、document、navigator、location。

• 以前的dom操作，改成vue的MVVM模式

現(xiàn)在前端趨勢是去dom化，改用mvvm模式，更簡潔的寫法，大幅減少代碼行數(shù)，同時差量渲染性能更好。

uni-app使用vue的數(shù)據(jù)綁定方式解決js和dom界面交互的問題。

如果你想改變某個dom元素的顯示內(nèi)容，比如一個view的顯示文字：

以前是給view設(shè)id，然后js里通過選擇器獲取dom元素，進一步通過js進行賦值操作，修改dom元素的屬性或值。

如下演示了一段代碼，頁面中有個顯示的文字區(qū)和一個按鈕，點擊按鈕后會修改文字區(qū)的值

  
     
         
           document.addEventListener("DOMContentLoaded",function () {  
               document.getElementById("spana").innerText="456"  
            })  
           function changetextvalue () {  
               document.getElementById("spana").innerText="789"  
            }  
         
     
     
       123  
       修改為789  
     

現(xiàn)在的做法，是vue的綁定模式，給這個dom元素綁定一個js變量，在script中修改js變量的值，dom會自動變化，頁面會自動更新渲染

如果你學(xué)過小程序的數(shù)據(jù)綁定，但不了解vue，要注意：

• 小程序的數(shù)據(jù)綁定參考了vue，但自己修改了一些。在uni-app中只支持標(biāo)準(zhǔn)的vue，不支持小程序的數(shù)據(jù)綁定語法

• 小程序里的setData在uni-app里并不存在，因為vue是自動雙向數(shù)據(jù)綁定的。直接通過賦值方式修改數(shù)據(jù)，如果數(shù)據(jù)綁定到界面上，界面會自動更新渲染

• js api的變化

  
  

因為uni-app的api是參考小程序的，所以和瀏覽器的js api有很多不同，如

• alert,confirm 改成 uni.showmodel

• ajax 改成 uni.request

• cookie、session 沒有了，local.storage 改成 uni.storage

uni-app的js api還有很多，但基本就是小程序的api，把wx.xxx改為uni.xxx即可。

uni-app在不同的端，支持條件編譯，無限制的使用各端獨有的api，

css的變化

標(biāo)準(zhǔn)的css基本都是支持的。

選擇器有2個變化：*選擇器不支持；元素選擇器里沒有body，改為了page。微信小程序即是如此。

page{  
}

單位方面，px無法動態(tài)適應(yīng)不同寬度的屏幕，rem無法用于nvue/weex。如果想使用根據(jù)屏幕寬度自適應(yīng)的單位，推薦使用rpx，全端支持。 尺寸單位文檔

uni-app推薦使用flex布局，并默認(rèn)就是flex布局，這個布局思路和傳統(tǒng)流式布局有點區(qū)別。但flex的有趣在于，不管是什么技術(shù)都支持這種排版，web、小程序/快應(yīng)用、weex/rn、原生的iOS、Android開發(fā)，全都支持flex。它是通吃所有端的新一代布局方案。相關(guān)教程請自行百度學(xué)習(xí)。

uni-app的vue文件里支持所有web排版方式，不管是流式還是flex。但nvue里，只支持flex，因為它在app端是使用原生排版引擎渲染的。

注意css里背景圖和字體文件，盡量不要大于40k，因為會影響性能。在小程序端，如果要大于40k，需放到服務(wù)器側(cè)遠(yuǎn)程引用或base64后引入，不能放到本地作為獨立文件引用。

工程結(jié)構(gòu)和頁面管理

uni-app的工程結(jié)構(gòu)有單獨的要求

每個可顯示的頁面，都必須在 pages.json 中注冊。如果你開發(fā)過小程序，那么pages.json類似app.json。如果你熟悉vue，這里沒有vue的路由，都是在pages.json里管理。

原來工程的首頁一般是index.html或default.html，是在web server里配的。而uni-app的首頁，是在pages.json里配的，page節(jié)點下第一個頁面就是首頁。一般在/pages/xx的目錄下。

app和小程序中，為了提升體驗，頁面提供了原生的導(dǎo)航欄和底部tabbar，注意這些配置是在pages.json中做，而不是在vue頁面里創(chuàng)建，但點擊事件的監(jiān)聽在顯示的vue頁面中做。

在vue中，以前的js事件監(jiān)聽概念改為了生命周期概念。

	當(dāng)uni-app 初始化完成時觸發(fā)（全局只觸發(fā)一次）
onShow	當(dāng)uni-app 啟動，或從后臺進入前臺顯示
onHide	當(dāng)uni-app 從前臺進入后臺
onError	當(dāng)uni-app 報錯時觸發(fā)
onUniNViewMessage	對nvue 頁面發(fā)送的數(shù)據(jù)進行監(jiān)聽，
onUnhandledRejection	對未處理的 Promise 拒絕事件監(jiān)聽函數(shù)（暫時只支持 CLI 創(chuàng)建的項目使用 CLI 工程，更新 uni 相關(guān)版本到 2.0.0-alpha-28020200701003 即可支持 onShareTimeline）

如果你熟悉小程序開發(fā)的話，對比變化如下：

• 原來app.json被一拆為二。頁面管理，被挪入了uni-app的pages.json；非頁面管理，挪入了manifest.json

• 原來的app.js和app.wxss被合并到了app.vue中

看完上述內(nèi)容，你們掌握uniapp與vue的區(qū)別有哪些的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

分享題目：uniapp與vue的區(qū)別有哪些-創(chuàng)新互聯(lián)
轉(zhuǎn)載來于：http://www.xueling.net.cn/article/dpogii.html