html使用vue axios,使用 Vue和axios

html使用vue axios,使用 Vue和axios昨天写完了博客以后,有人就在我的博客下面留言说现在不是使用了Axios了吗?我赶紧再把Axios的例程给补上,并且做一个更新。其实vue-resource并不复杂,就是不稳定。Vue官方放弃它也是对的,作者是这样子说的最近团队讨论了一下,Ajax本身跟Vue并没有什么需要特别整合的地方,使用fetchpolyfill或是axios、superagent等等都可以起到同等…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

昨天写完了博客以后,有人就在我的博客下面留言说现在不是使用了Axios了吗?我赶紧再把Axios的例程给补上,并且做一个更新。

其实vue-resource并不复杂,就是不稳定。Vue官方放弃它也是对的,作者是这样子说的

最近团队讨论了一下,Ajax 本身跟 Vue 并没有什么需要特别整合的地方,使用 fetch polyfill 或是 axios、superagent 等等都可以起到同等的效果,vue-resource 提供的价值和其维护成本相比并不划 算,所以决定在不久以后取消对 vue-resource 的官方推荐。已有的用户可以继续使用,但以后不再把 vue-resource 作为官方的 ajax 方案。

axios的确更优秀更稳定。

首先引入Vue和axios。

然后,编写Javascript:

Vue.prototype.$http=axios;

new Vue({

el: ‘#app’,

data: {

peps: ”

},

mounted() {

this.$http.get(‘Category.json’).then(response=>this.peps=response.data);

}

})

json数据是这样子的:

[

{

“ID”:”1″,

“name”: “地产”,

“Url”:”/Category/List/1″

},

{ “ID”:”2″,

“name”: “科技”,

“Url”:”/Category/List/2″},

{ “ID”:”3″,

“name”: “医药”,

“Url”:”/Category/List/3″},

{ “ID”:”4″,

“name”: “其他”,

“Url”:”/Category/List/4″}

]

我是希望以上的数据渲染到一个Select里面去,通过onchange直接将当前页面跳转到json数据的Url去,那么在html中只需要这样设置:

{
{pep.name}}

运行测试通过。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/223081.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 各种数据流图实例「建议收藏」

    转载自:https://blog.csdn.net/thisispan/article/details/75723311.某公司的营销系统2.学校的图书管理系统34.

    2022年4月13日
    39
  • axios实现跨域三种方法_react antdesign

    axios实现跨域三种方法_react antdesign1.启动springboot后端,提供接口2.在config文件夹下创建proxy.tx文件,如果存在,在dev中添加axios环境代理,例如在我的demo中添加了/asd映射到http://localhost:8889/***在生产环境代理是无法生效的,所以这里没有生产环境的配置*Theagentcannottakeeffectintheproductionenvironment*sothereisnoconfigurationoftheproduc

    2025年10月26日
    4
  • 分布式事务saga_分布式事务代码例子

    分布式事务saga_分布式事务代码例子1.分布式事务  在前面文章《分布式事务》中介绍了几种分布式事务,其中Saga介绍了相关的概念,接下来介绍Saga使用案例,案例来源《微服务架构设计模式》。2.案例需求分析2.1一个成功的订单创建流程  实现餐馆系统中的创建订单createOrder()操作。这个操作必须验证消费者是否满足下订单的相关条件、验证订单内容、完成消费者的信用卡授权,以及在数据库中创建Order。一个成功的订单创建流程:创建一个待处理订单;验证订单消费者可以下单;创建后厨工单;对消费者提供的信用卡进行授权操

    2025年11月26日
    1
  • 无需插件只使用浏览器下载b站视频

    无需插件只使用浏览器下载b站视频2017.10.07更新:由于现在bilibili更改了refer的Host并使用了防盗链,原文的方法直接下载会有403错误,在博主琢磨出新的抓包方法之前可以先使用以下的方法:在bilibili网址前加上kan,然后回车,加载出来的东西应该就很直白了。例子:地址栏中的https://www.bilibili.com/video/av11175437/加上kan以后变成https:

    2022年7月12日
    25
  • vue源码解读1

    vue源码解读1

    2021年6月5日
    86
  • QIIME 2教程. 01简介和安装 Introduction & Install(2020.11)

    QIIME 2教程. 01简介和安装 Introduction & Install(2020.11)QIIME2https://qiime2.org/简介QIIME2是微生物组分析软件QIIME(截止17.7.13被引7771次)的全新版(不是升级版),全部python3全新编写,并于明年全面接替QIIME,是代表末来的分析方法标准(大牛们制定方法标准,我们跟着用就好了)。优点更易于安装:QIIME1的安装让无数生信人竞折腰,现在官方发布了docker,下载即可运行;使用方法多样:支持命令

    2022年6月29日
    23

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号