慕課網網課vue-cli全集學習總結之vue3.x項目

概述

      本人在上班之餘學習了慕課網線上的vue-cli課程，系統學習瞭如何在vue2.x和3.x環境實現vue項目。這也是本人頭一次在CSDN上寫博文，有什麼問題可以私聊我。

開發環境

編譯器：VScode
vue版本:4.0.5
node.js版本:12.12.0
我想裝3.x版本，我也有找指定3.x版本安裝命令，但是沒找到。我只好利用npm i @vue\cli安裝語句安裝的4.0的，與3.X版本

項目界面

默認界面是隻有導航欄和標題欄兩大部分，如果點擊導航欄中名爲1的導航塊，就可顯示如下圖顯示的界面。

點擊名爲2的導航塊，可以顯示如圖界面。

點擊名爲3的導航塊，界面會顯示一串數字。

項目代碼

left.vue

<template>
  <div>
    <div class="title">0</div>
    <ul class="menu">
      <li @click="menu1">1</li>
      <li @click="menu2">2</li>
      <li @click="menu3">3</li>
      <li @click="menu4">4</li>
      <li>5</li>
      <li>6</li>
    </ul>
  </div>
</template>
<style type="text/css">
* {
  padding: 0;
  margin: 0;
}
.title {
  width: 100px;
  color: red;
}
.menu li {
  list-style: none;
  height: 50px;
  margin-bottom: 2px;
  background-color: white;
  line-height: 50px;
  cursor: pointer;
}
</style>
<script type="text/javascript">
import Msg from "./Msg.js";
export default {
  methods: {
    menu1: function() {
      Msg.$emit("val", "1");
    },
    menu2: function() {
      Msg.$emit("val", "2");
    },
    menu3: function() {
      Msg.$emit("val", "3");
    },
    menu4: function() {
      Msg.$emit("val", "4");
    }
  }
};
</script>

GoodList.vue

<template>
  <div name="show">
    <ul class="GoodList">
      <li v-for="good in list" :key="good">
        <img v-bind:src="good.img" />
        <p>{{good.goodName}}</p>
      </li>
    </ul>
  </div>
</template>
<style type="text/css">
.GoodList li {
  width: 200px;
  height: 200px;
  list-style: none;
  float: left;
  font-size: 9px;
  color: red;
  margin-bottom: 30px;
}
.GoodList img {
  width: 180px;
  height: 180px;
}
</style>
<script type="text/javascript">
export default {
  name: "show",
  data() {
     var obj = this;
      var url = "";
    if (obj.goodId == 1) {
      url = "json/bjb.json";
    } else if (obj.goodId == 2) {
      url = "json/shouji.json";
    }else{
           url = "json/bjb.json";
      }
    this.$http.get(url).then(function(res) {
      obj.list = res.data;
    });
    return {
      list: []
    };
  },
  props: {
    goodId: Number
  },
  watch: {
    goodId() {
      var obj = this;
      var url = "";
      if (obj.goodId == 1) {
        url = "json/bjb.json";
      } else if (obj.goodId == 2) {
        url = "json/shouji.json";
      }else{
           url = "json/bjb.json";
      }
      this.$http.get(url).then(function(res) {
        obj.list = res.data;
      });
      return {
        list: []
      };
    }
  }
};
</script>

Right.vue

<template>
  <div>
    <div v-if="kk==1">
      <GoodList :goodId="1"></GoodList>
    </div>
    <div v-else-if="kk==2">
      <GoodList :goodId="2"></GoodList>
    </div>
    <div v-else-if="kk==3">333333333333333</div>
    <div v-else-if="kk==4">444444444444444</div>
    <div v-else>
      <GoodList :goodId="0"></GoodList>
    </div>
  </div>
</template>
<script type="text/javascript">
import Msg from "./Msg.js";
import GoodList from "./GoodList.vue";
export default {
  data() {
    return {
      kk: 0
    };
  },
  mounted: function() {
    var _this = this;
    Msg.$on("val", function(m) {
      _this.kk = m;
    });
  },
  components: {
    GoodList
  }
};
</script>

First.vue

<template>
  <div class="main">
    <div class="left">
      <Left></Left>
    </div>
    <div class="right">
      <div class="top">
        <img src="img/title.webp" />
      </div>
      <div class="buttom">
        <Right></Right>
      </div>
    </div>
  </div>
</template>
<style type="text/css">
* {
  padding: 0;
  margin: 0;
}
.left {
  width: 100px;
  float: left;
  margin-right: 10px;
}
.right {
  width: 1000px;
  float: left;
  margin-left: 10px;
}
.main {
  width: 1200px;
  margin: 20px auto;
}
.top img {
  height: 200px;
  width: 1000px;
}
.left,
.right {
  background-color: #f5f5f5;
  height: 500px;
}
</style>
<script type="text/javascript">
import Left from "../components/Left.vue";
import Right from "../components/Right.vue";

export default {
  components: {
    Left,
    Right
  }
};
</script>

遇到的問題

<li v-for="good in list" >報錯
寫成<li v-for="good in list" :key="good">就可以

學習感想

老師講的很細緻，項目做起來也不是很難。課程非常適合小白學習！！