javaScript vue+ajax网络数据获取

来源：互联网发布：电工仿真软件下载编辑：程序博客网时间：2024/06/02 01:08

1.安装资源包

npm install vue-resource

2.启动文件main.js,引入文件

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

3.request

<script>  import header from './components/Header/header.vue'  export default {    data () {      return {        seller: {}      }    },    created () {      // GET /someUrl      this.$http.get('/api/seller').then(response => {        // get body data        response = response.body        if (response.errno === 0) {          this.seller = response.data          console.log(this.seller.avatar)        }      }, response => {        // error callback      })    },    components: {      'v-header': header    }}</script>

4.v-bind(:) 通过pros传递数据

 <v-header :seller="seller"></v-header>

5.自定义组件v-header接受参数

<template>    <div>      <img :src="seller.avatar" alt="" width="60" height="60">      {{seller.avatar}}    </div></template><script type="text/ecmascript-6">  export default{    props: {      seller: {        type: Object      }    }  }</script>

阅读全文

0 0