vue,获取外面的数据，然后显示

最新推荐文章于 2023-01-18 17:03:31 发布
最新推荐文章于 2023-01-18 17:03:31 发布
阅读量555 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45404035/article/details/109024799
版权
这篇博客介绍如何在Vue应用中使用`v-cloak`指令避免闪烁问题，并通过`axios`在组件的`mounted`阶段获取并加载外部JSON数据。内容详细展示了具体的代码实现。
摘要由CSDN通过智能技术生成

  • v-clock:解决闪烁问题
    [v-cloak]{
    display: none;
    }

  • 获取外面的json数据
    mounted(){
    axios.get(’…/data.json’).then(response=>(this.info=response.data));
    }

在这里插入图片描述

json数据：

{
   
  "name":"陈崽崽",
  "url": "http://baidu.com",
  "page": "1",
  "isNonProfit":"true",
  "address": {
   
    "street": "廉江",
    "city":"湛江",
    "country": "中国"
  },
  "links"
最低0.47元/天 解锁文章
二拜糕糖
关注
专栏目录
关于Vue axios获取数据前，在模板中使用的变量在控制台会报undefined，获取后数据正常回显的问题
News777的博客
06-07 359
Vue axios获取数据前，在模板中使用的变量在控制台会报undefined，获取后数据正常回显的问题
Vue基础知识总结 7：插槽slot与vue导入导出_vue2 怎么将slot 内容导出去(1)
最新发布
2401_84434954的博客
04-29 831
这个isShow的作用域是div实例，所以它是true。
vue取数据库中的数据_Vue 数据怎么获取使用外部的数据
weixin_39905695的博客
12-18 762
快速提示：如何在JavaScript中排序对象数组使用Vue.js，可以逐步地构建围绕其中一个服务的应用程序，并在几分钟内就可以开始向用户提供内容服务。我将演示如何构建一个简单的新闻应用程序，它可以显示当天的热门新闻文章，并允许用户按照他们的兴趣类别进行过滤，从纽约时报API获取数据。您可以在这里找到本教程的完整代码。下面是最终应用的外观：要学习本教程，您将需要一些非常基本的Vue.js的知识。 ...
Vue---实例属性$options(获取data外面的数据和方法)
muzidigbig的博客
12-24 7856
一、概述 大家都知道如何在Vue创建一个实列 const vm = new Vue(options) 在这里把Vue的实例命名为vm，这是尤雨溪的习惯，我们沿用 vm对象封装了对视图的所有操作，包括数据读写、事件绑定、DOM更新... vm的构造函数是Vue，按照ES6的说法，vm所属的类是Vue options是 new Vue 的参数，我们一般称之为选项或者构造选项，用于当前 Vue 实例的初始化选项。 二、那么options里面有什么呢？ options的五类属性： 数据：data
vue获取外部路由的参数
搬砖还房贷的纪爱昭
06-19 405
自己先前获取外部页面路由的值，我自己一直用query取值，然后本地可以，结果到了线上就崩溃了，这个值一直无法取到，直到查找资料以后才发现原来不能用query，因此特意写了这篇文章来记录一下，方便自己以后查找！ 外部路由如图所示： 想要获取code的值，不要用query，因为this.$route.query.code获取不到值，会显示undefined，想要获取code的值，用 window.location.search.substring(1)，详细如下： var query = window.l
vue 数据获取
weixin_46146313的博客
05-16 905
数据获取 有的时候，进入某个路由以后，我们需要从服务端获取数据，比如 /item/:itemId ，通常，我们有两种方式来实现 导航完成之后获取：先完成导航，然后在接下来的组件生命周期钩子中获取数据，在数据获取期间显示加载中之类的 loading 提示 导航完成之前获取： 导航完成之前，在路由进入的守卫中获取数据，在数据获取成功以后执行导航。 这两种方式都没有任何问题（对错、好坏），自行选择 路由设置 { //详情页面的路由 ，列表页面通过 名称 即可找到详情面 path:"/item/:i
vue实现数据同步以及数据双向绑定的简单原理
老曹的博客
07-21 2550
前言 vue框架使用起来十分的方便，因为不用过多地去关注DOM的操作，大部分只需要关注视图层以及数据的变化，但是它是怎么实现数据同步以及双向绑定的呢，以下是我简单的概述，因为我也刚入门没有多久，所以写下这篇文章加深自己对vue的理解，文章若有错误，可以随时指正。 数据同步 首先看看vue是怎么实现数据同步的： 1.创建一个vue实例 2.给el属性设置一个接管范围，也就是vue实例在这个区域才有作...
Vue.js使用axios动态获取response里的data数据操作
11-19
今天开发时，使用axios返回的response中data有多个数据： 如果是获取cn里的数据的，可以用： response.data.cn 但是需求是根据选择来获取数据的，会发生变化，最开始的想法是，用一个变量来记录需要获取的key: 假设need是需要获取的某个key const dkey = this.need; response.data.dkey 这样发现获取不到数据，这是因为vue.js把dkey当成data里的某一个key了，类似于上面的”cn”。 折腾了很久才突然想起，这个data其实类似一个数组，我们可以像使用数组一样使用它，后面发现的确是可行的 const dk
Vue实现从一个页面拿数据到另一个页面
m0_74067323的博客
10-24 5461
在前端页面中，从数据生成页面输入数据，并在历史页面显示信息。 数据生成分为一键生成和指定生成，一键生成当中，所以属性均由后端随机生成，指定生成可由用户指定属性和比例来生成。 在规则详情当中，点击按钮出现弹窗，分为两种情况，一种是指定生成的结果，一种是一键生成的结果。 下图是指定输入之后点击数据生成页面的提交按钮产生的规则详情。 下图是点击数据生成页面的一键生成按钮产生的规则详情。 要想满足以上需求，首先需要将历史任务页面作为组件导入数据生成页面中，并定义该组件，然后将数据
vue如何获取另一个页面的数据
小舒克的博客
01-18 3704
vue如何获取另一个页面的数据
vue如何在websocket方法内获取data里的数据和method里的函数
我会好好努力的
10-31 9230
在实践中，会发现在websocket的onmessage方法内处理数据时，从websocket得到的数据无法在其他函数内调用，其他变量和函数也无法在websocket里使用，这是因为数据的作用域不同使得无法访问。 我们可以进行如下修改 func() { ws.send('2') ws.onmessage = function (evt) ...
Vue两种暴露方法
qq_43026206的博客
03-05 3335
1.默认暴露 export default { name:'Student', data() { return { ... } }, methods: { } } // 引入方式： import student from '上面代码所处文件路径' 2.分别暴露 export const mixIn={ } //引入方式 import {mixIn} from '上面代码所处文件路径' ...
Vue暴露的属性和方法
weixin_45717907的博客
07-22 2841
Vue暴露 一些属性和方法 Vue 选项对象中还暴露了一些有用的属性与方法。在通过实例对象使用选项对象的属性时,属性前面都需要带上前缀 $，以便与用户定义的属性区分开来。例如： <script> const data = { a: 1 } const vm = new Vue({ el: '#example', data: data }) vm.$data === data // => true vm.$el === doc
vue项目中获取外部js，并使用其中方法
weixin_34006468的博客
12-05 5043
因为项目需要，需要从外部获取js，然后在vus项目中使用其中的方法。 如果我们想引用一个库，但是又不想让webpack打包，并且又不影响我们在程序中以CMD、AMD或者window/global全局等方式进行使用，那就可以通过配置externals。这个功能主要是用在创建一个库的时候用的，但是也可以在我们项目开发中充分使用。 在webpa...
vue----使用 Axios 实现异步通信
weixin_30561177的博客
06-26 173
什么是 Axios Axios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架，她的主要作用就是实现 AJAX 异步通信，其功能特点如下： 从浏览器中创建XMLHttpRequests 从node.js创建http请求 支持Promise API 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换JSON数据 客户端支持防御X...
vue-中使用axios.js请求数据
weixin_41609327的博客
03-26 282
1，进入cmd，进入项目目录下，输入命令 npm i axios --s 2,打开项目新建个Test.vue,编写代码如下 <template> <div class="test"> <h1>{{ msg }}</h1> <div>{{info}}</div> </div> </template> <script> import axios from 'ax.
Vue filters获取data中的数据
~
09-06 1184
场景：通过filters中的方法去修改data中的数据时出现报错。 补充：filters中的this指的并非vue的实例，在vue的filters中使用this引用data中的数据是无法获取的。 那么问题来了：如何在filtres中使用data中的方法？ 方法一：可以申明全局变量，改变this方法。 1.在对应的组件中申明全局变量 2.在beforeCreated申明周期中修改this的指向，并在filters中使用。就可以获取data中申明变量 方法二：可以直接给filter传递参..
vue获取后端数据并显示
06-08
要使用Vue获取后端数据并显示，你需要执行以下步骤： 1. 在Vue组件中定义一个数据变量来存储后端返回的数据。比如，你可以在组件的data属性中定义一个空数组来存储返回的数据： ``` export default { data() { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值