uniapp学习day4

一.常用组件

navigator:页面跳转

<template>
	<view>
		<navigator url="/pages/demo1/demo1"><button>跳转到demo1</button></navigator>
		<navigator url="/pages/demo2/demo2">跳转到demo2</navigator>
	</view>
</template>

<script setup>
	
</script>

<style lang="scss" >
	
</style>

点击就可以跳转到demo1,demo2页面

常用的表单组件：

button:

<template>
	<view>
		
		<button type="primary" plain>按钮</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>

input: 输入框

<template>
	<view>
		<input type="text" placeholder="请输入搜索内容"  maxlength="10"/>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>

二.Vue3语法

1. 插值表达式：

如果是函数的话，要加上括号

<template>
	<view>{{2+3}}</view>
	<view>{{a+5}}</view>
	<view>{{fn()}}</view>
</template>

<script setup>
	const a=6;
	function fn(){
		return 'vue';
	}
</script>

<style>

</style>

2. 使用ref定义响应式数据变量：

这样写，在输出的时候变化了值，但是模板中的值都没有改变

<template>
	<view>{{a}}</view>
</template>

<script setup>
	let a=6;
		
	setInterval(()=>{
		a++;
		console.log(a);
	},1000)
</script>

<style>

</style>

如果要变成响应式的话就得引入一个属性ref

使用的时候必须记得加上.value

这样页面上的数字就可以动了，数字也可以换成对象、数组

<template>
	<view>{{b}}</view>
</template>

<script setup>
	import {ref} from 'vue'
	let b=ref(10);
	
	setInterval(()=>{
		b.value++;
		console.log(b.value);
	},1000)
</script>

<style>

</style>

3. 绑定

v-bind: 实现图片的响应式切换

<template>
	<view>
		<image :src="picurl"></image>
	</view>
</template>

<script setup>
	import {ref} from 'vue';
	const picurl=ref("../../static/logo.png")
	const arr=ref([
	"../../static/pic1.png",
	"../../static/pic2.png",
	"../../static/pic3.png"
	])
	let i=0;
	setInterval(()=>{
		
		    i++;
			picurl.value=arr.value[i%3];
		
		
	},1000)
</script>

<style lang="scss">

</style>

4. class类和style内联样式的绑定

<template>
	<view>
		<view class="box " :class="{active:isActive}"></view>
	</view>
</template>

<script setup>
	import {ref} from 'vue';
	const isActive=ref(true)
</script>

<style lang="scss">
.box {
	width: 200px;
	height: 200px;
	background-color: orange;
}
.active {
	background-color: pink;
}
</style>

动态地绑定css样式：

:class="{active:isActive}

<template>
	<view>
		<view class="box " :class="{active:isActive}"></view>
	</view>
</template>

<script setup>
	import {ref} from 'vue';
	let isActive=ref(true)
		
	setInterval(()=>{
		isActive.value=!isActive.value
	},1000)
</script>

<style lang="scss">
.box {
	width: 200px;
	height: 200px;
	background-color: orange;
}
.active {
	background-color: pink;
}
</style>

内联样式：

<template>
	<view>
		<view class="box" :style="{width:'300px',height:260+'px',fontSize:size+'px'}">内联样式</view>
	</view>
</template>

<script setup>
	import {ref} from 'vue';
	const size=ref(30);
	setInterval(()=>{
		size.value++;
	})
</script>

<style lang="scss">
.box {
	background-color: pink;
}
</style>

这样字体就会自动变大

5.事件监听以及事件处理

实现点击，数字增加、颜色随机变化

<template>
	<view>
     <view class="box" @click="onClick()" :style="{background:color}">{{num}}</view>	
	
	</view>
</template>

<script setup>
	import {ref} from 'vue';
	const num=ref(1);
	const color=ref("#fc359a");
	function onClick(){
		num.value++;
		console.log(String(Math.random()).substring(3,9));
		color.value='#'+String(Math.random()).substring(3,9);
	}
</script>

<style lang="scss">
.box {
	width: 200px;
	height: 200px;
	background-color: pink;
}
</style>

switch组件的@change事件：

<template>
	<view>	
	</view>
	<switch class="switchbutton"  @change="onChange"></switch>
	<button type="primary" :loading="isLoading">普通按钮</button>
</template>

<script setup>
	import {ref} from 'vue';
	const num=ref(1);
	const isLoading=ref(false);
	
	
		
	function onChange(e){
		isLoading.value=e.detail.value
	}
</script>

<style lang="scss">
.switchbutton {
	margin: 100px;
}
</style>

6.v-if、v-show

v-if:

<template>
	<view>
		<view v-if="shop">京东</view>
		<view v-else>淘宝</view>
		<view v-if="day===1">星期1</view>
		<view v-else-if="day===2">星期2</view>
		<view v-else-if="day===3">星期3</view>
		<view v-else-if="day===4">星期4</view>
		<view v-else-if="day===5">星期5</view>
		<view v-else-if="day===6">星期6</view>
		<view v-else="day===7">星期天</view>
	</view>
</template>

<script setup>
	import {ref} from 'vue';
	const shop =ref(true);
	const day=ref(5);
</script>

<style lang="scss">

</style>

v-show:

两者的区别：

7.v-for列表渲染

这里犯了一个错误，操作对象要换成item了！写成了数组

还要加上:key,不加的话就会警告错误

<template>
	<view>
		<view class="box" v-for="(item,index) in 10">
			box模块-{{index+1}}
		</view>
		item
		<view v-for="(item,index) in arr" :key="item.id">名字：{{item.name}} 年龄：{{item.age}}</view>
	</view>
</template>
item
<script setup>
	import {ref} from 'vue';
	const arr=ref(
	[
		{
			id:1,
			name:"小明",
			age:20
		},
		{
			id:2,
			name:"小华",
			age:21
		},
		{
			id:3,
			name:"小红",
			age:22
		}
	])
</script>

<style lang="scss" scoped>

</style>

8.购物车案例

这个要重点看！

<template>
	<view>
		<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="del" @click="remove(index)">删除</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	const goods=ref([
		{id:1,name:"小米"},
		{id:2,name:"华为"},
		{id:3,name:"oppo"},
		{id:4,name:"苹果"},
	])
	
	function remove(index){
		goods.value.splice(index,1)
	}
</script>

<style lang="scss" scoped>
.out {
	margin:10px 0;
	.item {
		padding: 10px 0;
		.del {
			padding-left:30px;
			color: red;
		}
	}
}
</style>

实现页面：

如果这里:key没有的话（或者使用index)，就会导致删除某一个之后，勾选的框的位置仍然不变，即使元素的位置已经改变了

9.小鸡案例（获取焦点，失去焦点）

<template>
	<view>
		<view class="out">
			<input type="text" :value="inputValue" @focus="onFocus" @blur="onBlur"/>
			<image src="/static/chicken.gif" class="pic" :class="isActive? 'active': ''"></image>
		</view>
	</view>
</template>

<script setup>
	import {ref} from 'vue';
	const inputValue=ref("123");
	const isActive=ref(false);
	
	function onFocus(e){
		isActive.value=true;
	}
	function onBlur(e){
		isActive.value=false
	}
</script>

<style lang="scss">
.out {
	position: relative;
	padding: 0 20px;
	margin-top: 40px;
	input {
		height: 40px;
		border: 1px solid #aaa;
		position: relative;
		z-index: 2;
		background-color: white;
	}
	.pic {
		width: 24px;
		height: 24px;
		z-index: 1;
		position: absolute;
		top:0px;
		left:calc(50% - 12px);
		transition: top 0.3s;
	}
	.pic.active {
		top:-24px;
	}
}
</style>

点击之后：

10.v-model

现在要实现一个简单的功能：

在上面输入值的时候要在下面同时获取

使用@input的方法：（这个就是v-model的双向数据绑定的原理）

<template>
	<view>
		<view class="out">
			<input type="text" :value="inputValue" @focus="isActive=true" @blur="isActive=false" @input="event=>inputValue=event.detail.value"/>
			<image src="/static/chicken.gif" class="pic" :class="isActive? 'active': ''"></image>
			<view>预览：{{inputValue}}</view>
		</view>
	</view>
</template>

<script setup>
	import {ref, toValue} from 'vue';
	const inputValue=ref("");
	const isActive=ref(false);
	// function onInput(e){
	// 	inputValue.value=e.detail.value
	// }
	
</script>

<style lang="scss">
.out {
	position: relative;
	padding: 0 20px;
	margin-top: 40px;
	input {
		height: 40px;
		border: 1px solid #aaa;
		position: relative;
		z-index: 2;
		background-color: white;
	}
	.pic {
		width: 24px;
		height: 24px;
		z-index: 1;
		position: absolute;
		top:0px;
		left:calc(50% - 12px);
		transition: top 0.3s;
	}
	.pic.active {
		top:-24px;
	}
}
</style>

真正使用v-model: 这里就可以删掉前面用的 :value和@input了

<template>
	<view>
		<view class="out">
			<input type="text" @focus="isActive=true" @blur="isActive=false"  v-model="inputValue"/>
			<image src="/static/chicken.gif" class="pic" :class="isActive? 'active': ''"></image>
			<view>预览：{{inputValue}}</view>
		</view>
	</view>
</template>

<script setup>
	import {ref, toValue} from 'vue';
	const inputValue=ref("");
	const isActive=ref(false);
	// function onInput(e){
	// 	inputValue.value=e.detail.value
	// }
	
</script>

11.computed计算属性

没有使用计算属性之前：

<template>
	<view class="out">
		<input type="text" v-model="firstName" placeholder="请输入"/>
		<input type="text" v-model="lastName" placeholder="请输入"/>
		<view>全称：{{firstName}}-{{lastName}}</view>
	</view>
</template>

<script setup>
	import {ref} from 'vue';
	const firstName=ref("");
	const lastName=ref("");
</script>

<style lang="scss">
.out {
	padding: 20px;
	input {
		border: 1px solid #aaa;
		height: 40px;
		margin: 10px;
	}
}
</style>

使用之后：

<template>
	<view class="out">
		<input type="text" v-model="firstName" placeholder="请输入"/>
		<input type="text" v-model="lastName" placeholder="请输入"/>
		<view>全称：{{fullName}}</view>
	</view>
</template>

<script setup>
	import {ref,computed} from 'vue';
	const firstName=ref("");
	const lastName=ref("");
	const fullName=computed(()=>firstName.value+lastName.value)
</script>

<style lang="scss">
.out {
	padding: 20px;
	input {
		border: 1px solid #aaa;
		height: 40px;
		margin: 10px;
	}
}
</style>

实现效果：

当然也可以写成函数，但是computed有缓存的性能，不更新的话就不会调用，可以提升性能

computed的使用方法也是和ref一样，取数据的时候要在后面加上value