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

成都一家集口碑和實(shí)力的網(wǎng)站建設(shè)服務(wù)商，擁有專業(yè)的企業(yè)建站團(tuán)隊(duì)和靠譜的建站技術(shù)，十載企業(yè)及個(gè)人網(wǎng)站建設(shè)經(jīng)驗(yàn) ,為成都成百上千客戶提供網(wǎng)頁設(shè)計(jì)制作,網(wǎng)站開發(fā),企業(yè)網(wǎng)站制作建設(shè)等服務(wù),包括成都營(yíng)銷型網(wǎng)站建設(shè)，高端網(wǎng)站設(shè)計(jì)，同時(shí)也為不同行業(yè)的客戶提供網(wǎng)站制作、網(wǎng)站建設(shè)的服務(wù),包括成都電商型網(wǎng)站制作建設(shè),裝修行業(yè)網(wǎng)站制作建設(shè)，傳統(tǒng)機(jī)械行業(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)建用戶界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫只關(guān)注視圖層，方便與第三方庫和項(xiàng)目整合，且使用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文檔
  其實(shí)老的HTML標(biāo)簽也可以在uni-app里使用，uni-app編譯器會(huì)在編譯時(shí)把老標(biāo)簽轉(zhuǎn)為新標(biāo)簽，比如把p編譯成view。但不推薦這種用法，調(diào)試H5端時(shí)容易混亂。

除了改動(dòng)外，新增了一批手機(jī)端常用的新組件

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

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

• icon 圖標(biāo)

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

• progress 進(jìn)度條

• slider 滑塊指示器

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

• camera 相機(jī)

• live-player 直播

• map 地圖

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

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

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

js的變化

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• js api的變化

  
  

因?yàn)閡ni-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在不同的端，支持條件編譯，無限制的使用各端獨(dú)有的api，

css的變化

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

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

page{  
}

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

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

uni-app的vue文件里支持所有web排版方式，不管是流式還是flex。但nvue里，只支持flex，因?yàn)樗赼pp端是使用原生排版引擎渲染的。

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

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

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

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

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

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

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

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

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

• 原來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è)資訊頻道，感謝各位的閱讀！

本文標(biāo)題：uniapp與vue的區(qū)別有哪些-創(chuàng)新互聯(lián)
分享鏈接：http://weahome.cn/article/dpogii.html