uni-app基础学习

模板语法

uni-app 完整支持 Vue 模板语法。
详见 Vue官方文档（传送门）
基础数据绑定

<template>
	<view class="news">
		<view class="title">{{title}}</view> //在视图中使用 {{}} 调用变量：
		<view>{{msg}}</view>
	</view>
</template>

<script>
export default {
	data() {
		return {   //变量赋值
			title: 'uni-app',
			msg: 'hello'
		};
	}
}
</script>

数组形式的数据绑定

<template>
	<view class="news">
		<view class="">
			{{students[0].age}}  //调用
			{{students[1].name}}
			{{students[0]['name']}}
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			students: [  //赋值
				{name: '张三', age : 18},
				{name: '李四', age : 28}
			]
		};
	}
}
</script>

条件渲染

完整支持Vue条件渲染（传送门）

<template>
	<view class="news">
		<template v-if="show"><view>条件渲染</view></template>     //v-if根据条件决定是否展示。
		<template v-show="seen"><view>seen</view></template>     //根据条件，只隐藏内容
		<template v-hidden="seen2"><view>内容</view></template>  //根据条件，只隐藏内容
		<template v-if="show2"><view>显示</view></template>
		<template v-else><view>隐藏</view></template>
		<template v-if="type === 'A'"><view>333</view></template>
		<template v-else-if="type === 'B'"><view>444</view></template>
		<template v-else-if="type === 'C'"><view>555</view></template>
		<template v-else><view>以上都不是</view></template>
	</view>
</template>
<script>
export default {
	data() {
		return {
			show: false, //后面的图中，显示v-if这一语句消失了。。。
			seen: false,
			seen2: false,
			show2: true,
			type: 'B' //输入除了ABC的，结果都为以上都不是
		};
	}
}
</script>

列表渲染

完整支持Vue列表渲染（传送门）

<template>
	<view class="news">
		<block v-for="(item,index) in list" :key="index">
			<view>
				{{index}} - {{item.name}}
			</view>
		</block>
	</view>
</template>
<script>
export default {
	data() {
		return {
			list: [
				{name: '张三', age : 18},
				{name: '李四', age : 28}
			]
		} 
	}
}
</script>

计算属性

computed
书写格式：computed:{ 属性名:function(){ return 返回值; } }

<template>
	<view class="news">
		<view>属性：{{msg}}</view>
		<view>反转后属性：{{reverseMsg}}</view>
	</view>
</template>
<script>
export default {
	data() {
		return {	
			msg: 'uni-app'
		}
	},
	computed:{
		reverseMsg: function(){
			return this.msg.split('').reverse().join('')
		}
	}
}
</script>

监听属性

watch
通过watch来响应数据的变化。

<template>
	<view class="news">
		<view>{{msg}}</view>
		<button type="primary" @click="anniu">点我加1</button>
	</view>
</template>
<script>
export default {
	data(){
			return{
				msg: 0
			}
	},
	methods:{
		anniu(){
			this.msg=this.msg+1;
		}
	},
	watch:{
		msg:function(news,old){
			console.log("watch",news)
		}
	}
}
</script>