这时候的页面都是静态的(数据在写程序的时候已经固定了不能修改),而每个应用基本上都会请求外部数据以动态改变页面内容。对应有一个库叫 vue-resource 帮我们解决这个问题。

使用命令行安装

cnpm install vue-resource --save

在 main.js 引入并注册 vue-resource :

import VueResource from 'vue-resource'
Vue.use(VueResource);

我们在 secondcomponent.vue 上来动态加载数据

添加一个列表:

<ul>
<li v-for="article in articles">
{{article.title}}
</li>
</ul>

在 data 里面加入数组 articles 并赋值为[]

然后在 data 后面加入加入钩子函数 mounted (详细请参照官方文档关于 vue 生命周期的解析), data 和 mount 中间记得记得加逗号

mounted: function() {
this.$http.jsonp('https://api.douban.com/v2/movie/top250?count=10', {}, {
headers: { },
emulateJSON: true
}).then(function(response) {
// 这里是处理正确的回调 this.articles = response.data.subjects
// this.articles = response.data["subjects"] 也可以 }, function(response) {
// 这里是处理错误的回调
console.log(response)
});
}

这里使用的是豆瓣的公开 GET 接口,如果接口是跨域的 POST 请求,则需要在服务器端配置:

Access-Control-Allow-Origin: *

这时候运行看看。等一会接口返回数据,咦,数据加载出来了,棒棒哒 !

VUE --- 给页面加点网络动态数据的更多相关文章

  1. 【微信小程序】模仿58同城页面制作以及动态数据加载

    完成动态数据的加载,如下 使用上班的空余时间慢慢的学习,相信总有一天我会很熟悉的掌握这门技术. 本次学习小总结: 微信小程序使用的代码基本与HTML.CSS.JS等前段有关知识一样. 微信小程序js使 ...

  2. vue单页面应用中动态修改title

    https://www.jianshu.com/p/b980725b62e8 https://www.npmjs.com/package/vue-wechat-title 详细信息查看:vue-wea ...

  3. Vue单页面中进行业务数据的上报

    为什么要在标题里加上一个业务数据的上报呢,因为在咱们前端项目中,可上报的数据维度太多,比如还有性能数据.页面错误数据.console捕获等.这里我们只讲解业务数据的埋点. 业务数据的上报主要分为: 各 ...

  4. vue父组件异步获取动态数据传递给子组件获取不到值

    原理: 在父组件中使用axios获取异步数据传给子组件,但是发现子组件在渲染的时候并没有数据,在created里面打印也是空的,结果发现一开始子组件绑定的数据是空的,在请求数据没有返回数据时,子组件就 ...

  5. vue轮播,vue-awesome-swiper动态数据渲染,loop无效,轮循无效

    解决办法:在渲染数组数据前.判断是否为空 v-if="slideList.length>1" <template> <div class="ban ...

  6. Golang 网络爬虫框架gocolly/colly 五 获取动态数据

    Golang 网络爬虫框架gocolly/colly 五 获取动态数据 gcocolly+goquery可以非常好地抓取HTML页面中的数据,但碰到页面是由Javascript动态生成时,用goque ...

  7. [one day one question] Vue单页面应用如何保证F5强刷不清空数据

    问题描述: Vue单页面用按F5强刷,数据就恢复初始了,这怎么破? 解决方案: store.subscribe((mutation, state) => { sessionStorage.set ...

  8. html页面下拉列表中动态添加后台数据(格式化数据,显示出数据的层次感)

    html页面下拉列表中动态添加后台数据(格式化数据,显示出数据的层次感) 效果图: 运行原理和技术: 当页面加载完毕,利用jquery向后台发送ajax请求,去后台拼接<select>&l ...

  9. uni-app中页面部分内容使用索引列表(uni-indexed-list),动态数据

    一.引入uni-indexed-list.uni-icons组件 从uni-app插件市场下载或从HBuilder X提供的hello uni-app模板中复制 二.页面中引用 三.对请求获得的数据处 ...

随机推荐

  1. iOS多线程简介

    1.进程 什么是进程 进程是指在系统中正在运行的一个应用程序 每个进程之间是独立的,每个进程均运行在其专用且受保护的内存空间内 比如同时打开迅雷.Xcode,系统就会分别启动2个进程 2.线程 什么是 ...

  2. ReactiveCocoa代码实践之-RAC网络请求重构

    前言 RAC相比以往的开发模式主要有以下优点:提供了统一的消息传递机制:提供了多种奇妙且高效的信号操作方法:配合MVVM设计模式和RAC宏绑定减少多端依赖. RAC的理论知识非常深厚,包含有FRP,高 ...

  3. Android开发学习——打电话应用

    打电话应用 system/app/phone.apk  这个是打电话应用,这个Java API 不允许应用级程序员改写,系统级才可以 system/app/dialer.apk  这个是拨号器应用,可 ...

  4. iOS-多线程之GCD(原创)

    前言 GCD 全称 Grand Central DisPath NSOperation便是基于GCD的封装 基础知识 1.GCD的优势 (1)为多核的并行运算提出了解决方案 (2)GCD会自动利用更多 ...

  5. 浅谈UIAlertController使用

    一开始在刚接触到Alert和ActionSheet的时候,经常傻傻分不清楚,好不容易用习惯了,苹果又给合并了,好在用起来也不困难,到底哪个好呢?见仁见智吧! 现在稍微介绍一下怎么用. 1.初始化,一般 ...

  6. [转载]了解Linux的进程与线程

    本文转自Tim Yang的博客http://timyang.net/linux/linux-process/ .对于理解Linux的进程与线程非常有帮助.支持原创.尊重原创,分享知识! 上周碰到部署在 ...

  7. javascript-代理模式

    JavaScript代理模式笔记 由于一个对象不能直接引用另一个对象,所以要用过代理对象在这两个对象之间起到中介作用 1.代理对象形式是通过script标签 demo实例实现的方式也被人称之为JSON ...

  8. vs.net Web.csproj.webinfo文件

    使用VS工具打开工程的时候,请直接打开BookShop.sln文件, 请修改WEB/Web.csproj.webinfo文件中的<Web URLPath = "http://local ...

  9. (转)tomcat进程意外退出的问题分析

    节前某个部门的测试环境反馈tomcat会意外退出,我们到实际环境排查后发现不是jvm crash,日志里有进程销毁的记录,从pause到destory的整个过程: org.apache.coyote. ...

  10. Nova 组件详解 - 每天5分钟玩转 OpenStack(26)

    本节开始,我们将详细讲解 Nova 的各个子服务. 前面架构概览一节知道 Nova 有若干 nova-* 的子服务,下面我们将依次学习最重要的几个.今天先讨论 nova-api 和 nova-cond ...