Tutoriel de base VUE3 : Utilisation du composant de fichier unique (SFC) de Vue.js

Avec le développement continu de la technologie front-end, Vue.js, en tant que framework front-end efficace, pratique et puissant, est de plus en plus largement utilisé dans le développement. Avec la sortie officielle de Vue.js3, l'une des mises à jour importantes est la prise en charge des composants de fichier unique (SFC). Cet article explique comment utiliser les composants à fichier unique dans Vue.js3.

1. Qu'est-ce qu'un composant à fichier unique ?

Dans Vue.js, un composant à fichier unique fait référence à l'encapsulation de tout le code associé au composant Vue (y compris HTML, CSS et JavaScript) dans un fichier séparé. Par exemple, un composant nommé "HelloWorld" peut être écrit sous forme de composant mono-fichier au format suivant :

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      message: 'Hello Vue.js!'
    }
  }
}
</script>

<style scoped>
h1 {
  color: red;
}
</style>

Dans le code ci-dessus, la balise <template> contient la partie HTML du composant, la balise <script> contient la partie JavaScript du composant, et la balise <style> contient la partie CSS du composant . Parmi eux, export default déclare l'objet composant, data() définit les données du composant et style scoped signifie que le style s'applique uniquement au composant actuel. <template>标签包含了组件的HTML部分，<script>标签包含了组件的JavaScript部分，<style>标签包含了组件的CSS部分。其中，export default声明了组件对象，data()定义了组件的数据，style scoped则表示样式只作用于当前组件。

使用单文件组件的好处是方便组件的管理和维护，并且可以使用集成式开发工具（如Vue Devtools）方便地进行调试和检查。

二、如何使用单文件组件？

使用Vue.js3创建单文件组件非常简单。首先，需要通过Vue CLI来初始化项目：

1.安装Vue CLI

npm install -g @vue/cli

2.创建Vue项目

vue create my-app

3.进入项目目录

cd my-app

接下来，在项目中创建一个名为“HelloWorld”的单文件组件。

1.创建组件文件

在src/components目录下创建一个名为“HelloWorld.vue”的文件，文件内容如下：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      message: 'Hello Vue.js!'
    }
  }
}
</script>

<style scoped>
  h1 {
    color: red
  }
</style>

2.在页面中导入组件

在需要使用该组件的页面中引入HelloWorld组件：

<template>
  <div class="home">
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  components: {
    HelloWorld
  }
}
</script>

在上面的代码中，import语句用于导入HelloWorld组件，components属性则表示将组件注册为当前页面的子组件，并且可以在页面中使用HelloWorld自定义标签。

三、注意事项

1.导入组件时要注意路径

在导入组件时，要注意路径的写法。在上面的例子中，我们使用了@标记来代表项目根目录，因此import HelloWorld from '@/components/HelloWorld.vue'的意思是导入src/components/HelloWorld.vue文件。如果没有使用@标记，则需要使用相对路径来导入，例如：

import HelloWorld from '../components/HelloWorld.vue'

2.不要在组件中直接定义样式

虽然单文件组件中可以直接定义样式，但不建议在组件中直接定义样式。为了保持统一的样式管理，建议使用CSS预处理器（如SASS、LESS）或CSS模块来引入样式。

3.不要在组件中写入大量逻辑代码

虽然单文件组件可以包含所有的逻辑代码，但不建议在组件中写入大量的逻辑代码。为了保持组件的简洁易懂，建议将复杂的逻辑代码封装到单独的模块中进行处理。

4.坚持使用防止命名冲突的命名规则

为了避免组件之间的命名冲突，建议遵循命名规范，例如使用短横线连接的小写字母方法（如my-component

L'avantage d'utiliser des composants à fichier unique est qu'ils facilitent la gestion et la maintenance des composants, et peuvent être facilement débogués et inspectés à l'aide d'outils de développement intégrés (tels que Vue Devtools).

2. Comment utiliser les composants d'un seul fichier ?

Créer des composants à fichier unique à l'aide de Vue.js3 est très simple. Tout d'abord, vous devez initialiser le projet via Vue CLI : #🎜🎜##🎜🎜#1 Installez Vue CLI#🎜🎜#rrreee#🎜🎜#2 Créez un projet Vue #🎜🎜#rrreee#🎜🎜#3. . Entrez la table des matières du projet#🎜🎜#rrreee#🎜🎜#Ensuite, créez un composant mono-fichier nommé "HelloWorld" dans le projet. #🎜🎜##🎜🎜#1. Créez un fichier de composant #🎜🎜##🎜🎜#Créez un fichier nommé "HelloWorld.vue" dans le répertoire src/components. suit : #🎜🎜#rrreee#🎜🎜#2. Importez le composant dans la page #🎜🎜##🎜🎜#Introduisez le composant HelloWorld dans la page qui doit utiliser ce composant : #🎜 🎜#rrreee#🎜 🎜#Dans le code ci-dessus, l'instruction import est utilisée pour importer le composant HelloWorld, et l'attribut components signifie l'enregistrement le composant en tant que sous-composant de la page actuelle et vous pouvez utiliser les balises personnalisées HelloWorld dans la page. #🎜🎜##🎜🎜# 3. Notes #🎜🎜##🎜🎜#1 Faites attention au chemin lors de l'importation de composants #🎜🎜##🎜🎜# Lors de l'importation de composants, faites attention à la façon dont le chemin est écrit. . Dans l'exemple ci-dessus, nous avons utilisé la balise @ pour représenter le répertoire racine du projet, donc importer HelloWorld depuis '@/components/HelloWorld.vue' signifie importer src /components/HelloWorld.vue. Si la balise @ n'est pas utilisée, vous devez utiliser un chemin relatif pour importer, par exemple : #🎜🎜#rrreee#🎜🎜#2 Ne définissez pas le style directement dans le composant #🎜. 🎜##🎜🎜#Bien que les styles puissent être définis directement dans les composants à fichier unique, il n'est pas recommandé de définir des styles directement dans les composants. Afin de maintenir une gestion unifiée des styles, il est recommandé d'utiliser des préprocesseurs CSS (tels que SASS, LESS) ou des modules CSS pour introduire les styles. #🎜🎜##🎜🎜#3. N'écrivez pas une grande quantité de code logique dans le composant #🎜🎜##🎜🎜#Bien qu'un seul composant de fichier puisse contenir tout le code logique, il n'est pas recommandé d'en écrire une grande quantité de code logique dans le composant. Afin de conserver des composants simples et faciles à comprendre, il est recommandé d'encapsuler le code logique complexe dans des modules séparés pour le traitement. #🎜🎜##🎜🎜#4. Respectez les règles de dénomination qui évitent les conflits de noms #🎜🎜##🎜🎜# Afin d'éviter les conflits de noms entre les composants, il est recommandé de suivre les conventions de dénomination, telles que l'utilisation de lettres minuscules reliées par tirets (par exemple mon-composant). #🎜🎜##🎜🎜# 4. Résumé #🎜🎜##🎜🎜#Le composant de fichier unique est l'une des fonctionnalités importantes de Vue.js3. Il fournit un moyen pratique de gérer les composants et peut considérablement améliorer l'efficacité du développement. Lorsque vous utilisez des composants mono-fichier, vous devez prêter attention à l'écriture du chemin, à la définition du style, au traitement logique et aux conventions de dénomination. J'espère que cet article pourra aider tout le monde à comprendre l'utilisation de Vue.js3. #🎜🎜#

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!