携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第26天，点击查看活动详情

数据绑定

<template>
	<view>
		<view>{{msg+" uni-app"}}</view>
		<view>{{1+1}}</view>
		<view>{{flag?'我是真的':'我是假的'}}</view>
		<image :src="imageSrc" mode="aspectFit"></image>
		<view v-for="(item,index) in arr" :key="index">{{index}}姓名:{{item.name}},昵称:{{item.nickname}}</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				msg:'hello',
				flag:true,
				imageSrc:"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f184e7c3-1912-41b2-b81f-435d1b37c7b4/1ae87107-2943-4ba6-be2b-390ca27c6260.png",
				arr:[
					{
						name:'Walter white',
						nickname:'老白'
					},
					{
						name:'Jesse Pinkman',
						nickname:'小粉'
					},
					{
						name:'Gus Fring',
						nickname:'炸鸡叔'
					}
				]
			}
		}
	}
</script>

事件

<template>
	<view>
		<button @click="clickHandleOne">按钮一</button>
		<button @click="clickHandleTwo">按钮二</button>
		<button @click="clickHandleThree(20)">按钮三</button>
		<button @click="clickHandleFour(20,$event)">按钮四</button>
	</view>
</template>

<script>
	export default{
		methods:{
			clickHandleOne(){
				console.log("按钮一点击");
			},
			clickHandleTwo(e){
				console.log("按钮二点击",e);
			},
			clickHandleThree(num){
				console.log("按钮三点击",num);
			},
			clickHandleFour(num,e){
				console.log("按钮四点击",num,e);
			}
		}
	}
</script>

分别点击按钮一、二、三、四

当事件本身没有参数时，默认也是有一个参数的，点击按钮二的输出可以看到。如果调用方法有参数，还想调用默认的参数，调用时在自己参数后占位即可

生命周期

应用生命周期

下面列举几个常用的应用生命周期函数，更多详细内容可以查看：uni-app官网-应用周期文档

函数名	说明
onLaunch	当uni-app 初始化完成时触发（全局只触发一次）
onShow	当 uni-app 启动，或从后台进入前台显示
onHide	当 uni-app 从前台进入后台
onError	当 uni-app 报错时触发

应用生命周期仅可在App.vue中监听，在其它页面监听无效。打开App.vue发现已经写了几个生命周期方法了。

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

......

我们把程序运行到浏览器，并查看打印信息：

需要注意的是，当程序运行到微信开发者工具时，通过隐藏窗口是打印不出这些信息的，因为运行在手机上时，需要按 home 键退出微信，再打开才能打印这些信息

onError会在 uni-app 报错时触发，我们可以把 onShow中的打印console.log 故意写错来测试下

<script>
	export default {
		......
		onShow: function() {
			consol.log('App Show')
		},
		......
		onError: function() {
			console.log('App onError')
		}
	}
</script>

页面生命周期

这里列举几个常用的页面生命周期函数，更多内容查看：uni-app官网 页面生命周期

函数名	说明
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参） 参考示例
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏
onUnload	监听页面卸载

onLoad和onReady不会触发多次 onShow和onHide会触发多次，只要页面显示或隐藏都会执行