uniApp的Vue基础语法

一、显示定义变量

data:function(){
   return {
	title:"我是标题",
	content:"我是内容",
	list:[],
	pageLoad:false,
	num:1
   }
}

二、模板语法

1.文本

<div>{{title}}</div>

2.html

<div v-html="content"></div>
<rich-text :nodes="content"></rich-text>

3.条件判断 if else-if else

<div v-if="num==1">1</div>
<div v-else-if="num==2">2</div>
<div v-else>其他数字</div>

4.列表循环 for

<div class="row-item-text" v-for="(item,index) in list" :key="index">{{item}}</div>

5.样式处理class和style

优先直接使用变量，在属性上计算相对耗性能

<div class="a" :class="cls">这是红色字体哦</div>
<div :style="style">这是绑定style</div>
<div class="a" :class="{ active: isActive }">对象模式</div>
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }">对象模式</div>

6.事件 @click @tap @change @keyup

<div class="btn mgr-10" @click="clickMe">点击事件</div>
<div class="btn" @click="clickMe('带参数的事件')">点击事件</div>

7.表单输入v-model

<div>
    <input type="text" v-model="nickname" />
    <div>这是input输入的值{{nickname}}</div>
</div>

完整代码

<template>
	<div >
		 
		<div class="row-box">
		<div class="d-title">{{title}}</div>
		<div class="d-content">{{content}}</div>
		</div>
		<div class="bg-white">
			<div v-if="num==1">1</div>
			<div v-else-if="num==2">2</div>
			<div v-else>其他数字</div>
			<div :class="cls">这是红色字体哦</div>
			<div :style="style">这是绑定style</div>
			<div class="flex mgb-10">
			<div class="btn mgr-10" @click="clickMe">点击事件</div>
			<div class="btn" @click="clickMe('带参数的事件')">点击事件</div>
			</div>
			<div>
				<input type="text" v-model="nickname" />
				<div>这是input输入的值{{nickname}}</div>
			</div>
		<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:"我是内容",
				nickname:"这是昵称",
				list:[],
				cls:"cl-red",
				style:"font-size:36px;color:f30;",
				num:2
			}
		},
		onLoad:function(ops){
			this.getPage();
		},
		onReachBottom:function(){
			this.getList();
		},
		onPullDownRefresh:function(){
			this.getPage();
			uni.stopPullDownRefresh();
		},	
		methods:{
			clickMe:function(msg){
				 
				if(typeof(msg)=="string"){
					alert(msg)
				}else{
					
					alert("我被击中了");
				}
				
			},
			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>