码迷,mamicode.com
首页 > Web开发 > 详细

nuxt.js1-8

时间:2018-05-22 22:14:57      阅读:258      评论:0      收藏:0      [点我收藏+]

标签:inf   年龄   数据   姓名   The   div   com   name   from   

asyncData方法获取数据

  在项目中需要在初始化页面前先得到数据,也就是我们常说的异步请求数据。Nuxt.js贴心的为我们扩展了Vue.js的方法,增加了anyncData。从名字上就很好理解,这是一个一部的方法。

 创建远程数据

  在这里制作一些假的远程数据,我选择的网站是myjson.com,它是一个json的简单仓库,学习使用是非常适合的。
  我们打开网站,在对话空中输入JSON代码,这个代码可以自己随意输入哦。

  输入后,网站会给你一个地址,这就是你这个JSON仓库的地址了。

https://api.myjson.com/bins/8gdmr

 安装Axios

  Vue.js官方推荐使用的远程数据获取方式就Axios,所以我们安装官方推荐,来使用Axios。这里我们使用npm 来安装 axios。
  直接在终端中输入下面的命令:

npm install axios --save

 ansycData的promise方法

  我们在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>

  这时候我们可以看到,浏览器中已经能输出结果了。

 ansycData的await方法

  当然上面的方法稍显过时,现在都在用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>

 

nuxt.js1-8

标签:inf   年龄   数据   姓名   The   div   com   name   from   

原文地址:https://www.cnblogs.com/xiaofandegeng/p/9073991.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!