当你创建 Vue 单文件组件时,通常会包含三个部分:<template>
、<script>
和 <style>
。这三个部分分别用于定义组件的模板、逻辑和样式。让我更详细地解释一下它们的作用和用法:
<template>
<template>
标签用于定义组件的模板,即组件的 HTML 结构。在模板中,你可以使用 Vue 的模板语法来描述组件的渲染逻辑,包括插值、指令、事件绑定等。一般情况下,组件的模板应该只有一个根元素。
<template>
<div>
<h1>{{ message }}</h1>
<button @click="handleClick">Click me</button>
</div>
</template>
<script>
<script>
标签用于定义组件的逻辑部分,即组件的 JavaScript 代码。在 <script>
标签中,你可以导入其他模块、定义组件的数据和方法、监听生命周期钩子等。在 Vue 3 中,你可以使用 <script setup>
来更简洁地编写组件的逻辑。
<script>
export default {
data() {
return {
message: 'Hello, Vue!'
}
},
methods: {
handleClick() {
console.log('Button clicked');
}
}
}
</script>
<style>
<style>
标签用于定义组件的样式,即组件的 CSS 样式表。在 <style>
标签中,你可以编写组件的样式规则,包括选择器、属性、值等。你可以使用普通的 CSS 语法,也可以使用预处理器(如 SASS、LESS 等)来编写样式。
<style>
h1 {
color: blue;
}
button {
background-color: green;
color: white;
}
</style>
在上面的代码中,<template>
标签定义了组件的模板,包含了一个标题和一个按钮。<script>
标签定义了组件的逻辑,包含了数据 message
和方法 handleClick
。<style>
标签定义了组件的样式,分别对标题和按钮进行了样式设置。
这三个部分共同构成了 Vue 单文件组件的内容,分别描述了组件的外观、行为和样式。