hello.vue给大家介绍常用的vue文件结构

vue的文件结构

data 显示生命变量

onLoad 页面加载事件 可以获取url参数

建议大家去uniApp官网 把生命周期这一节知识搞清楚 https://uniapp.dcloud.io/frame?id=%E9%A1%B5%E9%9D%A2%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F 

onReachBottom 触底加载可以一直往下拉

onPullDownRefresh 下拉刷新

onLoad 生命周期中的页面加载事件 可以获取url参数

<template>
	<div >
		 
		<div class="row-box">
		<div class="d-title">{{title}}</div>
		<div class="d-content">{{content}}</div>
		</div>
		<div class="bg-white">
		<div class="row-item-text" v-for="(item,index) in list" :key="index">{{item}}</div>
		</div>
	</div>
</template>

<script>
	var num=0;
	export default{
		data:function(){
			return {
				title:"我是标题",
				content:"我是内容",
				list:[]
			}
		},
		onLoad:function(ops){
			this.getPage();
		},
		onReachBottom:function(){
			this.getList();
		},
		onPullDownRefresh:function(){
			this.getPage();
			uni.stopPullDownRefresh();
		},	
		methods:{
			getPage:function(){
				console.log("加载了");
				var list=[];
				for(var i=0;i<50;i++){
					num++;
					list.push('这是第'+num+'条新闻');
				}
				this.list=list;
				uni.setNavigationBarTitle({
					title:"这是老雷uniApp的hello world"
				})
			},
			getList:function(){
				var list=this.list;
				for(var i=0;i<50;i++){
					num++;
					list.push('这是第'+num+'条新闻');
				}
				this.list=list;
			}
		}
	}
</script>

<style>
</style>