uni-app基础知识学习【3】数据绑定+事件+生命周期

vue基本一样

一、uni-app中的数据绑定

在页面中需要定义数据，和我们之前的vue一摸一样，直接在data中定义数据即可

export default {
  data () {
    return {
      msg: 'hello-uni'
    }
  }
}

插值表达式的使用

• 利用插值表达式渲染基本数据

  <view>{{msg}}</view>
  

• 在插值表达式中使用三元运算

  <view>{{ flag ? '我是真的':'我是假的' }}</view>
  

• 基本运算

  <view>{{1+1}}</view>
  

v-bind动态绑定属性

在data中定义了一张图片，我们希望把这张图片渲染到页面上

export default {
  data () {
    return {
      img: 'http://destiny001.gitee.io/image/monkey_02.jpg'
    }
  }
}

利用v-bind进行渲染

<image v-bind:src="img"></image>

还可以缩写成:

<image :src="img"></image>

v-for的使用

data中定以一个数组，最终将数组渲染到页面上

data () {
  return {
    arr: [
      { name: '刘能', age: 29 },
      { name: '赵四', age: 39 },
      { name: '宋小宝', age: 49 },
      { name: '小沈阳', age: 59 }
    ]
  }
}

利用v-for进行循环

<view v-for="(item,i) in arr" :key="i">名字：{{item.name}}---年龄：{{item.age}}</view>

二、uni中的事件

事件绑定

在uni中事件绑定和vue中是一样的，通过v-on进行事件的绑定，也可以简写为@

<button @click="tapHandle">点我啊</button>

事件函数定义在methods中

methods: {
  tapHandle () {
    console.log('真的点我了')
  }
}

事件传参

1.默认如果没有传递参数，事件函数第一个形参为事件对象

// template
<button @click="tapHandle">点我啊</button>
// script
methods: {
  tapHandle (e) {
    console.log(e)
  }
}

2.如果给事件函数传递参数了，则对应的事件函数形参接收的则是传递过来的数据

// template
<button @click="tapHandle(1)">点我啊</button>
// script
methods: {
  tapHandle (num) {
    console.log(num)
  }
}

3.如果获取事件对象也想传递参数

// template
<button @click="tapHandle(1,$event)">点我啊</button>
// script
methods: {
  tapHandle (num,e) {
    console.log(num,e)
  }
}

三、uni的生命周期

应用的生命周期

生命周期的概念：一个对象从创建、运行、销毁的整个过程被成为生命周期。

生命周期函数：在生命周期中每个阶段会伴随着每一个函数的触发，这些函数被称为生命周期函数

uni-app 支持如下应用生命周期函数：

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

页面的生命周期

uni-app 支持如下页面生命周期函数：

函数名	说明	平台差异说明	最低版本
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），参考示例
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成。
onHide	监听页面隐藏
onUnload	监听页面卸载

占坑：uni-app基础知识学习
【1】全局配置和页面配置
【2】组件的基本使用+样式
【3】数据绑定+事件+生命周期
【4】下拉刷新+上拉加载+网络请求
【5】上传图片、预览图片+跨域兼容+导航跳转
【6】组件的创建+组件通讯+uni-ui使用