uni-app学习2—数据展示，事件，组件

<template>
	<view class="content">
		<view>{{msg}}</view>
		<view>这个月工资足足${{money}}元</view>
		<view>这个月工资足足{{cnMONEY}}元</view>

		<view>{{bool}}</view>
		<view>神话中的{{person.name}}擅长{{person.skill}}</view>
		<view>++++++++++++++++++++++++++++++++++++++++</view>

		<view>我给你说说我卖的水果序号和名字
			<!-- 此刻希望id信息通过view标签显示出来信息 -->
			<view v-for="(item) in list" :key="item.id">
				{{item.id}} -- {{item.text}}
			</view>
			<!-- v-for指定需要遍历循环的函数，后面是固定格式，但其中item是变量，可用其他值代替 -->
			<!-- key值是遍历关键数，要唯一才行 -->
		</view>

		<view v-if="true">v-if</view>
		<view v-show="false">v-show</view>
		<!-- 这两个标签根据true或者false判断出现或者隐藏 -->

		<view v-for="(item,index) in list" :key="item.id" v-if="item.id>=0">
		<!-- 后面v-if的事判断id的条件，然后进行遍历输出 -->
			{{item.id}}--{{item.text}}--{{index}}
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			// 定义变量,存储准备输出
			//包括但不限于数据，数字，bool类型，还有对象
			return {
				//字符串
				title: "小青",
				msg: "河南省信阳市罗山县众合广场",
				//数字
				money: 1000,
				//bool类型
				bool: true,
				//对象
				person: {
					name: "孙悟空",
					skill: "七十二变",
				},
				list: [ //循环遍历输出
					// 此处要谨慎小心,因为list后面要使用中括号[],而不是大括号{}
					{
						id: 0,
						text: "apple"
					},
					{
						id: 1,
						text: "banana"
					},
					{
						id: 2,
						text: "orange"
					}
				]

			}
		},
		computed: {
			//把cnMONEY的数据看成和data中的数据一样，都是普通使用的数据
			cnMONEY() {
				//$1000
				return "$" + this.money;
			},

		},
		onLoad() {
			//生命周期中使用函数
			this.fileterlist()
		},
		methods: {
			fileterlist() {
				this.list.filter(v => {
					console.log('111')
					//console.log表示返值，用以表示判断
					if( v.id >= 0){
						console.log('erre',v)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.rpx {
		/*小程序的单位：750rpx=屏幕的宽度*/
		width: 750rpx;
		height: 100rpx;
		background-color: #ff0000;

	}

	.vw {
		/*vw h5单位100vw =屏幕高度 100vh=屏幕宽度 */
		width: 100vw;
		height: 10vh;
		background-color: #ffaa00;
	}

	.content {
		.sass {
			width: 750rpx;
			height: 100rpx;
			background-color: #ffff00;
			color: $uni-color-primary;
			//字体颜色，可以在uni.scss中寻找，挑选自己喜欢的就行
		}
	}



	/* .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 {
		width: 750rpx;
		height: 100rpx;
		font-size: 50rpx;
		color: #00ff00;
	}
</style>

标签事件

<template>
	<view class="content">
		
		<!-- 给view标签绑定事件，此处是给标签view绑定打印事件handleClick，中间人是click -->
		<view data-index="难受得要死" @click="handleClick(1,$event)"> 点击我试试1</view>
		<view data-index="开心的起飞" @click="handleClick(2,$event)"> 点击我试试2</view>
			<!-- 此处讲一些心得，此处的自定义信息，
			无非就是将一些自己想输出的信息放到自己跌这个绑定事件里面，
			然后在通过.连接将事件内的自己输入的数值或者信息导出，
			最核心的是如何找到自己想要导出的信息的位置和如何导入标签内信息 。
		    此处后面的$event是代指输出的函数的内容 -->
	</view>
</template>
<!-- 在定义监听函数中，需要在methods中定义 -->
<script>
	export default{
		// onLoad(){
		// 	this.handleClick()
		// 	//函数调用或者用一体使用，目前看来，onload可用可不用
		// },
		methods:{
			handleClick(index,event){
				console.log(index);		//输出的是事件中的值
				console.log(event);		//输出的是事件后面所蕴含的数值
				console.log(event.currentTarget.dataset.index)
//这里的log后面的函数要去微信小程序模拟器里查找，在调试器的console中可以看到，在内容里面查找到自己要输出的内容，然后用.连接起来
			}
		}
	}
	
</script>
	
<style >
	
</style>

组件

<template>
	<view class="content">

		<!-- 4.输出图片组件 -->
		<!-- <imgborder :src="src1"></imgborder>
	<imgborder :src="src2"></imgborder> -->
		<!-- 此处要注意，这里不是固定函数imgborder而而是自己定义的函数值，即自己注册的名字来作为指令在上面输出-->
		<view>子组件传递过来的路径{{src}}</view>
		<img-border @srcchange="handlesrcchange" :src="src1"></img-border>
		<img-border @srcchange="handlesrcchange" :src="src2"></img-border>

	</view>
</template>

<script>
	//2.引入自定义组件
	import imgBorder from "@/components/img-border.vue";
	export default {
		data() {
			return {
				src:"",
				//此处的图片地址要是最后的那个网址，保证点开之后直接就是一张图片，所以在放进连接之后最好自己打开看看
				src1: 'https://bpic.588ku.com/ad_diversion/22/01/25/bcc7b8f8e397016ff2f3557c388db3d9.png',
				src2: 'https://p1.ssl.qhimgs1.com/sdr/400__/t01f75c69e081245051.jpg' 
			}
		},
		//3.注册组件
		components: {
			imgBorder
		},
		methods:{
			handlesrcchange(e){
				// console.log("自定义的事件被触发了")
				console.log(e);
			}
		}
	}
</script>

<style lang="scss">

</style>
<!-- 文正标题：组件的使用 -->





组件注册信息文件，需要自己创建
<template>

			<!--把props中的src看成是data中的变量一样来使用-->
			<!-- 1.设置图片组件的使用路径-->		
			<image @click="handClick" class="img-border" :src="src"></image>
			<!-- 此处不仅可以用图片组件，链接，音频，视频，等等，都可以作为组件-->	
	
</template>

<script>
	export default {
		// name:"img-border",
		// data() {
		// 	return {
			
		// 	};
		// },
			
		props:{
			src:{
				type:String,
				default:'https://bpic.588ku.com/ad_diversion/22/01/25/bcc7b8f8e397016ff2f3557c388db3d9.png'
			}
		},
		methods:{
			handClick(){
				// console.log("为什么超人救人的时候外穿裤衩")
				//子向父传递数据通过触发事件
				//this.$emit("自定义的事件名称","要传递的参数")
				this.$emit("srcchange",this.src);

			}
		}
	}
</script>
<style>
		/* 说明im-border样式 */
		.img-border{
			border-radius: 50%;
		}

</style>