广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >浅谈VUE uni-app 核心知识
  • 775
分享到

浅谈VUE uni-app 核心知识

2024-04-02 19:04:59 775人浏览 薄情痞子
摘要

目录规范 a. 页面文件遵循Vue单文件组件规范b. 组件标签靠近小程序规范c. 接口能力(js api)靠近微信小程序规范e. 数据绑定及事件处理使用vue.js 规范特色 a.

规范

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和小程序中使用

总结

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

--结束END--

本文标题: 浅谈VUE uni-app 核心知识

本文链接: https://www.lsjlt.com/news/154856.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 浅谈VUE uni-app 核心知识
    目录规范 a. 页面文件遵循vue单文件组件规范b. 组件标签靠近小程序规范c. 接口能力(JS API)靠近微信小程序规范e. 数据绑定及事件处理使用Vue.js 规范特色 a. ...
    99+
    2022-11-12
  • 浅谈VUE uni-app 常用API
    目录一、路由与页面跳转二、界面总结一、路由与页面跳转 uni.navigateTo(OBJECT) 保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返...
    99+
    2022-11-12
  • 浅谈VUE uni-app 开发环境
    目录1.通过 HBuilderX 可视化界面 2.通过 vue-cli 命令执行总结1.通过 HBuilderX 可视化界面 a. 创建uni-app; b. 运行uni-app...
    99+
    2022-11-12
  • 浅谈VUE uni-app 模板语法
    1.v-bind(简写 :) 组件属性中要使用data中定义的数据变量,或组件属性要使用表达式,需用v-bind指定 简写 : 2.v-on(简写@) 监听DOM事件 cli...
    99+
    2022-11-12
  • 浅谈VUE uni-app 基础组件
    1 .scroll-view 使用竖向滚动时,需要给 一个固定高度,通过 css 设置 height;使用横向滚动时,需要给添加white-space: nowrap;样式。 s...
    99+
    2022-11-12
  • 浅谈VUE uni-app 生命周期
    目录一、应用的生命周期二、页面生命周期三、组件生命周期总结一、应用的生命周期 onLaunch 当uni-app 初始化完成时触发(全局只触发一次)onShow 当 uni-ap...
    99+
    2022-11-12
  • 浅谈VUE uni-app 自定义组件
    1.父组件向子组件传递数据可以通过 props 2.子组件向父组件传递数据可以通过自定义事件,父组件自定义事件,子组件触发父组件的事件,并传传递数据 3.子组件可以定义插槽slot,...
    99+
    2022-11-12
  • 浅谈VUE uni-app 条件编码和页面布局
    目录条件编译 页面布局总结条件编译 条件编译是用特殊的注释作为标记,在编译时根据这些特殊的注释,将注释里面的代码编译到不同平台。 写法:以 #ifdef 或 #ifndef 加 %...
    99+
    2022-11-12
  • 浅谈Vue入门需掌握的知识
    Vue作为一款目前最流行的前端框架之一,是许多前端开发工程师的不二选择。最近我在前端岗位上也运用Vue实现了几款产品,那么今天来分享一下Vue是什么,以及我对Vue的见解。 一、定义...
    99+
    2022-11-12
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作