vue-cli脚手架使用（二）-- vue-resource数据请求、引用公共css文件

vue与后台请求数据有自己的请求方式，这里用的是vue-resource。
当写有公共css时，可以引用@import到组件中使用。

vue-resource

安装.

$ npm install vue-resource

引用

src/main.js

import Vue from 'vue'
import App from './App'
import router from './router'
// 引用vue-resource
import VueResource from 'vue-resource'

注册

import router from './router'
// 引用vue-resource
import VueResource from 'vue-resource'

// 注册
Vue.use(VueResource)

请求数据

官方给的例子

{
  // GET /someUrl
  this.$http.get('/someUrl').then(response => {

    // get body data
    this.someData = response.body;

  }, response => {
    // error callback
  });
}

error callback 可以不写

App.vue

export default {
  data () {
    return {
      my_value: {}
    }
  },
  created () {
    this.$http.get(url).then(response => {
      this.my_value = response.body.data  
    })
  }
}

调用created钩子，当created时就请求数据。

response.body.data 返回的是一个对象

用my_value来接收数据。

将父组件值传递给子组件

如父组件有一个子组件

<v-header></v-header>

用v-bind将值传递给子组件

<v-header v-bind:my_value="my_value"></v-header>

(v-bind:my_value可以缩写为 :my_value)

子组件要用props来接受值的传递

export default {
  data() {
    return {}
  },
  props: {
    my_value: {
      type: Object
    }
  }
}

就可以和data里面的数据一样用大胡子语法来使用了。

引用公共css文件
如有 common/scss/common.scss 文件

引用方式（@import）

<style lang="scss" rel="stylesheet/scss">
  @import "..路径/common/scss/common.scss";
  ...
</style>