淺談VUE uni-app 核心知識(shí)

更新時(shí)間：2021年10月19日 16:41:57 作者：上晴下雪

這篇文章主要給大家介紹了關(guān)于uniapp的核心知識(shí)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

規(guī)范

a. 頁(yè)面文件遵循vue單文件組件規(guī)范

<!-- 模板塊 -->
<template>
	<view class="main">
		{{msg}}
	</view>
</template>
<!-- 腳本塊 -->
<script>
	export default {
		data(){
			return {
				msg:'Hello'
			}
		}
	}
</script>
<!-- 樣式塊 -->
<style>
	.main{
		background-color:#ccc;
	}
</style>

b. 組件標(biāo)簽靠近小程序規(guī)范

<template>
	<view>hello</view>
	<text> wang </view>
</template>

c. 接口能力（JS API）靠近微信小程序規(guī)范

//獲取位置信息
uni.getLocation({
	type:'wgs84',
	success:function(res){
		console.log('當(dāng)前位置的經(jīng)度：'+res.longitude);
		console.log('當(dāng)前位置的緯度：'+res.latitude);
	}
});

e. 數(shù)據(jù)綁定及事件處理使用Vue.js 規(guī)范

<template>
	<view @click="changeMsg">
		{{msg}}
	</veiw>
</template>
<script>
	export defalut{
		data(){
			return {
				msg:'hello'
			}
		},
		methods:{
			changeMsg(){
				this.msg:'world'
			}
		}
	}
</scrip>

特色

a. 條件編譯

#ifdef APP-PLUS
	僅出現(xiàn)在APP平臺(tái)下的代碼
#endif
#ifndef H5
	 除了H5平臺(tái)，其它平臺(tái)均存在的代碼
#endif
#ifdef H5 || MP-WEIXION
在H5平臺(tái)或微信信小程序平臺(tái)存在的代碼
#endif

b. App端的Nvue開(kāi)發(fā)

uni-app App端內(nèi)置了一個(gè)基于 weex 改進(jìn)的原生渲染引擎，提供了原生渲染能力。

在App端，如果使用vue頁(yè)面，則使用webview渲染；如果使用nvue頁(yè)面，則使用原生渲染。

c. HTML5+

uni-app App端內(nèi)置HTML5+ 引擎；讓 js 可以直接調(diào)用豐富的原生能力。一些比較復(fù)雜的功能，可以直接調(diào)用App原生插件來(lái)實(shí)現(xiàn)。只能在App端使用，無(wú)法在H5和小程序中使用

總結(jié)

本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容！

您可能感興趣的文章:

相關(guān)文章

關(guān)于vue中hash和history的區(qū)別與使用圖文詳解
vue-router中有hash模式和history模式,下面這篇文章主要給大家介紹了關(guān)于vue中hash和history的區(qū)別與使用的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下
2023-03-03
Vue項(xiàng)目如何配置git忽略文件
這篇文章主要介紹了Vue項(xiàng)目如何配置git忽略文件問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
結(jié)合mint-ui移動(dòng)端下拉加載實(shí)踐方法總結(jié)
下面小編就為大家?guī)?lái)一篇結(jié)合mint-ui移動(dòng)端下拉加載實(shí)踐方法總結(jié)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-11-11
vue.js實(shí)現(xiàn)開(kāi)關(guān)(switch)組件實(shí)例代碼
這篇文章介紹了vue.js實(shí)現(xiàn)開(kāi)關(guān)(switch)組件的實(shí)例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-06-06
Vue自定義指令的使用實(shí)例介紹
作為使用Vue的開(kāi)發(fā)者，我們對(duì)Vue指令一定不陌生，諸如v-model、v-on、等，同時(shí)Vue也為開(kāi)發(fā)者提供了自定義指令的api，熟練的使用自定義指令可以極大的提高了我們編寫代碼的效率，讓我們可以節(jié)省時(shí)間開(kāi)心的摸魚
2023-04-04
Vue聲明式導(dǎo)航與編程式導(dǎo)航及導(dǎo)航守衛(wèi)和axios攔截器全面詳細(xì)講解
這篇文章主要介紹了Vue聲明式導(dǎo)航與編程式導(dǎo)航及導(dǎo)航守衛(wèi)和axios攔截器，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧
2023-01-01
Vue-router 切換組件頁(yè)面時(shí)進(jìn)入進(jìn)出動(dòng)畫方法
今天小編就為大家分享一篇Vue-router 切換組件頁(yè)面時(shí)進(jìn)入進(jìn)出動(dòng)畫方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
基于ElementUI實(shí)現(xiàn)v-tooltip指令的示例代碼
文本溢出隱藏并使用tooltip 提示的需求,相信在平時(shí)的開(kāi)發(fā)中會(huì)經(jīng)常遇到,常規(guī)做法一般是使用 elementui 的 el-tooltip 組件,在每次組件更新的時(shí)候去獲取元素的寬度/高度判斷是否被隱藏,本文給大家介紹了基于ElementUI實(shí)現(xiàn)v-tooltip指令,需要的朋友可以參考下
2024-09-09
Vue超詳細(xì)講解重試機(jī)制示例
這篇文章主要介紹了Vue重試機(jī)制示例，重試指的是當(dāng)加載出錯(cuò)時(shí)，有能力重新發(fā)起加載組件的請(qǐng)求。異步組件加載失敗后的重試機(jī)制，與請(qǐng)求服務(wù)端接口失敗后的重試機(jī)制一樣
2023-01-01
el-form-item表單label添加提示圖標(biāo)的實(shí)現(xiàn)
本文主要介紹了el-form-item表單label添加提示圖標(biāo)的實(shí)現(xiàn),我們將了解El-Form-Item的基本概念和用法,及添加提示圖標(biāo)以及如何自定義圖標(biāo)樣式,感興趣的可以了解一下
2023-11-11