vue css

作者：农村混血兒发布日期:2025-06-12 浏览:86

<template>
  <div id="app">
    <h1 class="title">Hello Vue CSS</h1>
    <p class="content">This is a paragraph styled with CSS in Vue.</p>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style scoped>
.title {
  color: #42b983;
  font-size: 2em;
}

.content {
  color: #35495e;
  font-size: 1.2em;
}
</style>

解释说明：

Template: 包含了 HTML 结构，定义了一个 div 容器，其中包含一个标题 (h1) 和一个段落 (p)。
Script: 定义了 Vue 组件的基本结构，这里没有复杂的逻辑，只是简单地声明了组件名称。
Style (scoped): 使用了 scoped 样式，确保这些样式只应用于当前组件。定义了 .title 和 .content 类的样式，分别为标题和段落设置了颜色和字体大小。

上一篇：vue3 emit用法

下一篇：npm 安装vue