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>

?

運行結果

總結

以上是生活随笔為你收集整理的前端学习（1720）：前端系列javascript之生命周期下的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。