Vue3(+Vue2)

1、自定义组件

①组件不用注册，直接创建一个与pages目录平级的components目录

②在components中创建：组件名/组件名.vue

③组件生命周期没有 onLoad() ，取而代之的是 created()

<script>
	export default {
		data() {
			return {
				list:[]
			}
		},
		created() {
			this.getData()
		},
		methods: {
			getData() {
				uni.request({
					url:'',
				    success: (res) => {
				        // console.log(res);
						this.list=res.data.data;
						// console.log(this.list)
				    }
				});
			},
		}
	}
</script>

2、页面传参

①第一步携带参数：

<navigator class="card" v-for="(item,index) in list" :key="item.id"
    :url="`/pages/homepage/children/children/fDetail?id=${item.id}`">
    <view class="image">
        <img :src="item.dietCover" style="height: 100%;width: 100%;">
        <view class="info">
            <view class="title">
                {{ item.keyWord1 }}
            </view>
            <view class="des">
                {{ item.keyWord2 }}
            </view>
        </view>
    </view>
    <view class="text1">
        {{ item.dietName }}
    </view>
    <view class="text2">
        {{ item.dietDetail.length }}道菜谱 • {{ item.dietNum }}人参加
    </view>
</navigator>

第二步：接收参数，以下为接收业所需代码

<script>
    export default {
        data() {
            return {
                id: 0,
            }
        },
        onLoad(option) {
            this.id = option.id,
            console.log(this.id)
        },
        methods: {

        }
    }
</script>

3、Vu3 setup语法糖

1、结构实例

<script setup lang="ts">
    import { getLikeWorksAPI, getLikeQuestionsAPI } from '@/services/my/myLikes/myLikes';
	import type { likeWorks, likeQuestions, worksParams, questionsParams } from "@/services/my/myLikes/type"
	import { onLoad } from '@dcloudio/uni-app';
	import {ref} from 'vue'
	
	const worksParams=ref<worksParams>({
	  type : 1,
	  pageSize: 10,
	  pageNumber : 1,
	})
	const likeWorksList=ref<likeWorks[]>([])
	const getLikeWorks=async()=>{
		const res = await getLikeWorksAPI(worksParams.value)
		likeWorksList.value = res.data
	}
	
	
	const questionsParams=ref<questionsParams>({
	  type : 0,
	  pageSize: 10,
	  pageNumber : 1,
	})
	const likeQuestions=ref<likeQuestions>()
	const getLikeQuestions=async()=>{
		const res = await getLikeQuestionsAPI(questionsParams.value)
		likeQuestions.value = res.data
	}
	
	onLoad(()=>{
		getLikeWorks()
		getLikeQuestions()
	})
    
    
</script>

<script setup lang="ts">
    import { getMyFansAPI, getFollowedUserAPI, getFollowedShopAPI } from '@/services/my/myCare/myCare';
    import type { myFans, followedUser, followedShop } from '@/services/my/myCare/type';
    import { onLoad } from '@dcloudio/uni-app';
    import { ref } from 'vue'

    let followedUserNum = ref() 	//关注用户数
    let followedShopNum = ref() 	//关注店铺数
    let followedTopicNum = ref() 			//关注话题数
    let myFansNum = ref() 	//粉丝数


    //关注的用户表
    const followedUserList = ref < followedUser[] > ([])
    const getFollowedUser = async () => {
        const res = await getFollowedUserAPI()
        followedUserList.value = res.data
        followedUserNum.value = followedUserList.value.length
    }

    //关注的店铺表
    const followedShopList = ref < followedShop[] > ([])
    const getFollowedShop = async () => {
        const res = await getFollowedShopAPI()
        followedShopList.value = res.data
        followedShopNum.value = followedShopList.value.length
    }

    //我的粉丝表
    const myFansList = ref < myFans[] > ([])
    const getMyFans = async () => {
        const res = await getMyFansAPI()
        myFansList.value = res.data
        myFansNum.value = myFansList.value.length
    }

    onLoad(() => {
        getFollowedUser()
        getFollowedShop()
        getMyFans()
    })

    const goProfile = () => {
        uni.navigateTo({
            url: '/pages/square/children/profile/profile'
        })
    }
</script

2、标签属性需要绑定数据

1、属性内容全来自数据

<template>
    <van-tab :title="name">
    </van-tab>
</template>

<script setup lang="ts">
    import {ref} from 'vue'
    let name= ref("你好") 	
     let changeHander=():void=>{
        name.value="谢谢"
    }
</script>

2、属性内容不全来自数据（使用模板字符串）

<template>
    <van-tab :title="`你是${ name }`">
    </van-tab>
</template>

<script setup lang="ts">
    import {ref} from 'vue'
    let name= ref("你好") 	
     let changeHander=():void=>{
        name.value="谢谢"
    }
</script>

3、普通数据的渲染(使用插值表达式)

<template>
    <view>
    {{ name }}
    </view>
</template>

<script setup lang="ts">
    import {ref} from 'vue'
    let name= ref("你好") 	
     let changeHander=():void=>{
        name.value="谢谢"
    }
</script>

4、css

1、长度计算

height: calc(100vh - 94px);

5、Vue2相关

1、调用函数时 this 丢失的解决（在外声明一个_this指向this）