W250913/14.uniapp/project/pages/home/index.vue

<template>
	<div>
		<Header></Header>
		首页
		<img :src="pic" alt="" />
		<h1>{{title}}</h1>
		<input type="text" v-model="hi" />
		<!-- <input type="text" value="20" @input="" /> -->
		<!-- <span v-model=""></span> -->
		<!-- 
			1.v-if v-for 优先级
			2.为什么data用函数
			3.vue2的响应式：
				Object.defineProperty()数据劫持 对data中的所有属性进行遍历 添加getter和setter
				发布订阅模式:
					依赖管理器:Dep
					订阅者:Watcher
			观察者(Observer)会遍历所有的data Object.defineProperty()劫持所有的属性，给每一个属性
			添加Dep
			渲染：render函数会访问所有的响应式的属性，触发的是getter，Dep收集所有的依赖，告诉Watcher，页面渲染
			修改：触发setter方法，Dep收集所有的依赖,通知订阅,告知Watcher，执行更新，页面渲染
			MVVM:Model View ViewModel
			4.v-model原理
			5.v-if v-show
		 -->
		 <van-button type="default">默认按钮</van-button>
		 <van-button type="primary">主要按钮</van-button>
		 <van-button type="info">信息按钮</van-button>
		 <van-button type="warning">警告按钮</van-button>
		 <van-button type="danger">危险按钮</van-button>
		<van-icon name="chat" dot />
		<van-icon name="chat" info="9" />
		<van-icon name="chat" info="99+" />
		<br /><br />
		<!-- 
			selectable文本是否可选
		 -->
		<text selectable>用于包裹文本内容</text>
		<br /><br />
		<text space="emsp">今 好</text>
		<br /><br />
		<text space="ensp">今 好</text>
		<br /><br />
		<text space="nbsp">今 好</text>
		<br /><br />
		 <icon type="success" size="40"/>
		 <br /><br />
		 <span class="iconfont icon-shoucang"></span>
		 
		 <van-button type="info" @click="toMy">我的</van-button>
		 <van-button type="info" @click="getMain">获取</van-button>
		 <!-- 
		 <button @click="handleOut">输出</button>
		 <input type="text"  @input="handleChange"> -->
		 
	</div>
</template>

<script>
	import Header from '../../components/header.vue';
	export default{
		data() {
			return {
				title:"Hello world",
				pic: '../../static/1.jpg',
				hi:"hi"
			}
		},
		components:{
			Header
		},
		methods:{
			handleOut(event) {
				console.log("输出")
			},
			handleChange(event) {
				console.log("输出",event)
			},
			getMain() {
				uni.getStorage({
					key:"id",
					success(res) {
						console.log(res,'获取成功')
					}
				})
				// console.log(uni.getStorage("id"))
			},
			toMy() {
				// tabbar
				// uni.switchTab({
				// 	url:"/pages/my/index"
				// })
				// 非tabbar
				// uni.navigateTo({
				// 	url:"/pages/detail/index"
				// })
				// 
				// uni.reLaunch({
				// 	url:'/pages/detail/index'
				// })
				// uni.redirectTo({
				// 	url:'/pages/detail/index'
				// })
				// uni.navigateBack()
				// 设置数据缓存
				uni.setStorage({
					key:"id",
					data: 800,
					success() {
						console.log("存储成功")
					}
				})
			}
		}
	}
</script>

<style>
</style>