Vue3 单文件组件学习笔记
本文将介绍 Vue3 的单文件组件相关知识，并附上实例代码。
什么是单文件组件
单文件组件（Single File Components，简称 SFC）是一种将组件的 HTML 模板、JavaScript 代码和样式表都写在一个 .vue 文件中的组件形式。这样做的好处是方便组件的编写和维护，也便于代码重用。
在单文件组件中，可以通过 <template> 标签来定义组件的模板，<script> 标签用来定义组件的 JavaScript 部分，<style> 标签用来定义样式。以下是一个简单的单文件组件示例：
Copy Code<template>
<div class="hello">
{{ greeting }}
</div>
</template>
<script>
export default {
data() {
return {
greeting: 'Hello World!'
}
}
}
</script>
<style>
.hello {
font-size: 24px;
}
</style>
如何使用单文件组件
要在应用程序中使用单文件组件，需要使用 Vue 的编译器将其转换为渲染函数。在 Vue3 中，可以使用 createApp 函数来创建应用程序实例，并使用 component 方法注册单文件组件。以下是一个简单的例子：
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<title>Vue3 Single File Component Example</title>
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/vue@next"></script>
<script src="./hello.vue"></script>
<script>
const app = Vue.createApp({})
app.component('hello', Hello)
app.mount('#app')
</script>
</body>
</html>
其中，我们使用 component 方法注册了名为 hello 的组件，它的代码在 ./hello.vue 文件中。在 HTML 中，我们可以像普通标签一样使用 <hello> 标签来渲染这个组件。
单文件组件实例
下面是一个包含一个计数器的单文件组件示例：
Copy Code<template>
<div class="counter">
<h2>{{ title }}</h2>
<button @click="increment">+</button>
<span>{{ count }}</span>
<button @click="decrement">-</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0,
title: 'Vue3 Counter'
}
},
methods: {
increment() {
this.count++
},
decrement() {
this.count--
}
}
}
</script>
<style>
.counter {
padding: 20px;
background-color: #f6f6f6;
border: 1px solid #ddd;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
h2 {
margin: 0;
margin-bottom: 10px;
font-size: 24px;
}
button {
padding: 10px 15px;
background-color: #007fff;
color: #fff;
border: none;
margin: 10px;
cursor: pointer;
}
span {
margin: 0 10px;
font-size: 24px;
}
</style>
在 HTML 中，我们可以像这样使用这个组件：
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<title>Vue3 Single File Component Example</title>
</head>
<body>
<div id="app">
<counter></counter>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script src="./counter.vue"></script>
<script>
const app = Vue.createApp({})
app.component('counter', Counter)
app.mount('#app')
</script>
</body>
</html>
当我们访问这个页面时，将会看到一个计数器组件，点击 “+” 按钮可以增加计数，点击 “-” 按钮可以减少计数。