目录

vue 中 axios 的安装及使用

vue 中 axios 的安装及使用

  • [1. axios 安装](#1. axios 安装)
  • [2. axios使用](#2. axios使用)

1. axios 安装

首先,打开当前的项目终端,输入

shell 复制代码
npm install axios --save-dev

验证是否安装成功,检查项目根目录下的 package.json,其中的 devDependencies 里面会多出一个axios及其版本号。

2. axios使用

html 复制代码
<template>
  <div class="main">
    <div class="box">
      <ul>
        <li v-for="item in list" :key="item.id" class="news">
          <div class="left">
            <div class="title">{{ item.title }}</div>
            <div class="info">
              <span>{{ item.source }}</span>
              <span>{{ item.time }}</span>
            </div>
          </div>

          <div class="right">
            <img :src="item.img" alt="">
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>

import axios  from 'axios'

// 接口地址:http://hmajax.itheima.net/api/news
// 请求方式:get
export default {
  data () {
    return {
      list: []
    }
  },
  async created () {
    // 1. 发送请求获取数据
    const res = await axios.get('http://hmajax.itheima.net/api/news')
    // 2. 更新到 list 中
    this.list = res.data.data
  }
}
</script>

<style>
</style>
本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
杯莫停丶40 分钟前
Web Worker在uniapp鸿蒙APP中的深度应用
前端·uni-app
小小小小宇42 分钟前
重新探讨React Diff算法
前端
excel1 小时前
webpack 模块图 第 五 节
前端
好_快1 小时前
Lodash源码阅读-baseIndexOfWith
前端·javascript·源码阅读
好_快1 小时前
Lodash源码阅读-basePullAll
前端·javascript·源码阅读
excel1 小时前
webpack 模块图 第 四 节
前端
好_快1 小时前
Lodash源码阅读-baseUnary
前端·javascript·源码阅读
好_快1 小时前
Lodash源码阅读-pullAll
前端·javascript·源码阅读
洛小豆1 小时前
Vue Router 中的 Hash 模式与 History 模式
前端·javascript·vue.js
珹洺2 小时前
JSP技术入门指南【一】利用IDEA从零开始搭建你的第一个JSP系统
java·开发语言·前端·html·intellij-idea·jsp