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}}

运行测试通过。

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 用python画爱心-怎么用python实现画爱心

    用python画爱心-怎么用python实现画爱心Python中可以使用turtle库来画图,通过控制画笔运动来实现在画布上画图案。使用Python画爱心代码如下:#!/usr/bin/envpython#-*-coding:utf-8-*-importturtleimporttime#画心形圆弧defhart_arc():foriinrange(200):turtle.right(1)turtle.forward(2)de…

  • Android AsyncHttpClient

    Android AsyncHttpClient

  • 网页中的兼容性视图设置在哪_找不到兼容性视图设置

    网页中的兼容性视图设置在哪_找不到兼容性视图设置浏览器兼容性视图设置在浏览器右上角的设置里,设置方法如下:方法11、首先,打开电脑,找到电脑桌面上的IE浏览器,并点击打开,打开后,进入任一网页,找到页面右上方的的设置图标,如下图所示,点击。2、点击这个设置图标后,会展开下图所示的选项,请找到下方的F12开发人员工具(L),并点击进入。3、这时候,浏览器下方会出现一个设置框,找到“浏览器模式”选项,点击,然后找到下方的“兼容性视图”勾选并确认,I…

  • kafuka安装启动

    kafuka安装启动https://www.jianshu.com/p/ce203d4e2f41

  • java代码自动生成[通俗易懂]

    Java代码自动生成(优化封装版)一、前言      最近自己做了个项目,为了提升开发效率,节约不必要的开发时间,特意花时间优化了下代码自动生成工具。成果不错,效率提高了不少,空闲时间特意写下这篇文章,希望对大家有所帮助。PS文章底部是我的代码下载链接,大家可以自行下载。 二、项目背景框架       本套生成工具是基于SpringMVC+MyBatis框架,同…

  • vue集成百度UEditor富文本编辑器

    vue集成百度UEditor富文本编辑器

    2021年10月11日

发表回复

您的电子邮箱地址不会被公开。

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