【uni-app从入门到实战】数据绑定、事件、生命周期

文章目录

数据绑定

<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​​会触发多次，只要页面显示或隐藏都会执行