A brief discussion on VUE uni-app template syntax

<template>
	<view v-bind:class="msg" v-bind:data="1+2">
		{{msg}} world!-{{num}}
		<button v-on:click="show">Click me</button>
		<input v-model="msg" />
		<view v-if="flag">vue</view>
		<view v-else>H5</view>
		<view>{{flag ? 'Show':'Hide'}}</view>
		<block>
			<text>block empty tag</text>
		</block>

		<view v-for="(item, index) in arr">{{index+1}}:{{item}}</view>
		<view @click="c1">
			Parent <view @click.stop="c2">Child</view>
		</view>
	</view>
	
</template>
<script>
export default{
	//Initialize data,
	//data:{}, using object form data will not change, not recommended data(){
		return {
			msg:'hello',//variable arr:['vue','H5','CSS'],//array flag:true,//Boolean value num: 1
		}
	},
	onLoad(){
		setTimeout(()=>{
			this.num++;
		},2000)
	},
	methods:{
		show(){
			console.log('clicked');
			this.flag=!this.flag;
		},
		c1(){
			console.log('I am the parent');
		},
		c2(){
			console.log('I am a child');
		}
	}
}
</script>