Vue入门必看！轻松实现黑屏打字效果，让你的页面动起来

引言

在Vue.js的学习过程中，掌握一些简单的动画效果可以增强页面的互动性和用户体验。本文将介绍如何使用Vue.js实现一个经典的黑屏打字效果，让你的页面在启动时更加引人注目。

准备工作

在开始之前，请确保你的环境中已经安装了Vue.js。可以通过CDN链接或者npm来安装。

<!-- 通过CDN安装Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

或者通过npm安装：

npm install vue

实现步骤

以下是实现黑屏打字效果的步骤：

1. 创建Vue实例

首先，我们需要创建一个Vue实例，并定义一个包含要打印的文本数组。

<div id="app">
  <div class="typing-effect" v-html="text"></div>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      text: '',
      index: 0,
      messages: [
        'Hello, welcome to my website!',
        'This is a simple typing effect using Vue.js.',
        'Enjoy your stay!'
      ]
    },
    mounted() {
      this.startTyping();
    },
    methods: {
      startTyping() {
        const messages = this.messages[this.index];
        if (messages) {
          const nextChar = messages.charAt(0);
          this.text += nextChar;
          messages.slice(1);
          setTimeout(() => {
            this.index++;
            this.startTyping();
          }, 200); // 控制打字速度
        }
      }
    }
  });
</script>

2. 样式设置

接下来，我们需要为打字效果添加一些样式。

<style>
  .typing-effect {
    position: relative;
    font-size: 24px;
    color: white;
    white-space: pre-wrap;
  }

  .typing-effect::before {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    color: black;
    opacity: 0;
    animation: type 3s steps(25, end) forwards;
  }

  @keyframes type {
    from {
      width: 0;
    }
    to {
      width: 100%;
    }
  }
</style>