您现在的位置是：网站首页> 编程资料编程资料
vue3中调用api接口实现数据的渲染以及详情方式_vue.js_
2023-05-24
352人已围观
简介 vue3中调用api接口实现数据的渲染以及详情方式_vue.js_
调用api接口实现数据的渲染及详情
首先新建一个项目
yarn create vite vue3-template --template vue
然后下载相应的api
npm i axios router
首先配置
App.vue
main.js
import { createApp } from 'vue' import App from './App.vue' import router from './router' createApp(App).use(router).mount('#app')封装axios src/utils/request.js
import axios from 'axios' const instance = axios.create({ baseURL:"https://cnodejs.org/api/v1" }) export default instance在src/api/topics.js 中请求
import axios from '../utils/request'; //请求列表的函数 export const getTopics = (params) => axios("/topics",{params}) //根据id获取详情 export const getTopic = (id,params) => axios.get(`/topic/${id}`,{params})新建hooks src/componsables/useTopics.js
import { ref,onMounted } from 'vue' import { getTopics } from '../api/topics' export default function useTopics(){ /** * 数据渲染功能 */ //声明 数据 const topics = ref([]) //请求数据 onMounted(async () => { const res =await getTopics() topics.value = res.data.data }) return { topics } }新建hooks src/componsables/useTopic.js
import { useRouter } from 'vue-router' export default function useTopics(){ //跳转 const router = useRouter() const go = (id) =>{ router.push("/detail?id=" + id) } return { go } }在 src 下 新建 /views/Index.vue
- {{topic.title}}
在 src 下 新建 /views/Detail.vue
{{topic.title}} {{topic.author?.loginname}} {{topic.create_at}}
在src 下 新建 router/index.js
import { createWebHashHistory ,createRouter} from "vue-router" import Index from '../views/Index.vue' const routes = [ { path:'/', component:Index }, { path:'/detail', component:()=> import('../views/Detail.vue') }, { path:"/store", component:()=> import('../views/Store.vue') } ] const router = createRouter({ history:createWebHashHistory(), routes }) export default router即可实现数据的渲染以及跳转功能
vue3常用api梳理
setup参数
1.props
props 是响应式的，当传入新的 props 时，它将被更新。
示例如下：
//父组件
//子组件{{num}}
当点击按钮执行add方法，子组件num会自动更新。
2.context
attrs：Attribute (非响应式对象，等同于 $attrs)slots：插槽 (非响应式对象，等同于 $slots)emit：触发事件 (方法，等同于 $emit)expose：暴露公共 property (函数)
生命周期
| 选项式 API | Hook inside setup |
|---|---|
| beforeCreate | Not needed* |
| created | Not needed* |
| beforeMount | onBeforeMount |
| mounted | onMounted |
| beforeUpdate | onBeforeUpdate |
| updated | onUpdated |
| beforeUnmount | onBeforeUnmount |
| unmounted | onUnmounted |
| errorCaptured | onErrorCaptured |
| renderTracked | onRenderTracked |
| renderTriggered | onRenderTriggered |
| activated | onActivated |
| deactivated | onDeactivated |
示例如下：
响应式数据 ref、reactive
ref：将一个原始数据类型(String、Number、BigInt、Boolean、Symbol、Null、Undefined)转换成一个带有响应式特性的数据类型。reactive：将一个对象(Object) 转换成带有响应式的特性。
示例如下：
{{age}}{{data.height}} {{data.weight}}
可能会觉得data.xxx 的写法太麻烦，那么我们可以使用torefs来解构。
torefs：可以将一个响应型对象(reactive) 转化为普通对象(obj)，同时又把该对象中的每一个属性转化成对应的响应式属性(ref)。
示例如下，效果同上：
{{age}}{{height}} {{weight}}
在实际的开发过程中，给对象整体重新赋值的情况也屡见不鲜，倘若直接重新是不可以的，可以自行尝试，下面的一种比较推荐的写法，效果同上：
{{content.height}} {{content.weight}}
coumputed
{{age}} {{age2}}
watch && watchEffect
watchEffect 它与 watch 的区别主要有以下几点：
- watchEffect不需要手动传入依赖
- watchEffect每次初始化时会执行一次回调函数来自动获取依赖
- watchEffect无法获取到原值，只能得到变化后的值
watch示例：
{{age}} {{age2}}{{data.height}} {{data2.height}}