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)

  • 11
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值