数据绑定

<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

事件

<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

分别点击按钮一、二、三、四
当事件本身没有参数时，默认也是有一个参数的，点击按钮二的输出可以看到。如果调用方法有参数，还想调用默认的参数，调用时在自己参数后占位即可

生命周期

应用生命周期

myuiapp.zip

zip 0星 超过10%的资源 321KB

下载

下面列举几个常用的应用生命周期函数，更多详细内容可以查看：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>

......
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

我们把程序运行到浏览器，并查看打印信息：

需要注意的是，当程序运行到微信开发者工具时，通过隐藏窗口是打印不出这些信息的，因为运行在手机上时，需要按 home 键退出微信，再打开才能打印这些信息

onError会在 uni-app 报错时触发，我们可以把 onShow中的打印console.log 故意写错来测试下

<script>
	export default {
		......
		onShow: function() {
			consol.log('App Show')
		},
		......
		onError: function() {
			console.log('App onError')
		}
	}
script>
1
2
3
4
5
6
7
8
9
10
11
12

页面生命周期

这里列举几个常用的页面生命周期函数，更多内容查看：uni-app官网 页面生命周期

onLoad和onReady不会触发多次
onShow和onHide会触发多次，只要页面显示或隐藏都会执行