vue3中调用api接口实现数据的渲染以及详情方式

目录
  • 调用api接口实现数据的渲染及详情
  • vue3常用api梳理
    • setup参数
    • 生命周期
    • 响应式数据 ref、reactive
    • coumputed
    • watch && watchEffect
    • 获取元素
    • this不可用

调用api接口实现数据的渲染及详情

首先新建一个项目

yarn create vite vue3-template --template vue

然后下载相应的api

npm i axios router

首先配置

App.vue

<script setup>
</script>
<template>
  <router-view></router-view>
</template>
<style>
</style>

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

<template>
  <div>
      <ul>
          <li v-for="topic in topics" :key="topic.id" @click="go(topic.id)">
           {{topic.title}}
          </li>
      </ul>
  </div>
</template>
<script setup>
// import { onMounted,ref} from 'vue';
// import { getTopics } from '../api/topics'
// import { useRouter } from 'vue-router'
// /**
//  * 数据渲染功能
//  */
// //声明 数据
// const topics = ref([])
// //请求数据
// onMounted(async () => {
//     const res =await getTopics()
//     topics.value = res.data.data
// })
//数据渲染
import useTopics from '../componsables/useTopics'
const { topics } = useTopics();
//跳转
// const router = useRouter()
// const go = (id) =>{
//     router.push("/detail?id=" + id)
// }
//跳转
import useTopic from '../componsables/useTopic'
const { go } = useTopic();
</script>
<style>
</style>

在 src 下 新建 /views/Detail.vue

<template>
   <div>
     {{topic.title}}
     
     <!-- ?表示如果后续的属性不存在了 就不获取了 -->
     {{topic.author?.loginname}}
     {{topic.create_at}}
   </div>
</template>
<script setup>
 import { ref, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
 import { getTopic } from '../api/topics';
 
 let topic = ref({})
 const route = useRoute()
 //获取id
 const { id } = route.query
 //拿着id进行数据的请求
 onMounted( async () => {
     const res = await getTopic(id)
     topic.value = res.data.data
 })
</script>
<style>
</style>

在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 时,它将被更新。

示例如下:

//父组件
<template>
  <div>
    <com :num="num"></com>
    <button @click="add">++</button>
  </div>
</template>
<script>
import { ref } from 'vue';
import com from './components/com.vue';
export default {
  name: 'App',
  components: { com },
  setup() {
    const num = ref(1);
    const add = () => {
      num.value++
    }
    return {
      num,
      add
    }
  }
}
</script>
//子组件
<template>
  <div class="hello">
    {{num}}
  </div>
</template>
<script>
export default {
  props: {
    num: Number
  }
}
</script>

当点击按钮执行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

示例如下:

<template>
  <div>
  </div>
</template>
<script>
import { onMounted } from 'vue';
export default {
  name: 'App',
  setup() {
    onMounted(() => {
      console.log('mounted')
    })
  }
}
</script>

响应式数据 ref、reactive

  • ref:将一个原始数据类型(String、Number、BigInt、Boolean、Symbol、Null、Undefined)转换成一个带有响应式特性的数据类型。
  • reactive:将一个对象(Object) 转换成带有响应式的特性。

示例如下:

<template>
  <div>
    <div>{{age}}</div>
    <div>{{data.height}} {{data.weight}}</div>
    <button @click="change">修改</button>
  </div>
</template>
<script>
import { reactive, ref } from 'vue';
export default {
  name: 'App',
  setup() {
    const age = ref(18);
    const data = reactive({
      sex: 1,
      height: 178,
      weight: 110
    })
    const change = () => {
      age.value = 20;
      data.height = 180;
      data.weight = 1111;
    }
    return {
      age,
      data,
      change
    }
  }
}
</script>

可能会觉得data.xxx 的写法太麻烦,那么我们可以使用torefs来解构。

torefs:可以将一个响应型对象(reactive) 转化为普通对象(obj),同时又把该对象中的每一个属性转化成对应的响应式属性(ref)。

示例如下,效果同上:

<template>
  <div>
    <div>{{age}}</div>
    <div>{{height}} {{weight}}</div>
    <button @click="change">修改</button>
  </div>
</template>
<script>
import { reactive, ref, toRefs } from 'vue';
export default {
  name: 'App',
  setup() {
    const age = ref(18);
    const data = reactive({
      sex: 1,
      height: 178,
      weight: 110
    })
    const change = () => {
      age.value = 20;
      data.height = 180;
      data.weight = 1111;
    }
    return {
      age,
      ...toRefs(data),
      change
    }
  }
}
</script>

在实际的开发过程中,给对象整体重新赋值的情况也屡见不鲜,倘若直接重新是不可以的,可以自行尝试,下面的一种比较推荐的写法,效果同上:

<template>
  <div>
    <div>{{content.height}} {{content.weight}}</div>
    <button @click="change">修改</button>
  </div>
</template>
<script>
import { reactive, toRefs } from 'vue';
export default {
  name: 'App',
  setup() {
    const data = reactive({
      content:{
        sex: 1,
        height: 178,
        weight: 110
      }
    })
    const change = () => {
      data.content ={
        sex: 2,
        height: 180,
        weight: 120
      }
    }
    return {
      ...toRefs(data),
      change
    }
  }
}
</script>

coumputed

<template>
  <div>
    <div>{{age}} {{age2}}</div>
    <button @click="add">++</button>
  </div>
</template>
<script>
import { ref, computed } from 'vue';
export default {
  name: 'App',
  setup() {
    const age = ref(18);
    const age2 = computed(() => {
      return age.value * 2
    })
    const add = () => {
      age.value++
    }
    return {
      age,
      age2,
      add
    }
  }
}
</script>

watch && watchEffect

watchEffect 它与 watch 的区别主要有以下几点:

  • watchEffect不需要手动传入依赖
  • watchEffect每次初始化时会执行一次回调函数来自动获取依赖
  • watchEffect无法获取到原值,只能得到变化后的值

watch示例:

<template>
  <div>
    <div>{{age}} {{age2}}</div>
    <div>{{data.height}} {{data2.height}}</div>
    <button @click="add">++</button>
  </div>
</template>
<script>
import { ref, reactive, watch } from 'vue';
export default {
  name: 'App',
  setup() {
    const age = ref(18);
    const age2 = ref(0);
    const data = reactive({
      height: 178
    })
    const data2 = reactive({
      height: 0
    })

    /* eslint-disable */
    watch([age, ()=> data.height], ([newAge, newHeight], [oldAge, oldHeight]) =>{
      age2.value = oldAge;
      data2.height = oldHeight;
    })
    /* eslint-disable */
    const add = () => {
      age.value++,
      data.height++
    }
    return {
      age,
      age2,
      data,
      data2,
      add
    }
  }
}
</script>

watchEffect示例:

<template>
  <div>
    <div>{{age}} {{age2}}</div>
    <div>{{data.height}} {{data2.height}}</div>
    <button @click="add">++</button>
  </div>
</template>
<script>
import { ref, reactive, watchEffect } from 'vue';
export default {
  name: 'App',
  setup() {
    const age = ref(18);
    const age2 = ref(0);
    const data = reactive({
      height: 178
    })
    const data2 = reactive({
      height: 0
    })
    watchEffect(() => {
      age2.value = age.value;
      data2.height = data.height;
    })
    const add = () => {
      age.value++,
      data.height++
    }
    return {
      age,
      age2,
      data,
      data2,
      add
    }
  }
}
</script>

获取元素

获取单个元素使用ref(null),获取v-for中的ref数组需要绑定函数。

示例如下:

<template>
  <div>
    <div ref="name"></div>
    <div v-for="(val,index) in arr" :key="index" :ref="setItemRef"></div>
  </div>
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
  name: 'App',
  setup() {
    const name = ref(null);
    const arr = new Array(10);
    const itemRefs = []
    const setItemRef = el => {
      if (el) {
        itemRefs.push(el)
      }
    }
    onMounted(() => {
      name.value.innerHTML = '风舞红枫';
      itemRefs.forEach((item, index) => {
        item.innerHTML = index;
      })
    })
    return {
      name,
      arr,
      setItemRef
    }
  }
}
</script>

this不可用

在 setup() 内部,this 不是该活跃实例的引用,因为 setup() 是在解析其它组件选项之前被调用的,所以 setup() 内部的 this 的行为与其它选项中的 this 完全不同。

可以使用下方语句代替

const {proxy} = getCurrentInstance()

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 使用Vue调取接口,并渲染数据的示例代码

    刚接触vue.js框架的时候,很伤脑筋.今天整理一下post/get两种方式,简单的调取数据库数据,并进行渲染,希望帮助大家! 首先,在HTML页面引入: //引入vue.js文件 <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> 引入vue-resource.min.js文件,就可以引入接口方法了 <script src="https://cdn.st

  • vue异步请求数据重新渲染方式

    目录 vue异步请求数据重新渲染 下面介绍一种方法解决 自定义组件异步获取数据重新渲染 视图层 逻辑层 vue异步请求数据重新渲染 vue异步请求数据时往往不能及时更新, 下面介绍一种方法解决 export default {         name: "pic",         created() {            this.getList();         },         data(){             return{num:[]}         }

  • vue从后台渲染文章列表以及根据id跳转文章详情详解

    前言: vue里面怎样从后台渲染列表,怎么根据文章的id获取文章的具体内容.以及值与值之间的传递,vue-router 里query和params的区别及使用. 一.query和params 先来看看query和params是怎样传值和接收参数的吧!后面会用到的哦! (1)query方式传参和接收参数 query相当于get请求,页面跳转的时候,可以在地址栏看到请求参数 传递参数:把数据发送出去 this.$router.push({ path:'/aaa/bbb/ccc', query:{ i

  • vue watch自动检测数据变化实时渲染的方法

    本文介绍了vue watch自动检测数据变化实时渲染的方法,分享给大家,具体如下: 首先确认 watch是一个对象,一定要当成对象来用. 对象就有键,有值. 键:就是你要监控的那个家伙,比如说$route,这个就是要监控路由的变化.或者是data中的某个变量. 值可以是函数:就是当你监控的家伙变化时,需要执行的函数,这个函数有两个形参,第一个是当前值,第二个是变化后的值. 值也可以是函数名:不过这个函数名要用单引号来包裹. 第三种情况厉害了. 值是包括选项的对象:选项包括有三个. 第一个hand

  • vue3中调用api接口实现数据的渲染以及详情方式

    目录 调用api接口实现数据的渲染及详情 vue3常用api梳理 setup参数 生命周期 响应式数据 ref.reactive coumputed watch && watchEffect 获取元素 this不可用 调用api接口实现数据的渲染及详情 首先新建一个项目 yarn create vite vue3-template --template vue 然后下载相应的api npm i axios router 首先配置 App.vue <script setup> &

  • python 调用API接口 获取和解析 Json数据

    任务背景: 调用API接口数据,抽取我们所需类型的数据,并写入指定mysql数据库. 先从宏观上看这个任务,并对任务进行分解: step1:需要学习python下的通过url读取数据的方式: step2:数据解析,也是核心部分,数据格式从python角度去理解,是字典?列表?还是各种嵌套? step3:连接mysql数据库,将数据写入. 从功能上看,该数据获取程序可以分为3个方法,即step1对应方法request_data(),step2对应方法parse_data(),step3对应data

  • PHP调用API接口实现天气查询功能的示例

    天气预报查询接口API,在这里我使用的是国家气象局天气预报接口 使用较多的还有:新浪天气预报接口.百度天气预报接口.google天气接口.Yahoo天气接口等等. 1.查询方式 根据地名查询各城市天气情况 2.请求URL地址 http://route.showapi.com/9-2 3.接口参数说明: 一.系统级参数(所有接入点都需要的参数): 二.应用级参数(每个接入点有自己的参数): 4.返回参数 以JSON格式返回结果 1)系统级参数(所有接入点都会返回的参数) 2)应用级参数(系统级输出

  • python调用API接口实现登陆短信验证

    API说明 调用地址:http://yzxyzm.market.alicloudapi.com/yzx/verifySms 请求方式:POST 返回类型:JSON 请求参数(Query) 名称 类型 是否必选 描述 phone STRING 必选 需要发送的手机号码 templateId STRING 必选 模板id,联系客服人员申请成功的模板ID variable STRING 可选 模板中变量参数名,参数值有多个时使用","隔开,例如"num:1234,money:888

  • 前端如何调用后端接口进行数据交互详解(axios和SpringBoot)

    目录 一.介绍 二.项目结构 三.代码编写 四.运用 总结 前端调用后端接口,获得数据并渲染 一.介绍 一个完善的系统,前后端交互是必不可少的,这个过程可以分成下面几步: 前端向后端发起请求后端接口接收前端的参数后,开始层层调用方法处理数据后端将最终数据返回给前端接口前端请求成功后,将数据渲染至界面 对于初学者而言,前后端交互感觉十分困难,其实并不难,现在,我们做一个小例子,在例子中,大家就明白了. 二.项目结构 前端技术:axios 后端技术:SpringBoot(这个也无所谓,但是你一定要有

  • 教你在Excel中调用Python脚本实现数据自动化处理的方法

    目录 一.为什么将Python与Excel VBA集成? 二.为什么使用xlwings? 三.玩转xlwings 这次我们会介绍如何使用xlwings将Python和Excel两大数据工具进行集成,更便捷地处理日常工作. 说起Excel,那绝对是数据处理领域王者般的存在,尽管已经诞生三十多年了,现在全球仍有7.5亿忠实用户,而作为网红语言的Python,也仅仅只有700万的开发人员. Excel是全世界最流行的编程语言.对,你没看错,自从微软引入了LAMBDA定义函数后,Excel已经可以实现编

  • TS 项目中高效处理接口返回数据方法详解

    目录 写在前面 问题 解答 区别 总结 必备高效神器 写在前面 在 TypeScript 项目中,TypeScript 对接口返回数据的处理,是日常项目开发中一个比较棘手的问题. 那我们该如何 高效 的解决这个问题呢? 问题 项目中使用 ts 都会碰到如下场景:从接口请求过来的数据该如何进行处理? const fetchInfo = async (url: string, id: string) => { return $http.get(url, params); } const res =

  • vue中Axios的封装与API接口的管理详解

    如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题,我们所要的说的axios的封装和api接口的统一管理,其实主要目的就是在帮助我们简化代码和利于后期的更新维护. 一.axios的封装 在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中.他有很多优秀的特性,例如拦截请求和响应.取消请求.转换json.客户端防御XSRF等.所以我们的尤大大也是果断放弃了对其官方库vue-reso

  • vue2.0 获取从http接口中获取数据,组件开发,路由配置方式

    vue 2.0 从接口中获取数据 <template> <div id="admins"> <h1>I am a title.</h1> <a> written by {{ author }} </a> <div v-for="admin in users"> {{admin.name}}<br>{{admin.password}} </div> </d

  • VUE使用axios调用后台API接口的方法

    引言 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,方便与第三方库或既有项目整合.我们都知道VUE更多是注重前段用户界面的渲染合操作,但是如果想到实现前后端之间的交互调用后台API,就需要借助其他组件,如今天要讲到的Axios,下边就重点讲解axios在vue中的使用. Axios,基于 Promise 的 HTTP 客户端,可以工作于浏览器中,

随机推荐