标签:inf 年龄 数据 姓名 The div com name from
在项目中需要在初始化页面前先得到数据,也就是我们常说的异步请求数据。Nuxt.js贴心的为我们扩展了Vue.js的方法,增加了anyncData。从名字上就很好理解,这是一个一部的方法。
在这里制作一些假的远程数据,我选择的网站是myjson.com,它是一个json的简单仓库,学习使用是非常适合的。
我们打开网站,在对话空中输入JSON代码,这个代码可以自己随意输入哦。
输入后,网站会给你一个地址,这就是你这个JSON仓库的地址了。
https://api.myjson.com/bins/8gdmr
Vue.js官方推荐使用的远程数据获取方式就Axios,所以我们安装官方推荐,来使用Axios。这里我们使用npm 来安装 axios。
直接在终端中输入下面的命令:
npm install axios --save
我们在pages下面新建一个文件,叫做ansyData.vue。
然后写入下面的代码:
<template> <div> <h1>姓名:{{info.name}}</h1> <h2>年龄:{{info.age}}</h2> <h2>兴趣:{{info.interest}}</h2> </div> </template> <script> import axios from ‘axios‘ export default { data(){ return { name:‘hello World‘, } }, asyncData(){ return axios.get(‘https://api.myjson.com/bins/8gdmr‘) .then((res)=>{ console.log(res) return {info:res.data} }) } } </script>
这时候我们可以看到,浏览器中已经能输出结果了。
当然上面的方法稍显过时,现在都在用ansyc…await来解决异步,改写上面的代码。
<template> <div> <h1>姓名:{{info.name}}</h1> <h2>年龄:{{info.age}}</h2> <h2>兴趣:{{info.interest}}</h2> </div> </template> <script> import axios from ‘axios‘ export default { data(){ return { name:‘hello World‘, } }, async asyncData(){ let {data}=await axios.get(‘https://api.myjson.com/bins/8gdmr‘) return {info: data} } } </script>
标签:inf 年龄 数据 姓名 The div com name from
原文地址:https://www.cnblogs.com/xiaofandegeng/p/9073991.html