葫芦的运维日志

---

路由router跳转免刷新，resouce请求网络资源

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 VueRouter from 'vue-router'
import VueResource from 'vue-resource'
import App from './App'
import HelloWorld from './components/HelloWorld'
import Home from './components/Home'

// import Users from './components/Users'
Vue.config.productionTip = false
Vue.use(VueRouter)
Vue.use(VueResource)
//配置路由
const router = new VueRouter({
  routes:[
    {
      path:"/",component:Home
    },
    {
      path:"/helloworld",component:HelloWorld
    }
  ],
  mode:"history"
})

// 全局注册组件
//Vue.component("users",Users);
/* eslint-disable no-new */
new Vue({
  router,
  el: '#app',
  components: { App },
  template: '<App/>'
})

App.vue 

<!-- 1模板:html结构 -->
<template>
  <div id="app">
    <ul>
      <li>
        <router-link to="/">Home</router-link>
      </li>
      <li>
        <router-link to="/helloworld">hello</router-link>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<!-- 2行为:逻辑处理 -->
<script>
  // 局部注册组件


  export default {
    name: 'App',
    data() {
      return {}
    }
  }
</script>

<!-- 3样式:解决样式 -->
<style scoped>
  h1 {
    color: purple;
  }
</style>

Home.vue:

<!-- 1模板:html结构 -->
<template>
  <div id="home">
    <app-header v-on:titleChanged="updatetitle($event)" v-bind:title1="title1"></app-header>
    <users v-bind:users="users"></users>
    <users v-bind:users="users"></users>

    <app-footer v-bind:title1="title1"></app-footer>
  </div>
</template>

<!-- 2行为:逻辑处理 -->
<script>
  // 局部注册组件
  import Users from './Users'
  import Header from './Header'
  import Footer from './Footer'

  export default {
    name: 'home',
    data() {
      return {
        // title: "这是一个干净的脚手架项目!"
        users: [
          //   {name:"brownwang",position:"运维开发",show:false},
          //   {name:"brownwang",position:"运维开发",show:false},
          //   {name:"brownwang",position:"运维开发",show:false},
          //   {name:"brownwang",position:"运维开发",show:false}
        ],
        title1: "传递的是一个值 number string boolean"
      }
    },
    methods: {
      updatetitle(title) {
        this.title1 = title;
      }
    },

    components: {
      "users": Users,
      "app-header": Header,
      "app-footer": Footer
    },
    created() {
      this.$http.get("http://jsonplaceholder.typicode.com/users")
        .then((data) => {
          this.users=data.body;
        })
    }
  }
</script>

<!-- 3样式:解决样式 -->
<style scoped>
  h1 {
    color: purple;
  }
</style>

Helloworld.vue

<template>
  <div class="hello">
    hello world
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

 

葫芦的运维日志

打赏