精华内容
下载资源
问答
  • Vue-请求数据渲染页面

    千次阅读 2020-05-13 00:01:26
    1、前边说ajax请求的发送,今天要实现的是页面加载完成之后,渲染出列表的数据 2、首先新建一个GoodsList.vue ,加入一下HTML内容 <template> <div class="hello"> <h1>{{title}}</h1> ...

    1、前边说到ajax请求的发送,今天要实现的是页面加载完成之后,渲染出列表的数据

    2、首先新建一个GoodsList.vue ,加入一下HTML内容

    <template>
      <div class="hello">
        <h1>{{title}}</h1>
        <ul>
          <li v-for="(v,k) in goodsList" :key="k">
            <div style="border:1px solid red;margin-top:2px">
              <span>商品ID:{{v.goods_id}}</span><br/>
              <span>商品名字:{{v.goods_name}}</span>
            </div>
          </li>
        </ul>
        <button></button>
      </div>
    </template>
    

    3、在js代码中添加以下内容

    <script>
    export default {
      name: 'demo',
      data () {
        return {
          title: 'GoodsList',
          goodsList:[]
        }
      },
      methods: {
    
      },
      mounted() {
        this.$http.post('/api/getProductList', {}).then((response) => {
          console.log(response)
          this.goodsList = response.body.data.data
        }, (error) => {
          console.log(error)
        })
      }
    }
    </script>
    
    1. 首先需要声明一个goodslist的变量,并且初始化为空
    2. 添加mounted方法,在页面加载完成之后,会自动触发改方法
    3. 页面加载完成之后,自动发送post请求获取到数据
    4. 请求到数据之后,把数据放在data变量中,页面自动渲染出对应的数据

    4、加载下一页

    在HTML代码下添加以下内容

    <template>
      <button v-if="has_more" @click="loadMore()">点击加载更多</button>
      <button v-else>我也是有底线的。。。</button>
    </template>
    

    修改JS代码

    1. 添加has_more变量,用来控制按钮的显示,有下一页的话显示 “点击加载更多” 按钮
    2. 如果数据不够10条,则修改 has_more属性为false,则对应按钮自动显示为 “我也是有底线的。。。”
    3. 把加载数据的方法抽象为一个公共方法,点击加载下一页的时候,直接调用getGoodsList
    <script>
    export default {
      name: 'demo',
      data () {
        return {
          title: 'GoodsList',
          goodsList: [],
          page: 1,
          has_more: true
        }
      },
      methods: {
        loadMore: function () {
          this.getGoodsList( this.page)
        },
        getGoodsList: function ( page ) {
          this.$http.post('/api/getProductList', {page: this.page }).then((response) => {
            this.goodsList = this.goodsList.concat(response.body.data.data)
            this.page ++
            if(response.body.data.data.length < 10 ){
              this.has_more = false;
            }
          }, (error) => {
            console.log(error)
          })
        }
      },
      mounted() {
        this.getGoodsList(1);
      }
    }
    </script>
    
    
    
    展开全文
  • 前端Vue请求接口数据渲染数据 1.请求接口数据: //定义一个保存数据的数组 data(){ return { lunbotuList:[] //保存轮播图的数组 }; } created(){ this.getLunbotu(); }, methods:{ getLunbotu(){ ...

    前端Vue请求接口数据、渲染数据

    1.请求接口数据:
    
    //定义一个保存数据的数组
    data(){
        return {
            lunbotuList:[]    //保存轮播图的数组
        };
    }
    
    
    
    created(){
        this.getLunbotu();
    },
    methods:{
    
    		getLunbotu(){
    
    			this.$http.get('接口').then(result => {
    
    				console.log(result.body);
    
    		})
    
    	}
    
    }
    
    methods:{
    
    		getLunbotu(){
    
    			this.$http.get('接口').then(result => {
    
    				//console.log(result.body);
                    if(result.body.status ===0){
                        this.lunbotuList = result.body.message;
                    }else{
                        return '获取接口数据失败'
                    }
    
    		})
    
    	}
    
    }
    
    2.数据有了,渲染数据:
    
    //使用v-for来循环数组数据(lunbotuList)
    <mt-swiper :auto="4000">
        //在vue组件中,使用v-for循环的话,一定要使用key
        <mt-swiper-item v-for="item in lunbotuList" :key="item.url">
        	<img src="item.img" alt="">
        </mt-swiper-item>
    </mt-swiper>
    
    //布局
    img{
        width:100%;
        height:100%;
    }
    
    展开全文
  • 最基础的Vue 请求渲染数据,包括下拉加载更多,换分类。首先声明一点我写这个只是个人业余写的只为自己练习技术,页面是抓的二十次幂这个站点 https://www.ershicimi.com/ 首先我之前没有学过Vue 只是了解一些html...

    最基础的Vue 请求渲染数据,包括下拉加载更多,换分类。首先声明一点我写这个只是个人业余写的只为自己练习技术,页面是抓的二十次幂这个站点 https://www.ershicimi.com/

    • 首先我之前没有学过Vue 只是了解一些html和js的知识,然后自己写了一些接口,想学一下啊用Vue实现下请求渲染数据.
    • 我只用了两天时间实现的以下效果,感觉还行,我都是按照自己想法写的,可能不正规。
    • 说一下我实现了那些功能:axios实现请求API接口,渲染数据,点击不同分类请求不同的API,向下滑动加载更多。
      在这里插入图片描述

    我的Vue体验方法

    一 官方文档

    • 我照着官方文档的快速开始教程 走了一遍,把vue的语法渲染语法走了一遍(绑定对象的时候我理解错了,踩了些坑)。
    • 然后又搜了一下Vue推荐用 axios 模块发送http请求(本来我准备用jQ ajax写的),自己尝试写了下demo。

    二 目录结构以及运行方式
    在这里插入图片描述

    article/        
    	static/
    		css/
    		img/
    		js/
    		  main.js  <!-- 存放一些公共变量 至少我是这样做的 -->
    	index.html    <!-- 入口首页文件 -->
    	author.html   <!-- 作者详细页文件 -->
    	news.html    <!-- 详细页文件 -->
    

    运行方式:可以在本地搭建apache服务器或者其他http服务器就行,把html文件都一起丢到根目录。 (ps:如果用vue-cli的方式,就自带Node.js的http服务器)

    我的做法: 我是用的xampp 这个集成环境 中的apache来搭建的,具体步骤自己搜索,很简单的,安装一般都会报一个端口 被占用的错误,导致不能启动。

    三 动手写代码

    • 写代码之前 vue的基础知识必须得知道
    • v-for :href :src 等等
    • 然后就是 vue的绑定 还有函数的写法,然后就是mounted 挂载
    new Vue(
            {
                el: "#wrapper",   // 这是要绑定的id 可以绑定最外层的div的id
                data: {
                	infos: [],   // 主要列表信息  
                },
                methods:{
                   // 主要函数方法
                },
                mounted(){
                // 挂载  就是一打开这个页面就执行这里面的函数, 有点像构造方法的意思 __init__ 
                // 注意要用this 这个关键字调用
                },
             },
         );
    
    index.html  // 入口文件
    
    // 首先引入 我刚开始体验vue 不会vue-cli的方式使用,但是最终一般都用vue-cli
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    // 感觉代码有点多 后面补充完整 代码也会贴出来
    <body>
    ..
    <div id="wrapper"">   //其实可以绑定在body里面  走一下vue教程就知道
    <ul class="news-list">
    	<li v-for="(info,index) in infos" :key="index">
    	    <div class="img-box">
    	    <a :href='"./news.html?uuid=" + info.md5_url' target="_blank"> // 注意这里的info.md5_url 用{{ }} 这种方式会报错,可能是"的原因, 所以我用了这种字符串拼接的方式
    	    <img :src="info.cover"></a>
    	    </div>
    	    <div class="txt-box">
    	    <h3>
    	    <a :href='"./news.html?uuid=" + info.md5_url'>{{ info.title }</a>
    	    </h3>
    	    <p class="txt-info" target="_blank">{{ info.digest }}</p>
    	    <div class="s-p">
    	    <a :href='"./author.html?author_id=" + info.author_id' class="account">{{ info.author }}</a>
    	    <span class="s2">{{ info.published_at }}</span>
    	     </div>
    	     </div>
         </li>                  `
         </ul>
    </div>
    ...
    </body>
    
    <script>
    	// var host_name = "http://127.0.0.1";   //后面我是把这个变量 放到了main.js 每个文件都需要用
        var current_cate = "0";   // 当前默认分类
        var current_page = 1;     // 当前默认页
        new Vue(
            {
                el: "#wrapper",
                data: {
                    current: 0,  // 当前页码
                    infos: [],   // 主要列表信息
                },
                methods: {
                    loadInfoList: function (page, cate) {
                        var _this = this;   // 这里我有个疑惑, 我感觉每个函数里面都得有一个这样的变量才行 不能都直接用this  
                        // 20119/03 我看到阮一峰 关于闭包的解释 http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html
                        axios.get(hots_name + "/api/v1/article/get/list", {
                            params: {
                                page: page,
                                size: 10,
                                cate: cate,
                            }
                        })
                            .then(function (response) {
                                if(page>1){
                                    // 如果不是首页 数据 依次添加在后面
                                    for (var i = 0; i < response.data.data.length; i++) {
                                        var info = response.data.data[i];
                                        _this.infos.push(info)
                                    }
                                }else {
                                   // 是首页数据 就直接渲染
                                    _this.infos = response.data.data;
                                }
                            })
                            .catch(function (error) {
                               // 请求发送失败
                                console.log(error);
                            });
                    }, 
                    addClass: function (index) {            // 点击分类操作
                        this.current = index;    // 点击添加 active 
                        current_cate = index;    // 当前是那个分类
                        current_page = 1;        // 每次点击分类 初始化当前页
                        // 点击加载新分类
                        this.loadInfoList(current_page, index)
                    },
                    loadMore: function () {
                        var _this = this;
                        // 监听鼠标事件加载更多 这一步是我当时 搜出来的
                        window.addEventListener('scroll', function () {
                            //变量scrollTop是滚动条滚动时,距离顶部的距离
                            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                            //变量windowHeight是可视区的高度
                            var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
                            //变量scrollHeight是滚动条的总高度
                            var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
                            //滚动条到底部的条件 +1 的原因是因为我看过触发这个条件 有时候差1,反正总感觉我这个不完善。
                            if (scrollTop + windowHeight + 1 >= scrollHeight) {
    //                            console.log("到底了")
                                current_page += 1;
                                _this.loadInfoList(current_page, current_cate)
                            }
                        })
                    },
                },
                mounted() {
                    // 初始化方法 加载首页数据 分类 和列表
                    this.loadMore();  // 监听加载更多
                    this.loadInfoList(current_page, current_cate);  
                }
            },
        );
    </script>
    
    展开全文
  • vue异步请求数据重新渲染

    千次阅读 2019-08-08 22:07:00
    vue异步请求数据时往往不能及时更新,下面介绍一种方法解决。 export default { name: "pic", created() { this.getList(); }, data(){ return{num:[]} }, methods:{...

    vue异步请求数据时往往不能及时更新,下面介绍一种方法解决。

    export default {
            name: "pic",
            created() {
               this.getList();
            },
            data(){
                return{num:[]}
            },
            methods:{
                getList(){
                    fetch('https://localhost:3000/get-banner-list').then(data=>{
                        return data.json()
                    }).then((data)=>{this.num=data.data;console.log(this.num)})
                }
            }
        }

    这个时候template标签里面的数据还没有更新,所以可以这样

    <div class="propagate" v-show="num.length>0">
            <ul>
               <li  v-for="(item,index) in num" :key="index">
                  <img :src="item.photo_url" :key="index">
               </li>
            </ul>
        </div>

    等数据加载完再显示

    展开全文
  • 首先说下今天遇到的问题: ...这些问题的出现是因为最开始请求后台的数据接口方法 fun A 写在 mounted 中, fun A 如下: getDetailData() { var that = this; var id = this.$route.query..
  • 下面小编就为大家分享一篇vue中实现先请求数据渲染dom分享,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 一、如何读出数据渲染 1、首先在api下建一个js文件,然后在文件里写入拿的接口,例如 export const getCompanyInfo = () => that.$http("/base/companyInfo", "get"); 2、在前端页面引入请求接口,在此之前...
  • 我们可以使用缓存的方式拿到请求图片的地址进行缓存,只要在请求到的图片链接前面加上‘https://images.weserv.nl/?url=’ 这是一个专门缓存图片的网址
  • mounted运行的 绘制echarts 方法去掉,把 绘制echarts 方法 放在请求接口完成之后 如图所示 重点:如何找到问题,debugg 是最好的,看一下数据是在哪一步没有的,我是...数据得到时,绘制的echarts 已经渲染完。 ...
  • Vue请求接口渲染数据(利用axios)

    千次阅读 2020-07-29 16:01:18
    一、下载axios ...三、在组件中连接接口(这里以一个父组件传子组件的过程来示例) Home.vue(父组件)中: export default { data (){ return{ spikeList:[],//定义一个数组用于存放接口传递过来
  • 一开始在vue用普通的数据渲染,更改为vue后使用v-for 发现没办法渲染上去了。 obj.data就是以上数据。 必须加上这三行给this随意赋个值,神奇的事情就会发生了哈哈哈 这里是我随意做的一个例子 转载于:...
  • 主要介绍了Egg Vue SSR 服务端渲染数据请求与asyncData,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 最近在做一个vue项目,用的是官方推荐的axios请求数据,数据结构是一级对象嵌套二级对象,发现一级对象数据渲染不报错,二级数据渲染报错。很是郁闷!data函数如下 export default { name: 'hello', data() { ...
  • 异步请求 html: <table> <tr><td>用户名:</td><td><input type="email" name="email" v-model="email"></td></tr> //使用双向绑定 <tr><td>密码:&...
  • 1.vue-resource请求数据 vue-resource请求数据方式是官方提供的一个插件,通过npm install vue-resource --save或者cnpm install vue-resource --save进行安装,也可以通过在线引入的方式使用vue-resource,引用...
  • vue.js 数据渲染成功仍报错的问题

    千次阅读 2017-07-27 16:21:47
    vue.js 数据渲染成功仍报错的问题最近在做一个vue项目,用的是官方推荐的axios请求数据,数据结构是一级对象嵌套二级对象,发现一级对象数据渲染不报错,二级数据渲染报错。很是郁闷!data函数如下 export default {...
  • vue中实现先请求数据渲染dom

    万次阅读 2017-12-14 20:55:42
    在项目中遇到了一个问题,下面是...原因是并没有按照 请求数据—>渲染dom—>获取dom的顺序执行,实际的执行顺序是 先获取dom,而此时数组option中还是空的,上面的v-for循环也就没有渲染出dom,所以根本取不(不理解
  • 请求数据的接口: 新闻列表接口:http://www.phonegap100.com/appapi.php?a=getPortalList&amp;catid=20&amp;page=1 新闻详情接口:http://www.phonegap100.com/appapi.php?a=getPortalArticle&amp;aid...
  • 我用vue调试后端接口,接口状态码很快就返回了,几乎是不1秒的时间,数据也是在控制台能直接打印,但是接口response却是要等上很久才会有数据,按理说我状态码返回之后就能打印到数据了,但是却不渲染页面,等很...
  • vue+ajax(vue如何渲染ajax请求回的数据) 由于公司权限所致,不能使用vue全家桶,但是又想使用vue,大家都知道,vue 是不支持ajax的,那么如果我非要用vue渲染ajax请求回来的数据怎么办呢? 以下是思路, 1、先...
  • 我们异步请求后端接口之后,成功获取数据,给data属性赋值,无法渲染到页面 我获取的一个list数据 网友的解决办法: Vue.$set()方法,修改 数组 / 对象 的某个属性值(这不符合我的需求,我要给整个数组重新赋值) ...
  • Vue发axios请求数据成功拿到,但是不能渲染到页面的问题。 昨天还还好的项目,今天开服务器代理报错。一开始以为代理有问题,就各种搜,无效。 最后竟然发现是接口出了问题!!! 找到新的接口后,拿到数据,但是...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 35,651
精华内容 14,260
关键字:

vue请求到数据怎么渲染

vue 订阅