zoukankan      html  css  js  c++  java
  • VUE --- 给页面加点网络动态数据

    这时候的页面都是静态的(数据在写程序的时候已经固定了不能修改),而每个应用基本上都会请求外部数据以动态改变页面内容。对应有一个库叫 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: *

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

  • 相关阅读:
    GCD之各种派发
    Effective Objective-C 笔记之熟悉OC
    正则表达式之正向预查和负向预查
    vue的实例属性$refs
    vue的实例属性$options
    vue的实例属性$data
    vue的实例属性$el
    vue强制更新$forceUpdate()
    vue的extends的使用
    vue的mixins的使用
  • 原文地址:https://www.cnblogs.com/mafeng/p/6238728.html
Copyright © 2011-2022 走看看