精华内容
下载资源
问答
  • vue获取数据

    2019-08-22 23:29:44
    模拟假数据 拷贝相似字段数据 去目标网站上找一个所需要的数据格式,然后copy,放入json文件中,再格式化文档即可。 使用第三方mock.js来生成json数据【即用代码来生成数据】 mockjs.com 需要任何关于此...

    模拟假数据

    • 拷贝相似字段数据

      • 去目标网站上找一个所需要的数据格式,然后copy,放入json文件中,再格式化文档即可。
    • 使用第三方mock.js来生成json数据【即用代码来生成数据】

      • mockjs.com 需要任何关于此种方法生成数据的方案都可以来这个网站查询方法。

      • 安装

        • npm i mockjs
      • 使用

        • // 使用 Mock
          var Mock = require('mockjs')
          var data = Mock.mock({
              // 属性 list 的值是一个数组,其中含有 1 到 10 个元素
              'list|1-10': [{
          		//可以自己定义变量名
          		'name|+1':['a','b','c']
                  // 属性 id 是一个自增数,起始值为 1,每次增 1
                  'id|+1': 1
              }]
          })
          // 输出结果
          console.log(JSON.stringify(data, null, 4))
          
        • 将得到的data数据传入到新建的文件夹里,这里我传到了mock.js,复习一下node.js的代码

          const fs = require('fs')//引入模块
          
          //向目标文件中写入代码,如果目标文件不存在,那么就新建一个
          fs.writeFile('./mock.json', JSON.stringify(data), function(error) {
              if (error) throw error
          })
          
    • 使用easy mock这个线上网站生成数据

      • 具体使用方法可以去他的官网学习。

    请求静态数据

     static() {
    				// 注释掉的也是一种请求写法
                    // const p = axios({
                    //     url: './data/list.json'
                    // })
                    // console.log(p)
    
                    axios.get('/day03/数据交互/data/list.json').then(
                        res => {
                            console.log(res.data.data.films);
                            this.list = res.data.data.films
                        }
                    ).catch(error => console.log(error))
                }
    

    请求动态数据【通过后端接口来请求数据】

    • 动态数据请求必须要有接口,打造这个接口,我们可以有比较多的方式选择:
      • php
      • java
      • node
      • c
    1. get

      • 使用axios进行get请求的代码块

          get() {
                        axios({
                                url: 'http://127.0.0.1:8080/get.php',
                                params: { //请求的传参
                                    a: 9,
                                    b: 5
                                }
                            }).then(res => console.log(res))
                            .catch(error => console.log(error))
                    },
        
      • 使用fetch进行get请求的代码块

        get() {
                        fetch(
                                'http://127.0.0.1:8080/get.php?a=9&b=5'
                            )
                            .then(res => res.text())
                            .then(data => console.log(data))
                            .catch(error => console.log(error))
                    },
        
        
    2. post

      • 使用axios进行post请求的代码块

        post() {
                        let parmas = new URLSearchParams()
                        parmas.append('a', 1)
                        parmas.append('b', 2)
                        axios({
                                url: 'http://127.0.0.1:8080/post.php',
                                method: 'POST',
                                data: parmas
                            }).then(res => console.log(res))
                            .catch(error => console.log(error))
                    }
        
      • 使用fetch进行post请求的代码块

         post() {
                        fetch(
                                'http://127.0.0.1:8080/post.php', {
                                    method: 'POST',
                                    headers: new Headers({
                                        'Content-Type': 'application/x-www-form-urlencoded' // 指定提交方式为表单提交
                                    }),
                                    body: new URLSearchParams([
                                        ['a', 1],
                                        ['b', 2]
                                    ]).toString()
                                }).then(res => res.text())
                            .then(data => console.log(data))
                            .catch(error => console.log(error))
                    }
        

    axios 和fetch的区别

    1. axios对已经获得的数据进行了一层封装,用来防止XSRF攻击
      • axios底层自动对数据进行了一次格式化,所以就少一层。
    2. fetch并没有进行封装,拿到的就是格式化的数据。
      • 所以用fetch进行多一层的格式化,在进行一层格式化的方法有
        • res.json()
        • res.blob()格式化二进制
        • res.text()

    其他的总结信息

    1. Vue中可以统一对axios进行挂载

      Vue.prototype.$http = axios//在前边写这句代码,后面的axios都可以替换成this.$htttp
      

    关于vue的历史

    1. vue1.0
    2. vue2.0
    展开全文
  • vue 获取数据的数据对象去重方法 quChong() { let arr = [ { id: 1, name: '111' }, { id: 1, name: '111' }, { id: 2, name: '222' }, { id: 3, name: '333' } ]; console.log(ar...

    vue 获取数据的数据对象去重方法

    quChong() {
        let arr = [
         {
          id: 1,
          name: '111'
         },
         {
          id: 1,
          name: '111'
         },
         {
          id: 2,
          name: '222'
         },
         {
          id: 3,
          name: '333'
         }
        ];
        console.log(arr);
        console.log('--------------------');
        let arr1 = this.unique(arr);
        console.log(arr1);
       },
       unique(arr) {
        const res = new Map();
        return arr.filter((arr) => !res.has(arr.id) && res.set(arr.id, 1));
       },

     

    展开全文
  • Vue获取数据不渲染

    2021-02-10 21:14:39
    前端Vue通过axios获取后台数据时候,console.log能够在后台输出但是不能够在前端渲染 解决方案: 经过我的测试分析 发现 是前端的数据类型和后端的数据类型不匹配,起初我的后端返回类型是 以类形式返回 数据格式为{...

    项目场景:

    Vue + Springboot整合springdata 访问neo4j

    问题描述:

    前端Vue通过axios获取后台数据时候,console.log能够在后台输出但是不能够在前端渲染

    解决方案:

    经过我的测试分析
    发现 是前端的数据类型和后端的数据类型不匹配,起初我的后端返回类型是 以类形式返回 数据格式为{} 但是前端data数据段里的格式是[{}] 所以将后端的返回数据类型变为List [{}]就行了

    展开全文
  • Vue获取数据后不渲染

    2020-04-24 11:57:30
    Vue对数组重新赋值的时候,视图层没有随着数据的变化而更新渲染 这种时候可以往数组里面添加一个对象然后删除 let arr = [{test:'1'},{test:2}] arr = [[{test:'1'},{test:2},{test:3}] arr.push({}) app.pop() ...

    在Vue对数组重新赋值的时候,视图层没有随着数据的变化而更新渲染
    这种时候可以往数组里面添加一个对象然后删除

    let arr = [{test:'1'},{test:2}]
    
    arr = [[{test:'1'},{test:2},{test:3}]
    arr.push({})
    app.pop()
    
    展开全文
  • 主要代码是这两坨 this.nextTick(function(){ alert('数据已经更新') }); this.$nextTick(function(){ alert('v-for渲染已经完成') }) 随便丢在哪个方法里,都Okay...
  • Vue获取数据后只渲染前几条数据

    千次阅读 2020-08-04 18:25:21
    1、使用.slice(0, 4),展示四条数据 <ul> <li v-for="(item,index) in authenticationList.slice(0,4)" :key="index"> {{ item.message }} </li> </ul> 2、取得数组的索引,使用...
  • VUE 获取数据 增删该 感想

    千次阅读 2016-11-03 11:02:57
     就有个很大的问题 我以为$.ajax 的获取数据vue 是一样的呢 然后我就理所当然的那样写了  我的then 报错但我的 .catch 没有任何错误 我一时不知道怎么回事 然后请教了一下群里的大神 帮我找到了问题  就是我...
  • vue获取数据有两种方式,引入尤大大的话就是:导航完成之后获取:先完成导航,然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示“加载中”之类的指示。导航完成之前获取:导航完成前,在路由进入...
  • 无标题文档 -->  .on{  background: #ccc  }  ul li {  list-style: none;    }   window.onload=function(){  Vue.component('change',{  temp
  • https://bbs.csdn.net/topics/392289820?page=1 <ul id="example"> <li v-for="(item, index) in items" v-if='index<2'> {{ index }} - {{ item.message }} </li> <...
  • 然后必须知道一点,vue数据驱动的(只关心data即可),换句话说,就是,只要我能操作到 data中的数据即可。 所以,根据上面的生命周期,其实你放到 mounted中完全可以,因为这个阶段data中的数据绝对可以访问。 ...
  • vuejs 上一页输入的数据会传到下一页,请问是怎幺回事,求教如何修改!可以再本页之前添加一个分页符,这样在前面无论添加多少文字,本页都将从新的一页开始,格式不会受影响了vue组件滑到页脚进入下一页,然后再...
  • 我想用vue获取json中的conversation数组中最后一项中的content的数据,但是我的方法渲染失败了,求解。json数据部分:{"dialogue": [{"name":"a","conversation":[{"speaker":"a","content":"小伙子"},{"speaker":"b...
  • vue 获取后端数据

    2019-09-29 15:25:59
    1、vue-resource从后端请求我们需要的数据 下载安装npm install vue-resource 装完之后重新启动项目 模拟后端数据,启动测试服务器 注意哦:最新的(我用的3.6)webpack 的build目录下删除了dev-server.js , ...
  • vue获取本地json数据

    千次阅读 2020-05-08 09:28:09
    vue获取本地json数据 最近练习vue的时候,因为是通过vue-cli4搭建的项目,和vue-cli2搭建项目的目录结构不一样。静态文件的放置位置在public文件里。 为了降低模块间的耦合度和方便管理,所以我把axios获取数据给...
  • vue获取远程数据

    2019-10-07 14:26:22
    script src="https://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script> <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script> axios //...
  • 使用vue-resource库发送请求获取数据大家一定知道,在jquery中,我们使用$.ajax()方法,来发送请求获取数据,在vue中,我们使用vue-resource或者axios来向接口发送请求,获取数据,官方推荐使用axios,其实用法差不多...
  • 今天小编就为大家分享一篇vue获取data数据改变前后的值方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,968
精华内容 4,387
关键字:

vue获取数据

vue 订阅