uniApp：模板语法及生命周期

uni-app 数据绑定

和 vue 一样。

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

<script>
export default {
	data() {
		return {
			msg: '数据绑定-msg的值'
		}
	}
}
</script>

指令

指令是带有 v- 前缀的特殊属性。
指令的作用是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

v-bind 属性绑定指令

v-bind 是属性绑定指令，可以简写成 :='' 。

<!-- 语法格式 -->
<a v-bind="变量名">动态链接地址</a>

<template>
	<view>
		<a :href='hrefUrl'>点击跳转到百度</a>
	</view>
</template>

<script>
export default {
	data() {
		return {
			hrefUrl: 'http://www.baidu.com'
		}
	}
}
</script>

v-for 列表渲染指令

v-for 是循环属性，可以遍历处理每一个属性，最后使用 :key 属性进行标识。
:key 唯一标识，保证数据不重复。

<template>
	<view>
		<view v-for="(item, index) in list" :key="index">
			序号：{{index}}, 姓名：{{item.name}}, 年龄：{{item.age}}
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [
				{name: '张三', age: 18},
				{name: '李四', age: 19},
				{name: '王五', age: 20},
			]
		}
	}
}
</script>

v-on 注册事件和传递参数

实际开发中，将 v-on 替换为 @ 。

<template>
	<view>
		<button type="default" v-on:click="clickHandle">按钮</button>
	</view>
</template>

<script>
export default {
	methods: {
		clickHandle() {
			console.log('点击我了')
		}
	}
}
</script>

生命周期

一个对象从创建、运行、销毁的整个过程被称为生命周期。
详情：Vue.js 生命周期 。

应用的生命周期函数

定义在 app.vue 中。

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

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		},
        onError: function(err) {
			console.log('出现异常了', err)
		}
	}
</script>

• 第一次打开 uni-app 时，触发 Launch 、 Show 。

  

• 当切换当前浏览器窗口到别的页面，再切换回来时，触发 Hide 、 Show 。

  

• 当出现异常时，触发 Error 。

  

页面的生命周期函数

定义在每个页面中。

页面生命周期函数名	说明
onLoad	监听页面加载，其参数为上个页面传递的数据，类型为 Object（用于页面传参）
onShow	监听页面显示，页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面。
onReady	监听页面初次渲染完成。
onHide	监听页面隐藏。
onUnload	监听页面卸载。
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新。
onReachBottom	页面滚动到底部事件（不是scroll-view 滚动到底部），常用与下拉下一页数据。

<script>
	export default {
		onLoad(options) {
			console.log('页面加载了', options)
		},
		onShow:function(){
			console.log('页面显示了')
		},
		onReady:function(){
			console.log('页面初次渲染完成')
		},
		onHide:function(){
			console.log('页面隐藏了')
		}
	}
</script>

• 第一次打开 uni-app 时，触发 onLoad 、 onShow 、 onReady 。

  

• 当切换当前浏览器窗口到别的页面，再切换回来时，触发 onHide 、 onShow 。

  

页面下拉刷新 onPullDownRefresh

方式一：通过下拉触发

在 js 中定义 onPullDownRefresh 处理函数，监听该页面用户下拉刷新事件。

• 在 pages.json 里，找到当前页面的 pages 节点，并在 style 选项中开启 enablePullDownRefresh 。
• 当处理完数据刷新后，uni.stopPullDownRefresh 可以停止当前页面的下拉刷新。

<template>
	<view>
		<view v-for="item in list" :key='item'>
			{{item}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: ['html', 'css', 'ui', '测试', '后端']
			}
		},
        // 触发下拉刷新函数
		onPullDownRefresh: function(){
			console.log('触发了下拉刷新')
            
            // 延迟两秒刷新数据
			setTimeout(() => {
				this.list = ['HTML', 'CSS', 'UI', 'JAVA', 'Python']
				// 停止下拉刷新
				uni.stopPullDownRefresh()
			}, 2000)
		}
	}
</script>

方式二：通过配置文件开启

<!-- 开启下拉刷新 -->
uni.startPullDownRefresh()
<!-- 关闭下拉刷新 -->
uni.stopPullDownRefresh()

<template>
	<view>
		<view v-for="item in list" :key='item'>{{item}}</view>
		<button type="default" @click="pullDown">下拉刷新</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: ['html', 'css', 'ui', '测试', '后端']
			}
		},
		methods: {
			// 下拉刷新
			pullDown() {
				uni.startPullDownRefresh()
			}
		},
        // 触发下拉刷新函数
		onPullDownRefresh: function(){
			console.log('触发了下拉刷新')
            // 延迟两秒刷新数据
			setTimeout(() => {
				this.list = ['HTML', 'CSS', 'UI', 'JAVA', 'Python']
				// 停止下拉刷新
				uni.stopPullDownRefresh()
			}, 2000)
		}
	}
</script>

页面触底事件 onReachBottom

onReachBottom 页面触底。

<template>
	<view>
		<view class="box" v-for="(item, index) in list" :key='index'>
			{{item}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: ['html', 'css', 'ui', '测试', '后端']
			}
		},
		// 页面触底
		onReachBottom() {
			console.log('页面触底了')
			// 添加数据：模拟加载下一页数据
			this.list = [...this.list, ...['HTML', 'CSS', 'UI', 'JAVA', 'Python']]
		}
	}
</script>

<style>
    .box {line-height: 300rpx;}
</style>