Vue 作业2

Vue作业

1、准备工作

// 新建项目
vue init webpack vue_work

// 安装依赖包, 在vue_work目录下执行
cnpm install

// 安装axios
cnpm install axios --save

// 启动项目
npm run dev

2、编码

1. 在components目录向新建4个vue文件
   

2. 编码分别如下

Left1.vue

<template>
  <div>
    <button @click="get_data">给Lucas讲几个笑话</button>
    <button @click="transfer()">在右边框显示</button>
  </div>
</template>
<script>
  import eventHub from "../eventHub";
  export default {
    name: "Left1",
    data() {
      return {
        msg: 'message from Left1',
        list: []
      };
    },
    methods: {
      // 传递数据
      transfer() {
        eventHub.$emit("test", this.list);
      },

      // 从服务器获取数据
      get_data () {
        this.$axios
          .get('https://autumnfish.cn/api/joke/list?num=3')
          .then(res => (this.list = res.data))
      }
    },
  };
</script>

left2.vue

<template>
  <div>
    <button @click="get_data">从接口为1698113的仓库拿数据</button>
    <button @click="transfer()">在右边框显示</button>
  </div>
</template>
<script>
  import eventHub from "../eventHub";
  export default {
    name: "Left2",
    data() {
      return {
        msg: 'message from Left2',
        info: null
      };
    },
    methods: {
      // 传递数据
      transfer() {
        eventHub.$emit("test", this.info);
      },

      // 从服务器获取数据
      get_data () {
        this.$axios
          .get('http://rap2.taobao.org:38080/app/mock/schema/1698113?scope=response')
          .then(res => (this.info = res.data))

      }
    },
  };
</script>

Left3.vue

<template>
  <div>
    <button @click="get_data">从接口为1698112仓库拿数据</button>
    <button @click="transfer()">在右边框显示</button>
  </div>
</template>
<script>
  import eventHub from "../eventHub";
  export default {
    name: "Left3",
    data() {
      return {
        msg: 'message from Left3',
        info: null
      };
    },
    methods: {
      // 传递数据
      transfer() {
        eventHub.$emit("test", this.info);
      },

      // 从服务器获取数据
      get_data () {
        this.$axios
          .get('http://rap2.taobao.org:38080/app/mock/schema/1698112?scope=response')
          .then(res => (this.info = res.data))

      }
    },
  };
</script>

Right.vue

<template>
  <div>{{receive_data}}</div>
</template>
<script>
  import eventHub from "../eventHub";
  export default {
    name: "Right",
    data() {
      return {
        receive_data: null,
      };
    },
    mounted() {
      eventHub.$on("test", (val) => {
        this.receive_data = val;
      });
    },
  };
</script>

3. 在APP.vue中引用上面4个vue组件

<template>
  <div id="app">
    <div class="left">
      <Left1 ></Left1>
      <br><br><br>
      <Left2></Left2>
      <br><br><br>
      <Left3></Left3>

    </div>
    <Right class="right"></Right>
  </div>
</template>

<script>
  import Left1 from "./components/Left1";
  import Left2 from "./components/Left2";
  import Left3 from "./components/Left3";
  import Right from "./components/Right";

  export default {
    name: "App",
    components: {
      Left1,
      Left2,
      Left3,
      Right,
    },
  };
</script>

<style>
  .left{
    width: 100px;
    height: 560px;
    padding: 20px;
    margin: 30px 0 0 30px;
    float: left;
    border: 2px silver solid;
    /*background: green;*/
  }
  .right{
    width: 600px;
    height: 600px;
    margin: 30px 0 0 30px;
    float: left;
    border: 2px silver solid;
    /*background: yellow;*/
  }
</style>

4. 在src目录下新建中转bus

import Vue from 'vue'
export default new Vue()

5. 在main.js中导入axios

// 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 axios from 'axios'
Vue.prototype.$axios = axios

Vue.config.productionTip = false

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

3、结果