VueCil-路由和HTTP

安装路由 npm install vue-router --save-dev
安装Http请求 npm install vue-resource --save-dev

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import HelloWorld from './components/HelloWorld'
import Home from './components/Home'
//导入路由
import VueRouter from 'vue-router'
//导入VueResource
import VueResource from 'vue-resource'

Vue.config.productionTip = false;
//使用路由用Vue.use这个中间件
Vue.use(VueRouter);
//通过Vue.use使用VueResource这个时候就可以在当前任何组件中使用Http了
Vue.use(VueResource);
//配置路由
const router=new VueRouter({
  routes:[
    {path:"/",component:Home},
    {path:"/helloword",component:HelloWorld},
  ],
  mode:"history"
});

/* eslint-disable no-new */
new Vue({
  //使用router
  router,
  el: '#app',
  components: { App },
  template: '<App/>'
});

App.vue

<template>
  <div id="app">
    <ul>
      <!--使用router-link不会刷新页面进行路由-->
      <li><router-link to="/">Home</router-link></li>
      <li><router-link to="/helloword">Hello</router-link></li>

    </ul>
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'app',
  data(){
    return{

    }
  },
}
</script>

<style scoped>
h1{
  color: purple;
}
</style>

Home.vue

 //在页面加载之前拿到数据然后展示出来
  created() {
    this.$http.get("http://jsonplaceholder.typicode.com/users").then((data)=>{
      this.users=data.body;
    })
  }