W250511/14.uniapp小程序/project1/pages/index/index.vue

<template>
	<view class="content">
		<Header></Header>
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}我的</text>
		</view>
		<img src="/static/1.jpg" alt="" />
		<image :src="pic1" mode=""></image>
		<image src="https://ww2.sinaimg.cn/mw690/007ut4Uhly1hx4v375r00j30u017cdla.jpg" mode=""></image>
		<view v-for="(item,index) in list" :key="index">
			我叫{{item.name}}
		</view>
		<button @click="changeName">修改</button>
		<!-- 
			1.v-if与v-for谁的优先级高
			2.key的作用
			3.响应式原理：Object.defineProperty()进行渲染（劫持数据）结合 发布订阅实现
				getter=>get() 获取数据
				setter=>set() 修改数据
			4.虚拟DOM
			5.diff算法
		 -->
	</view>
</template>

<script>
	import Header from '../../components/header'
	export default {
		data() {
			return {
				title: 'Hello',
				pic1:'https://ww2.sinaimg.cn/mw690/007ut4Uhly1hx4v375r00j30u017cdla.jpg',
				list:[
					{
						id:1,
						name:'小明'
					},
					{
						id:2,
						name:'Lucy'
					},
					{
						id:3,
						name:'小红'
					},
					{
						id:4,
						name:''
					},
					{
						id:5,
						name:'小蓝'
					},
				]
			}
		},
		onLoad() {
			console.log("页面onLoad")
		},
		onShow() {
			console.log("页面onShow")
		},
		onHide() {
			console.log("页面onHide")
		},
		onReady() {
			console.log("页面onReady")
		},
		onResize() {
			console.log("页面onResize")
		},
		created() {
			console.log('创建')
		},
		mounted() {
			console.log('挂载')
		},
		updated() {
			console.log('更新')
		},
		destroyed() {
			console.log('销毁')
		},
		onPullDownRefresh() {
				console.log("下拉")
		},
		onReachBottom() {
			console.log("上拉")
		},
		components:{
			Header
		},
		methods: {
			changeName() {
				console.log("触发",this.title)
				this.title = '哈哈';
				console.log("触发1",this.title);
				// this
				// 原生小程序 this.setData
				
				
			}

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>