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);