实战复习Vue day1.1（酷炫星系）

先展示效果 

第一步打开Vue官网快速上手 | Vue.js

第二步跟着官网着手搭建Vue3项目

在上一篇文章的基础上，将HTML，CSS,利用Vue中的响应式进行布局，这也是Vue和传统页面的区别之一。

如果是新项目，直接在App.vue中复制粘贴即可，否则的话，记得修改main.js文件

//import App from './App.vue'
import App from './AppVue.vue'//这里是新创建的要展示的页面

 这里是代码展示，如果运行结果和最后一张图不符合，请检查是否是代码单词错误，或者是少了什么。简述一下个人犯的错：驼峰命名法，单词拼写太过自信导致一部分css效果失效

<template>
  <div class="box">
    <div class="main">
      <!-- 太阳 -->
      <img src="./assets/sun.png" alt="" class="sun" />
      <!-- 星球1 -->
      <div
        class="one"
        :style="{
          width: `${bar1.r}px`,
          height: `${bar1.r}px`,
          marginLeft: `-${bar1.r / 2}px`,
          marginTop: `-${bar1.r / 2}px`,
          boxShadow: `0 0 ${bar1.num}px ${bar1.bgc}, inset 0px 0px ${bar1.num}px ${bar1.bgc}`,
          animationDuration: `${bar1.time}s`
        }"
      >
        <img
          src="./assets/bar1.png"
          alt=""
          class="bar"
          :style="{
            width: `${bar1.w}px`,
            height: `${bar1.w}px`,
            marginLeft: `-${bar1.w / 2}px`,
            marginTop: `-${bar1.w / 2}px`
          }"
        />
      </div>

      <!-- 星球2 -->
      <div
        class="one"
        :style="{
          width: `${bar2.r}px`,
          height: `${bar2.r}px`,
          marginLeft: `-${bar2.r / 2}px`,
          marginTop: `-${bar2.r / 2}px`,
          boxShadow: `0 0 ${bar2.num}px ${bar2.bgc}, inset 0px 0px ${bar2.num}px ${bar2.bgc}`,
          animationDuration: `${bar2.time}s`
        }"
      >
        <img
          src="./assets/bar2.png"
          alt=""
          class="bar"
          :style="{
            width: `${bar2.w}px`,
            height: `${bar2.w}px`,
            marginLeft: `-${bar2.w / 2}px`,
            marginTop: `-${bar2.w / 2}px`
          }"
        />
      </div>

      <!-- 操作星球的仪表盘 -->
    </div>
    <div class="pannel">
      <div class="item">
        <div>
          <img src="./assets/bar1.png" alt="" />
        </div>
        <div class="list">
          <div class="ipt">星球大小:<input type="number" v-model="bar1.w" /></div>
          <div class="ipt">运行时间:<input type="number" v-model="bar1.time" /></div>
          <div class="ipt">轨道半径:<input type="number" v-model="bar1.r" /></div>
          <div class="ipt">轨道颜色:<input type="color" v-model="bar1.bgc" /></div>
          <div class="ipt">轨道宽度:<input type="range" min="10" max="100" v-model="bar1.num" /></div>
        </div>
      </div>

      <div class="item">
        <div>
          <img src="./assets/bar1.png" alt="" />
        </div>
        <div class="list">
          <div class="ipt">星球大小:<input type="number" v-model="bar2.w" /></div>
          <div class="ipt">运行时间:<input type="number" v-model="bar2.time" /></div>
          <div class="ipt">轨道半径:<input type="number" v-model="bar2.r" /></div>
          <div class="ipt">轨道颜色:<input type="color" v-model="bar2.bgc" /></div>
          <div class="ipt">轨道宽度:<input type="range" min="10" max="100" v-model="bar2.num" /></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 星球1配置
      bar1: {
        w: 100,
        time: 10,
        r: 500,
        bgc: '#cccccc',
        num: 10
      },
      // 星球1配置
      bar2: {
        w: 135,
        time: 20,
        r: 750,
        bgc: '#cccccc',
        num: 50
      }
    }
  },
  methods: {

  },
  // 监听器 监听对象中的属性值的变化 避免属性值太大或太小
  watch: {
    'bar2.w'(newW) {
      console.log(newW)
      if (newW > 150) {
        this.bar2.w = 150
      } else if(newW < 40) {
        this.bar2.w = 40
      }
    }
  },
  mounted() {
    console.log(this.bar2.w2)
  },
}
</script>
<style>
* {
  margin: 0;
  padding: 0;
}

.box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background-color: #ccc; */
  background: url("./assets/bg.jpg") no-repeat;
  background-size: 100% 100%;
  /* 溢出部分隐藏 */
  overflow: hidden;
}

.main {
  width: 80px;
  height: 80px;
  position: absolute;
  top: 50%;
  left: 30%;
  margin-left: -40px;
  margin-top: -40px;
}
.sun {
  width: 150%;
  height: 150%;
}

.one {
  width: 400px;
  height: 400px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -200px;
  margin-top: -200px;
  border-radius: 100%;
  box-shadow: 0 0 10px #fff, inset 0px 0px 10px #fff;
  animation: move 5s linear infinite;
}

.bar {
  width: 60px;
  height: 60px;
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -30px;
  margin-top: -30px;
}

@keyframes move {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.pannel {
  width: 300px;
  height: 100%;
  position: absolute;
  top: 0px;
  right: 0px;
  background-color: rgba(0, 0, 0, 0.3);
  color: #fff;
  padding-left: 20px;
}

.pannel img {
  width: 80px;
}
.pannel .item {
  border-bottom: 1px solid #fff;
}

.pannel .item .ipt {
  margin: 5px 0px;
}

.pannel .item .ipt input {
  margin-left: 10px;
}
</style>