前端学习(1720):前端系列javascript之生命周期下

page2.vue

<template>
	<view>
		这是page2
		<button type="primary" @click="open">点击跳转</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {
		console.log('page onload2')
		},
		//页面渲染完成
		onReady(){
			console.log('page2 onReady')
			//获取节点信息
		},
		//页面显示
		onShow(){
			console.log('page2 onShow')
		},
		//页面隐藏
		onHide(){
			console.log('page2 onHide')
		},
		//页面卸载
		onUnload(){
			console.log('page2 onunload')
			//请求后台接口
			//渲染前得操作
		},
		methods: {
			open(){
				//打开新页面
				uni.navigateTo({
					url:'../pages/index/index?id=uniapp'
				})
			}
		}
	}
</script>

<style>

</style>

index.vue

<template>
	<!-- <view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
	</view> -->
	<view>
	<view class="box" hover-class="hoverclass">
		测试文字1
	</view>
	<view class="box" hover-class="hoverclass">
		测试文字2
	</view>
	<text>测试文字3</text>
	<text>测试文字4</text>
	<view class="image-box">
		<image src="../../static/logo.png" mode="aspectFit"></image>
	</view>
	<view>
		{{title}}
	</view>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: ''
			}
		},
		//页面加载
		onLoad(e) {
		console.log('page onload',e)
		this.title=e.id
		},
		//页面渲染完成
		onReady(){
			console.log('page onReady')
		},
		//页面显示
		onShow(){
			console.log('page onShow')
		},
		//页面隐藏
		onHide(){
			console.log('page onHide')
		},
		//页面卸载
		onUnload(){
			console.log('page onunload')
		},
		methods: {

		}
	}
</script>

<style>
	.box{
		border:1px solid red;
	}
	.hoverclass{
		background:#007AFF ;
	}
	.image-box{
		width: 100px;
		height: 100px;
	}
</style>

运行结果

猜你喜欢

转载自blog.csdn.net/weixin_43392489/article/details/107142501