济南中建设计院网站,开源零代码平台,南庄九江网站建设,群晖官方WordPress套件本帖最后由 李洋水蛟龙 于 2020-12-20 18:11 编辑1.在主页面添加一个按钮并响应点击事件效果显示#xff1a;图片1.png (404.17 KB, 下载次数: 0)2020-12-10 17:53 上传点击按钮“点我”下方便会显示“我被点击了”说明点击事件已完成代码如下#xff1a;Index.hml文件中Hell…本帖最后由 李洋水蛟龙 于 2020-12-20 18:11 编辑1.在主页面添加一个按钮并响应点击事件效果显示图片1.png (404.17 KB, 下载次数: 0)2020-12-10 17:53 上传点击按钮“点我”下方便会显示“我被点击了”说明点击事件已完成代码如下Index.hml文件中Hello {{title}}Index.js文件中export default{data: {title: World},jltfclickAction(){console.log(我被点击了);}}index.css文件中.jltfcontainer {flex-direction: column;width: 454px;height: 454px;justify-content: center;align-items: center;}.jltftitle {width: 200px;font-size: 30px;text-align: center;}.jltfbtn{width: 200px;height: 50px;}2. 添加训练页面并实现其与主页面之间的相互跳转效果显示图片2.png (35.91 KB, 下载次数: 0)2020-12-10 17:54 上传点击“点我”将会进入下一个页面图片3.png (36.56 KB, 下载次数: 0)2020-12-10 17:54 上传当你点击“返回”时会回到第一个页面代码如下(新建一个js page 例如jltfxunlian)Jltfxunlian.hml文件中训练页面Jltfxunlian.css文件中.jltfcontainer {flex-direction: column;width: 454px;height: 454px;justify-content: center;align-items: center;}.jltftitle {width: 200px;font-size: 30px;text-align: center;}.jltfbtn{width: 200px;height: 50px;}Jltfxunlian.js文件中importrouter fromsystem.routerexport default{data: {},jltfclickAction(){router.replace({uri:pages/index/index});}}3. 验证整个应用和每个页面的生命周期事件效果显示主页面的生命周期显示图片4.png (374.19 KB, 下载次数: 0)2020-12-10 17:54 上传点击“点我”之后主页面会销毁之后出现训练页面图片5.png (426.02 KB, 下载次数: 0)2020-12-10 17:55 上传代码如下:在两个js文件中加入如下代码onInit(){console.log(训练页面的onInit()被调用)},onReady(){console.log(训练页面的onReady()被调用)},onShow(){console.log(训练页面的onShow()被调用)},onDestroy(){console.log(训练页面的onDestroy()被调用)}主页面js文件中把“训练页面”改为“主页面”即可本应用练习参考了张荣超老师部分公开的代码。
