溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
uniapp與vue的區別有哪些？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。
Vue是一套用于構建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區別是，使用Vue可以自底向上逐層應用，其核心庫只關注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態系統支持的庫開發復雜的單頁應用。
uniapp和vue的區別
組件/標簽的變化
以前是html標簽，現在是小程序標簽。
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標簽也可以在uni-app里使用，uni-app編譯器會在編譯時把老標簽轉為新標簽，比如把p編譯成view。但不推薦這種用法，調試H5端時容易混亂。
除了改動外，新增了一批手機端常用的新組件
scroll-view 可區域滾動視圖容器
swiper 可滑動區域視圖容器
icon 圖標
rich-text 富文本（不可執行js，但可渲染各種文字格式和圖片）
progress 進度條
slider 滑塊指示器
switch 開關選擇器
camera 相機
live-player 直播
map 地圖
cover-view 可覆蓋原生組件的視圖容器
cover-view需要多強調幾句，uni-app的非h6端的video、map、canvas、textarea是原生組件，層級高于其他組件。如需覆蓋原生組件，比如在map上加個遮罩，則需要使用cover-view組件
除了內置組件，還有很多開源的擴展組件，把常用操作都進行封裝，DCloud建立了插件市場收錄這些擴展組件，詳見插件市場
js的變化
js的變化，分為運行環境變化、數據綁定模式變化、api變化3部分。
運行環境從瀏覽器變成v8引擎
標準js語法和api都支持，比如if、for、settimeout、indexOf等。
但瀏覽器專用的window、document、navigator、location對象，包括cookie等存儲，只有在瀏覽器中才有，app和小程序都不支持。
可能有些人以為js等于瀏覽器里的js。其實js是ECMAScript組織管理的，瀏覽器中的js是w3c組織基于js規范補充了window、document、navigator、location等專用對象。
在uni-app的各個端中，除了h6端，其他端的js都運行在一個獨立的v8引擎下，不是在瀏覽器中，所以瀏覽器的對象無法使用。如果你做過小程序開發，對此應當很了解。
這意味著依賴document的很多HTML的庫，比如jqurey無法使用。
當然app和小程序支持web-view組件，里面可以加載標準HTML，這種頁面仍然支持瀏覽器專用對象window、document、navigator、location。
以前的dom操作，改成vue的MVVM模式
現在前端趨勢是去dom化，改用mvvm模式，更簡潔的寫法，大幅減少代碼行數，同時差量渲染性能更好。
uni-app使用vue的數據綁定方式解決js和dom界面交互的問題。
如果你想改變某個dom元素的顯示內容，比如一個view的顯示文字：
以前是給view設id，然后js里通過選擇器獲取dom元素，進一步通過js進行賦值操作，修改dom元素的屬性或值。
如下演示了一段代碼，頁面中有個顯示的文字區和一個按鈕，點擊按鈕后會修改文字區的值
<html>
<head>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded",function () {
document.getElementById("spana").innerText="456"
})
function changetextvalue () {
document.getElementById("spana").innerText="789"
}
</script>
</head>
<body>
<span id="spana">123</span>
<button type="button" onclick="changetextvalue()">修改為789</button>
</body>
</html>現在的做法，是vue的綁定模式，給這個dom元素綁定一個js變量，在script中修改js變量的值，dom會自動變化，頁面會自動更新渲染
<template>
<view>
<text>{{textvalue}}</text><!-- 這里演示了組件值的綁定 -->
<button :type="buttontype" @click="changetextvalue()">修改為789</button><!-- 這里演示了屬性和事件的綁定 -->
</view>
</template>
<script>
export default {
data() {
return {
textvalue:"123",
buttontype:"primary"
};
},
onLoad() {
this.textvalue="456"//這里修改textvalue的值，其實123都來不及顯示就變成了456
},
methods: {
changetextvalue() {
this.textvalue="789"//這里修改textvalue的值，頁面自動刷新為789
}
}
}
</script>如果你學過小程序的數據綁定，但不了解vue，要注意：
小程序的數據綁定參考了vue，但自己修改了一些。在uni-app中只支持標準的vue，不支持小程序的數據綁定語法
小程序里的setData在uni-app里并不存在，因為vue是自動雙向數據綁定的。直接通過賦值方式修改數據，如果數據綁定到界面上，界面會自動更新渲染
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的變化
標準的css基本都是支持的。
選擇器有2個變化：*選擇器不支持；元素選擇器里沒有body，改為了page。微信小程序即是如此。
page{
}單位方面，px無法動態適應不同寬度的屏幕，rem無法用于nvue/weex。如果想使用根據屏幕寬度自適應的單位，推薦使用rpx，全端支持。 尺寸單位文檔
uni-app推薦使用flex布局，并默認就是flex布局，這個布局思路和傳統流式布局有點區別。但flex的有趣在于，不管是什么技術都支持這種排版，web、小程序/快應用、weex/rn、原生的iOS、Android開發，全都支持flex。它是通吃所有端的新一代布局方案。相關教程請自行百度學習。
uni-app的vue文件里支持所有web排版方式，不管是流式還是flex。但nvue里，只支持flex，因為它在app端是使用原生排版引擎渲染的。
注意css里背景圖和字體文件，盡量不要大于40k，因為會影響性能。在小程序端，如果要大于40k，需放到服務器側遠程引用或base64后引入，不能放到本地作為獨立文件引用。
工程結構和頁面管理
uni-app的工程結構有單獨的要求
每個可顯示的頁面，都必須在 pages.json 中注冊。如果你開發過小程序，那么pages.json類似app.json。如果你熟悉vue，這里沒有vue的路由，都是在pages.json里管理。
原來工程的首頁一般是index.html或default.html，是在web server里配的。而uni-app的首頁，是在pages.json里配的，page節點下第一個頁面就是首頁。一般在/pages/xx的目錄下。
app和小程序中，為了提升體驗，頁面提供了原生的導航欄和底部tabbar，注意這些配置是在pages.json中做，而不是在vue頁面里創建，但點擊事件的監聽在顯示的vue頁面中做。
在vue中，以前的js事件監聽概念改為了生命周期概念。
當uni-app 初始化完成時觸發（全局只觸發一次） | |
| onShow | 當 uni-app 啟動，或從后臺進入前臺顯示 |
| onHide | 當 uni-app 從前臺進入后臺 |
| onError | 當 uni-app 報錯時觸發 |
| onUniNViewMessage | 對 nvue 頁面發送的數據進行監聽， |
| onUnhandledRejection | 對未處理的 Promise 拒絕事件監聽函數（暫時只支持 CLI 創建的項目使用 CLI 工程，更新 uni 相關版本到 2.0.0-alpha-28020200701003 即可支持 onShareTimeline） |
如果你熟悉小程序開發的話，對比變化如下：
原來app.json被一拆為二。頁面管理，被挪入了uni-app的pages.json；非頁面管理，挪入了manifest.json
原來的app.js和app.wxss被合并到了app.vue中
看完上述內容，你們掌握uniapp與vue的區別有哪些的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
