uni-app初级（三）

演示代码

<template>
	<view class="content">
		{{title}}
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:"hello world"
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	
</style>

uni-app语法：
1.模版语法
用hx创建一个uni-app项目就是模版代码，直接写个helloworld，俺们就是uni-app开发者了捏
2.数据绑定
变量需要{{}}包裹，初始化数据写在data的return块里面，如上图，为啥不用data：{},而使用data() {},因为使用前者初始化时不会清空以前绑定的数据，后者则可以重新初始化，和java对象概念一样。
方法都给我怼到method块中，method外的都是一些生命周期函数和处理函数，例如点击事件：

<template>
	<view class="content" v-on:click="open">
		{{title}}
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:"hello world"
			}
		},
		onLoad() {

		},
		methods: {
			open() {
				console.log("I am clicked")
			}
		}
	}
</script>

<style>
	
</style>

如图：点击content的view时，触发click事件，掉用method块中的open方法：控制台日志显示：

如何在页面加载后两秒改变data中的字段值：
在生命周期中写下如下代码：

onLoad() {
			setTimeout(()=>{
				this.title = "hello uni-app"
			},2000) 
		},

如上图：this.title中的this是页面实例，拿到this之后，this就可以拿到data中的值，这样就可以给title重新赋值。

将点击事件和改变data中字段值结合：

<template>
	<view class="content" v-on:click="open">
		{{title}}
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:"hello world"
			}
		},
		onLoad() {
			setTimeout(()=>{
				this.title = "hello uni-app"
			},2000) 
		},
		methods: {
			open() {
				console.log("I am clicked")
				this.title = "我被点击了"
			}
		}
	}
</script>

<style>
	
</style>

上图中的v-on:click可以替换为@click
关于vue中这些关键字对应的简写google搜索一下就能全知，开发时对着抄即可。
3.条件判断
条件判断使用v-if，v-if的值为true则执行，值为false则不执行,也可以使用v-else（v-else即和上面一个v-if条件相反的情况下执行的语句），也可以把true和false写到data数据块里，

v-if代码：

数据data块代码：

显示页面：

同理，可以使用v-if v-else组合，那也就可以使用v-if, v-elif,v-else

4.列表渲染
5.基础组件的使用
6.自定义组件的使用
7.基础api的用法
8.条件编译
9.页面布局