Vue3实战学习1

一.Vue3基础学习
1.Hover-class：它是VIew的属性,可以改变元素的点击效果，代码如下：

<template>
	<view class="box" hover-class="boxHover">
		<view class="inner" hover-class="innerHover">内部元素</view>
	</view>
</template>

<style>
.box { width: 400rpx; height: 400rpx; background: #349e9e;}

.boxHover { background: orange; width: 600rpx;}

.inner { width: 300rpx; height: 300rpx; background: green;}
 
.innerHover {background: pink;}
</style>

演示效果图

2.scroll-view可滚动视图组件
可用scroll-x或scroll-y实现左右滚动或者上下滚动

在实现左右滚动是需要注意里面的内容是否会自动换行，此时就需要在scrollView类里面用white-space: nowrap;确保不换行，再给box2类里面用display: inline-block;将元素变成行级块元素

<template>
<scroll-view class="scrollView" scroll-x>
		<view class="box2">scorr子元素</view>
		.........
	</scroll-view>
</template>
<style>
	.scrollView {
		width: 80%;
		height: 440rpx;
		border: 1px solid red;
		white-space: nowrap;

		.box2 {
			width: 200rpx;
			height: 200rpx;
			background-color: aqua;
			display: inline-block;
			margin: 10rpx;
		}
	}
</style>

3.swiper轮播组件：swiper最常用的属性是indicator-dots(是否显示指示点) circular(是否衔接滑动) autoplay(是否自动滑动) interval(切换时间间隔)
4.v-if系列指令:基础二选一v-if + v-else这个的核心为： v-if 定义初始判断条件，v-else 匹配 “否则” 的默认情况，二者必须相邻使用

<view v-if="shop">京东</view>
		<view v-else>淘宝</view>
<script setup>
	import {
		ref
	} from "vue";
	const day = ref(3)
	const shop = ref(true)
</script>

而多条件分支判断用v-if + v-else-if + v-else
v-else-if 可串联多个分支条件，v-else 作为最终默认兜底，需按 v-if → 多个 v-else-if → v-else 的顺序排列

<view v-if="day === 1">星期一</view>
		<view v-else-if="day === 2">星期二</view>
		<view v-else-if="day === 3">星期三</view>
		<view v-else-if="day === 4">星期四</view>
		<view v-else-if="day === 5">星期五</view>
		<view v-else-if="day === 6">星期六</view>
		<view v-else-if="day === 7">星期天</view>
		<view v-else>格式错误</view>

5.v-for指令
简单语法：v-for="(item, index) in 10"
item为循环迭代变量
index为循环索引（从 0 开始）
而面对复杂的数据场景就要先用ref声明一个响应式数组，数值中包含多个内容，比如设数组为nba
语法就是v-for="item in nba"
循环中通过 {{item.属性名}} 可直接访问数组对象的属性值，实现数据与视图的绑定

<template>
	<view>
		<view class="box" v-for="(item,index) in 10">box模块-{{index+1}}</view>

		<view v-for="item in nba">
			球星:{{item.name}}--球衣：{{item.num}}
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const nba = ref([{
			name: "乔丹",
			num: 23
		},
		{
			name: "詹姆斯",
			num: 24
		},
		{
			name: "科比",
			num: 7
		},
	])
</script>

<style>

</style>

6.列表渲染进阶v-for+交互：
设数组goods
语法为v-for="(item, index) in goods" :key="item.id"
需要注意的是key 需使用唯一值优先用数据自身的 id，而非 index。
然后用 ref 声明响应式数组 goods，数组内每个元素为商品对象，包含 id（唯一标识）、name（商品名）、price（价格）三个核心属性。
再定义一个删除方法，如果要精准追踪，就要用数组的索引值index，再使用 splice(index, 1)删除方法
给删除的文本加一个点击事件@click="remove(index)"

<template>
	<view class="out">
		<view class="item" v-for="(item,index) in goods" :key="item.id">
			<checkbox></checkbox>
			<text class="title">{{item.name}}</text>
			<text class="price">{{item.price}}元</text>
			<text class="del" @click="remove(index)">删除</text>
		</view>
		
		<view class="card">
			<view class="text"></view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const goods = ref([{
			id: 11,
			name: "小米",
			price: 4399
		},
		{
			id: 22,
			name: "华为",
			price: 5399
		},
		{
			id: 33,
			name: "oppo",
			price: 6399
		},
		{
			id: 44,
			name: "苹果",
			price: 9399
		},
	])

	function remove(index) {
		goods.value.splice(index, 1)
	}
</script>

<style>
	.out {
		padding: 20rpx;

		.item {
			padding: 20rpx 0;

			.price {
				margin-left: 60rpx;
			}

			.del {
				margin-left: 60rpx;
				color: red;
			}
		}
		.card{
			
		}
	}
</style>

7.表单交互和动态样式绑定：
学习这个我做了个案例

• 主要采用了输入框的@focus（聚焦）、@blur（失焦）
• 用 ref 声明n个响应式变量
• :class="条件? '激活类': '默认类'" 是 Vue 中动态控制样式的常用语法
• 而在CSS 定位与层级控制中
• 为了确保输入框不被图片遮挡，在css中输入框（z-index: 2）层级高于图片（z-index: 1）例如：input { z-index: 2; } . pic { z-index: 1; }

<template>
	<view class="out">
		<input type="text" :value="itpValue" @focus="OnFocus" @blur="OnBlur" />
		<image src="/static/1764317800679.png" class="pic" :class="isActive?'active': ''"></image>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const itpValue = ref("");
	const isActive = ref(false);

	function OnFocus(e) {
		isActive.value = true;
	}

	function OnBlur(e) {
		isActive.value = false;
	}
</script>

<style>
	.out {
		padding: 0 40rpx;
		margin-top: 300rpx;
		position: relative;

		input {
			height: 400rpx;
			border: 1px solid #ccc;
			position: relative;
			z-index: 2;
			background: #fff;
		}

		.pic {
			width: 200rpx;
			height: 600rpx;
			position: absolute;
			z-index: 1;
			top: 0rpx;
			left: calc(50% - 110rpx);
			transition: top 0.3s;
		}

		.pic.active {
			top: -397rpx;
		}
	}
</style>