写一个炫酷的vue文件

好的，以下是一个简单的炫酷的 Vue 文件示例，包含了一些常见的 Vue 组件和一些动画效果：

<template>
  <div class="wrapper">
    <h1 class="title">{{ title }}</h1>
    <img :src="imageUrl" class="image" />
    <ul class="list">
      <li v-for="item in items" :key="item.id" class="item">
        {{ item.name }}
      </li>
    </ul>
    <button @click="toggleAnimation" class="button">{{ buttonText }}</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        title: '炫酷的Vue文件',
        imageUrl: 'https://picsum.photos/200/300',
        items: [
          { id: 1, name: 'Vue' },
          { id: 2, name: 'React' },
          { id: 3, name: 'Angular' },
        ],
        isAnimating: false,
      };
    },
    computed: {
      buttonText() {
        return this.isAnimating ? '停止动画' : '开始动画';
      },
    },
    methods: {
      toggleAnimation() {
        this.isAnimating = !this.isAnimating;
      },
    },
    mounted() {
      setInterval(() => {
        if (this.isAnimating) {
          this.title = this.title.split('').reverse().join('');
        }
      }, 1000);
    },
  };
</script>

<style scoped>
  .wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .title {
    font-size: 3rem;
    margin-bottom: 2rem;
    color: #f0c674;
    text-shadow: 2px 2px 4px #000000;
    animation: title-animation 2s ease-in-out infinite;
  }
  .image {
    width: 200px;
    height: 300px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 2px 2px 4px #000000;
    animation: image-animation 2s ease-in-out infinite;
  }
  .list {
    list-style-type: none;
    margin: 2rem 0;
    padding: 0;
    display: flex;
    justify-content: center;
  }
  .item {
    font-size: 2rem;
    margin: 0 1rem;
    color: #f0c674;
    text-shadow: 2px 2px 4px #000000;
    transform: rotateY(0deg);
    transition: transform 0.5s;
  }
  .item:hover {
    transform: rotateY(180deg);
  }
  .button {
    padding: 1rem 2rem;
    font-size: 2rem;
    color: #ffffff;
    background-color: #81a2be;
    border: none;
    border-radius: 1rem;
    box-shadow: 2px 2px 4px #000000;
    cursor: pointer;
    animation: button-animation 2s ease-in-out infinite;
  }
  @keyframes title-animation {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.2);
    }
    100% {
      transform: scale(1);
    }
  }
  @keyframes image-animation {
    0% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(180deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }
  @keyframes button-animation {
    0% {
      background-color: #81a2be;
    }
    50% {
      background-color: #b294bb;
    }
    100% {
      background-color: #81a2be;
    }
  }
</style>

以上代码实现了以下功能：

1. 显示一个标题、一张图片和一个列表。
2. 列表项可以翻转。
3. 点击按钮可以开始或停止动画。
4. 标题和图片会定时反转。
5. 标题、图片和按钮都有动画效果。

请注意，这只是一个简单的示例，您可以根据您的需求进行更改和定制。