vue style标签 引入外部样式

Vue中的style标签可以用来定义组件的样式，包括内部样式和引入外部样式。

1. 内部样式：
在Vue组件的template中，可以使用style标签来定义组件的内部样式。例如：

<template>
  <div class="my-component">
    <h1>Hello, Vue!</h1>
  </div>
</template>

<style>
.my-component {
  background-color: #f0f0f0;
  padding: 10px;
}
h1 {
  color: blue;
}
</style>

在上述代码中，style标签内部定义了.my-component类的样式和h1标签的样式。

2. 引入外部样式：
如果需要引入外部的CSS文件，可以使用@import语法或者直接在HTML中引入CSS文件。例如：

<template>
  <div class="my-component">
    <h1>Hello, Vue!</h1>
  </div>
</template>

<style>
@import url('external.css');
</style>

或者在HTML中直接引入CSS文件：

<template>
  <div class="my-component">
    <h1>Hello, Vue!</h1>
  </div>
</template>

<style src="external.css"></style>

在上述代码中，通过@import语法或者src属性引入了外部的CSS文件。