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>