VUE3 Basic Tutorial: Using Vue.js Single File Component (SFC)

With the continuous development of front-end technology, Vue.js, as an efficient, convenient, and powerful front-end framework, has been increasingly used in development. With the official release of Vue.js3, one of the important updates is support for single file components (SFC). This article will introduce how to use single-file components in Vue.js3.

1. What is a single file component?

In Vue.js, a single-file component refers to encapsulating all related code of a Vue component (including HTML, CSS, and JavaScript) in a separate file. For example, a component named "HelloWorld" can be written as a single-file component in the following format:

<template>
  <div>
    <h1 id="message">{{ message }}</h1>
  </div>
</template>

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

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

In the above code, the <template></template> tag contains the HTML part of the component, The <script></script> tag contains the JavaScript part of the component, and the <style></style> tag contains the CSS part of the component. Among them, export default declares the component object, data() defines the data of the component, and style scoped means that the style only applies to the current component.

The advantage of using single-file components is that it facilitates the management and maintenance of components, and can be easily debugged and inspected using integrated development tools (such as Vue Devtools).

2. How to use single file components?

Creating single-file components using Vue.js3 is very simple. First, you need to initialize the project through Vue CLI:

1. Install Vue CLI

npm install -g @vue/cli

2. Create a Vue project

vue create my-app

3. Enter the project directory

cd my-app

Next, create a single-file component named "HelloWorld" in the project.

1. Create component files

Create a file named "HelloWorld.vue" in the src/components directory. The file content is as follows:

<template>
  <div>
    <h1 id="message">{{ message }}</h1>
  </div>
</template>

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

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

2. Import the component into the page

Introduce the HelloWorld component into the page that needs to use the component:

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

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

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

In the above code, import The statement is used to import the HelloWorld component, and the components attribute means to register the component as a subcomponent of the current page, and can use HelloWorld automatically in the page. Define labels.

3. Notes

1. Pay attention to the path when importing components

When importing components, pay attention to the way the path is written. In the above example, we used the @ tag to represent the project root directory, so import HelloWorld from '@/components/HelloWorld.vue' means import src /components/HelloWorld.vue file. If you do not use the @ tag, you need to use a relative path to import, for example:

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

2. Do not define the style directly in the component

although it can be used in a single-file component Define styles directly, but it is not recommended to define styles directly in components. In order to maintain unified style management, it is recommended to use CSS preprocessors (such as SASS, LESS) or CSS modules to introduce styles.

3. Do not write a large amount of logic code in the component

Although a single file component can contain all logic code, it is not recommended to write a large amount of logic code in the component. In order to keep components simple and easy to understand, it is recommended to encapsulate complex logic code into separate modules for processing.

4. Stick to naming rules that prevent naming conflicts

In order to avoid naming conflicts between components, it is recommended to follow naming conventions, such as using lowercase letters connected by dashes (such as my-component).

4. Summary

Single file component is one of the important functions in Vue.js3. It provides a convenient component management method and can greatly improve development efficiency. When using single-file components, you need to pay attention to path writing, style definition, logical processing, and naming conventions. I hope this article can help everyone understand the use of Vue.js3.

The above is the detailed content of VUE3 Basic Tutorial: Using Vue.js Single File Component (SFC). For more information, please follow other related articles on the PHP Chinese website!