ui-app基本知识体系

最新推荐文章于 2024-07-19 08:00:00 发布

Yoren~

最新推荐文章于 2024-07-19 08:00:00 发布

阅读量283

点赞数

文章标签： ui vue.js 前端前端框架

本文链接：https://blog.csdn.net/hafk12/article/details/131774032

版权

uni-app是一个基于Vue.js的跨平台开发框架，适用于iOS、Android、Web等多个平台。其优势包括一套代码多端发布、优秀的运行体验、低学习成本和丰富的组件生态。文章详细介绍了uni-app的数据绑定、生命周期、组件通讯以及导航跳转等核心概念。

摘要由CSDN通过智能技术生成

uni-app是什么？

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

Uni-app的优势

跨平台更多，真正做到一套代码多端发行，支持原生代码混写和原生sdk集成。
运行体验更好。组件、api与微信小程序一致，兼容weex原生渲染。
通用技术栈，学习成本更低。Vue的语法，微信小程序的api，对于前端开发人员来说更容易上手。
开放生态，组件更丰富。支持通过npm安装第三方包；支持微信小程序自定义组件及sdk；兼容mpvue组件及项目；app端支持与原生混合编码；

数据绑定

利用{ {}}绑定data数据

<view>
    <view>{
  {data}}</view>
</view>

export default {
		data() {
			return {
				data:'我是子组件',

			}
		}
}

通过v-bind对属性进行绑定

<template>
	<view>
		<div style="text-align: center;">todolist</div>
		<div><input type="text" :value="inputval" placeholder="请输入内容:" v-on:input="handelinput"><span @click="intodata" class="textblue">添加</span></div>
		<div v-for="(item,index) in datelist" :key="index" class="listclass">
			<span>{
  {index+1}}</span>
			<span class="margin20">{
  {item}}</span>
			<!-- 注意删除需要传参数index -->
			<span @click="deldata(index)" class="textred">删除</span>
		</div>
	</view>
</template>

handelinput(e){
				// console.log(e);
				// console.log(e.detail.value);
				this.inputval=e.detail.value
			}

生命周期

应用的生命周期

uni-app 支持如下应用生命周期函数：

函数名	说明
onLaunch	当uni-app 初始化完成时触发（全局只触发一次）
onShow	当 uni-app 启动，或从后台进入前台显示
onHide	当 uni-app 从前台进入后台
onError	当 uni-app 报错时触发
onUniNViewMessage	对 nvue 页面发送的数据进行监听，可参考