半日は素早くvueで小さなゲームを作ります——“馬雲のお金を使い果たします”

npm install -g @vue/cli

vue create spend-all-money

npm i vant -S

import Vue from "vue";

export default new Vue();

import bus from "./eventBus";

Vue.prototype.$bus = bus;
Vue.config.productionTip = false;

....some code.....
import Main from "../views/Main/index";  
const routes = [
    {
        path: "/",
        name: "main",
        component: Main
      }
 ];
......somde code.......

    // todo:    
    goNetGame() {
      this.$toast("    ");
    }

import Header from "../../components/Header";
import TotalMoney from "../../components/TotalMoney";
import HeaderLink from "../../components/HeaderLink";
import Card from "../../components/Card";
import { mixin } from "./minxin";

export default {
  mixins: [mixin],
  name: "single",
  components: {
    Card,
    HeaderLink,
    Header,
    TotalMoney
  }
};

export default {
  name: "TotalMoney",

  data() {
    return {
      totalMoney: 275000000000
    };
  },

  computed: {
    monenyStr() {
      let moneyStr = this.toThousandsStr(this.totalMoney);
      moneyStr = `  ：￥${moneyStr}`;
      return moneyStr;
    }
  },

  created() {
    this.$bus.$on("changeMoney", money => {
      this.totalMoney = this.totalMoney - money;
    });
  },

  methods: {
    /**
     *       ，     
     * @param num</code></pre> </li> 
 </ol> 
 <pre><code>       */
      toThousandsStr(num) {
        let result;
        (num = (num || 0).toString()), (result = "");
        while (num.length > 3) {
          result = "," + num.slice(-3) + result;
          num = num.slice(0, num.length - 3);
        }
        if (num) {
          result = num + result;
        }
        return result;
      }
    }
  };
  
  ```

  js        ，        ，            。

      this.$bus.$on("changeMoney", money => {
        this.totalMoney = this.totalMoney - money;
      });
                      ，     。

export default {
  name: "Card",

  props: {
    name: { type: String, default: "  " },
    imageUrl: { type: String, default: "https://img.yzcdn.cn/vant/cat.jpeg" },
    price: { type: Number, default: 999 }
  },

  data() {
    return {
      count: 0,
      keyboardShown: false
    };
  },

  computed: {
    //         
    // todo:            
    countStr: {
      get() {
        return this.count.toString();
      },
      set(newVal) {
        let counInt = parseInt(newVal);
        if (isNaN(counInt) || counInt <= 0) {
          counInt = 0;
        }
        this.count = counInt;
      }
    },

    priceStr: {
      get() {
        return this.toThousandsStr(this.price);
      }
    },

    //        ：  *  
    cardMoney: {
      get() {
        return this.count * this.price;
      }
    }
  },

  watch: {
    //                    
    cardMoney(val, oldVal) {
      const diff = val - oldVal;
      // eslint-disable-next-line no-console
      console.log(val, oldVal);
      this.$bus.$emit("changeMoney", diff);
    }
  },

  methods: {
    changeCount(val) {
      if (this.count <= 0 && val < 0) {
        return;
      }
      this.count += val;
    },

    // todo:      ，        
    /**
     *       ，     
     * @param num</code></pre> </li> 
 </ol> 
 <pre><code>       */
      toThousandsStr(num) {
        let result;
        (num = (num || 0).toString()), (result = "");
        while (num.length > 3) {
          result = "," + num.slice(-3) + result;
          num = num.slice(0, num.length - 3);
        }
        if (num) {
          result = num + result;
        }
        return result;
      }
    }
  };
  
  ```

                       ：    （name）、      (imageUrl)、    (price)。

                (count)，  count            (count*price)，                  。

  ### 5.   

               ，        。           star ~

  github  :[  ]( https://github.com/QJvic/spend-all-mone )