浅谈VUE uni-app 核心知识

 更新时间:2021年10月19日 16:41:57   作者:上晴下雪  
这篇文章主要给大家介绍了关于uniapp的核心知识,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

规范

a. 页面文件遵循vue单文件组件规范

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

b. 组件标签靠近小程序规范

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

c. 接口能力(JS API)靠近微信小程序规范

//获取位置信息
uni.getLocation({
	type:'wgs84',
	success:function(res){
		console.log('当前位置的经度:'+res.longitude);
		console.log('当前位置的纬度:'+res.latitude);
	}
});

e. 数据绑定及事件处理使用Vue.js 规范

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

特色

a. 条件编译

#ifdef APP-PLUS
	仅出现在APP平台下的代码
#endif
#ifndef H5
	 除了H5平台,其它平台均存在的代码
#endif
#ifdef H5 || MP-WEIXION
在H5平台或微信信小程序平台存在的代码
#endif

b. App端的Nvue开发

uni-app App端内置了一个基于 weex 改进的原生渲染引擎,提供了原生渲染能力。

在App端,如果使用vue页面,则使用webview渲染;如果使用nvue页面,则使用原生渲染。

c. HTML5+

uni-app App端内置HTML5+ 引擎;让 js 可以直接调用丰富的原生能力。一些比较复杂的功能,可以直接调用App原生插件来实现。只能在App端使用,无法在H5和小程序中使用

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!

相关文章

  • vue 粒子特效的示例代码

    vue 粒子特效的示例代码

    本篇文章主要介绍了vue 粒子特效的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 解决vue elementUI 使用el-select 时 change事件的触发问题

    解决vue elementUI 使用el-select 时 change事件的触发问题

    这篇文章主要介绍了解决vue elementUI 使用el-select 时 change事件的触发问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • ant desing vue table 实现可伸缩列的完整例子

    ant desing vue table 实现可伸缩列的完整例子

    最近在使用ant-design-vue做表格时,遇到要做一个可伸缩列表格的需求,在网上一直没有找到好的方法,于是小编动手自己写个可以此功能,下面小编把ant desing vue table 可伸缩列的实现代码分享到脚本之家平台供大家参考
    2021-05-05
  • vue.js中npm安装教程图解

    vue.js中npm安装教程图解

    这篇文章主要介绍了vue.js中npm安装教程图解,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-04-04
  • vue项目安装使用vconsole方式

    vue项目安装使用vconsole方式

    这篇文章主要介绍了vue项目安装使用vconsole方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-11-11
  • VUE v-bind 数据绑定的示例详解

    VUE v-bind 数据绑定的示例详解

    这篇文章主要介绍了VUE v-bind 数据绑定,简单点来说就是对 HTML 中的元素,我们可以使用 v-bind 来进行绑定和动态的数据输出,本文结合示例代码给大家介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • vue项目history模式刷新404问题解决办法

    vue项目history模式刷新404问题解决办法

    这篇文章主要给大家介绍了关于vue项目history模式刷新404问题的解决办法,需要的朋友可以参考下
    2023-11-11
  • el-date-picker默认结束为当前时分秒的操作方法

    el-date-picker默认结束为当前时分秒的操作方法

    在element ui中的日期时间选择组件中默认是00:00,现在需求是点击默认结束时间为当前时分秒,查了很多资料写的都不准确 ,今天给大家分享el-date-picker默认结束为当前时分秒的操作方法,感兴趣的朋友一起看看吧
    2024-01-01
  • vue axios整合使用全攻略

    vue axios整合使用全攻略

    这篇文章主要介绍了vue axios整合使用全攻略,需要的朋友可以参考下
    2018-05-05
  • 使用van-picker 动态设置当前选中项

    使用van-picker 动态设置当前选中项

    这篇文章主要介绍了使用van-picker 动态设置当前选中项方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10

最新评论