vue使用html原生标签报错

Question

<marquee>标签是个html原生标签。但是vue好像识别不出来，提示：
runtime-core.esm-bundler.js:6875 [Vue warn]: Failed to resolve component: marquee

效果倒是能出来，就是我一修改属性，警告就开始刷屏了。
怎么处理这个问题呢？

</marquee>

Answer 1

该回答引用ChatGPT

如有疑问，可以回复我！
首先，需要明确的是 <marquee> 标签是一个已经被废弃的 HTML 标签，不应该在现代的 Web 应用程序中使用。Vue.js 作为现代的前端框架，并不支持这个标签，因为它只支持标准的 HTML 元素和自定义组件。

如果您仍然需要使用 <marquee> 标签，您可以将它包装在一个自定义组件中，然后在 Vue.js 应用程序中使用这个组件。下面是一个示例：

<template>
  <div class="marquee">
    <slot></slot>
  </div>
</template>

<style>
.marquee {
  white-space: nowrap;
  overflow: hidden;
  animation: marquee 5s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
</style>

在上面的示例中，我们创建了一个名为 Marquee 的组件，并使用 CSS 动画实现了类似于 <marquee> 标签的滚动效果。使用该组件时，只需在模板中包含文本即可：

<template>
  <Marquee>Hello, world!</Marquee>
</template>

<script>
import Marquee from './Marquee.vue';

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

这样，您就可以在 Vue.js 应用程序中使用 <marquee> 组件，而不需要担心警告的问题。同时，使用 CSS 动画的方式也可以让您更灵活地控制滚动效果的速度、方向等属性。

</marquee>

</marquee>

</marquee>

</marquee>