环境

vue3.11

组件库

https://element-plus.gitee.io/#/zh-CN

开始

初始化一个项目

App.vue

<template>
<div>
<div>
已开放代理服务主机
</div>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="id"
label="ID"
width="180">
</el-table-column>
<el-table-column
prop="hosts"
label="Hosts"
width="180">
</el-table-column>
<el-table-column
prop="description"
label="描述">
</el-table-column>
</el-table>
</div>
</template> <script>
import axios from 'axios'
export default {
data() {
return {
tableData: []
}
},
created() {
// 发送请求
axios.get('http://127.0.0.1:8001/getsrciplist')
.then(res => {
// 打印请求结果
//window.console.log(res.data)
this.tableData=res.data
})
},
}
</script> <!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

main.js

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'; Vue.use(ElementUI);
Vue.config.productionTip = false new Vue({
el: '#app',
render: h => h(App)
});

vue简单的请求api并渲染到表格的更多相关文章

  1. 05-06 Flutter JSON和序列化反序列化、创建模型类转换Json数据、轮播图数据渲染:Flutter创建商品数据模型 、请求Api接口渲染热门商品 推荐商品

    Config.dart class Config{ static String domain='http://jd.itying.com/'; } FocusModel.dart class Focu ...

  2. Electron-vue实战(二)— 请求Mock数据渲染页面

    Electron-vue实战(二)— 请求Mock数据渲染页面 作者:狐狸家的鱼 本文链接 GitHub:sueRimn 一.环境搭建 1.安装Mock.js 如果仅仅用作脱离后台的模拟数据,就安装在 ...

  3. vue中Axios请求豆瓣API数据并展示到Swipe中

    vue中Axios请求豆瓣API数据并展示到Swipe中 1.首先是安装Axios: 安装方法cnpm install axios --save 等待npm安装完毕: 2.在main.js中引入axi ...

  4. vue 在发送axios请求时数据渲染问题

    这是我请求的json格式的数据 一开始在vue用普通的数据渲染,更改为vue后使用v-for 发现没办法渲染上去了. obj.data就是以上数据. 必须加上这三行给this随意赋个值,神奇的事情就会 ...

  5. Vue简单封装axios—解决post请求后端接收不到参数问题

    1.在src/下新建api文件夹,api/下新建index.js和public.js 在public.js中: import axios from 'axios'; import qs from 'q ...

  6. Vue2+VueRouter2+webpack 构建项目实战(四):接通api,渲染列表

    通过前面几篇教程,我们已经顺利搭建起来了,并且已经组建好路由了.本章节,我们需要做一个列表页面,然后利用获取 http://cnodejs.org/api 的公开API,渲染出来. 我们打开src/p ...

  7. Vue简单基础 + 实例 及 组件通信

    vue的双向绑定原理:Object.defineProperty() vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...

  8. 一篇文章带你了解网页框架——Vue简单入门

    一篇文章带你了解网页框架--Vue简单入门 这篇文章将会介绍我们前端入门级别的框架--Vue的简单使用 如果你以后想从事后端程序员,又想要稍微了解前端框架知识,那么这篇文章或许可以给你带来帮助 温馨提 ...

  9. 从零开始学 Web 之 Vue.js(四)Vue的Ajax请求和跨域

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

随机推荐

  1. UiPath鼠标操作文本的介绍和使用

    一.鼠标(mouse)操作的介绍 模拟用户使用鼠标操作的一种行为,例如单击,双击,悬浮.根据作用对象的不同我们可以分为对元素的操作.对文本的操作和对图像的操作 二.鼠标对文本的操作在UiPath中的使 ...

  2. sql-sql优化

    SQL执行流程 a. 编写过程: select dinstinct .. from .. join .. on .. where .. group by .. having .. order by . ...

  3. rhel安装程序

    Linux下软件分类     rpm软件包,包管理器 yum     deb软件包,包管理器 apt     源代码软件包            一般为".tar.gz".&quo ...

  4. Mybatis+SpringBoot 项目All elements are null

    xml文件内容如下 查出来的集合长度是有的,但是会出现All elements are null 解决方案: 注意我的xml文件全部是这样的,并且我调用的sql返回值是  resultType=&qu ...

  5. 论文阅读 GloDyNE Global Topology Preserving Dynamic Network Embedding

    11 GloDyNE Global Topology Preserving Dynamic Network Embedding link:http://arxiv.org/abs/2008.01935 ...

  6. Tapdata 与星环 KunDB 完成产品兼容互认证

      近日, Tapdata 实时数据即服务平台(Tapdata Real Time DaaS)与星环 KunDB 完成产品兼容互认证.经深圳钛铂数据有限公司和星环信息科技(上海)股份有限公司共同严格测 ...

  7. IDEA的项目结构和IDEA的HelloWord

    IDEA首次驱动 1. 选择不导入任何设置,点击 OK 2. 选择 Create New Project 3. 点击 new 按钮,配置安装的 JDK9 版本 选择 JDK9 目录,点击确定 4. 不 ...

  8. 通过jmeter压测surging

    前言 surging是异构微服务引擎,提供了模块化RPC请求通道,引擎在RPC服务治理基础之上还提供了各种协议,并且还提供了stage组件,以便针对于网关的访问, 相对于功能,可能大家更想知道能承受多 ...

  9. Hadoop集群搭建(完全分布式版本) VMWARE虚拟机

    Hadoop集群搭建(完全分布式版本) VMWARE虚拟机 一.准备工作 三台虚拟机:master.node1.node2 时间同步 ntpdate ntp.aliyun.com 调整时区 cp /u ...

  10. 【FAQ】应用内支付服务无法拉起支付页面常见原因分析和解决方法

    华为应用内支付服务(In-App Purchases)通过简便的接入流程为用户提供良好的应用内支付体验,然而在实际接入过程中,有一些开发者反馈测试时会无法正常拉起支付页面,下文将详细分析问题出现的5种 ...