57 lines
2.1 KiB
Markdown
57 lines
2.1 KiB
Markdown
|
---
|
||
|
|
title: Single File Components
|
||
|
|
---
|
||
|
|
|
||
|
|
# Single File Components
|
||
|
|
One of the many benefits of using Vue, is the option of making a Single File Component. This component, as the name suggests, is a regular Vue component, living in its own file.
|
||
|
|
|
||
|
|
Having your component in its own file, enables you to have a better structure and overview of your application. It also enables you to have syntax highlighting in your editor of choice.
|
||
|
|
|
||
|
|
## Structure
|
||
|
|
A Single File Component is made up of three sections:
|
||
|
|
* Template, where you put your HTML that makes up the component
|
||
|
|
* Script, where your logic exists
|
||
|
|
* Style, where your styling to your component exists
|
||
|
|
|
||
|
|
## Template
|
||
|
|
You can use the default language, HTML, or you can use other templating engines, such as `Jade` or `Pug`.
|
||
|
|
```html
|
||
|
|
<template>
|
||
|
|
<div>
|
||
|
|
<h1>I am a headline</h1>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
```
|
||
|
|
Basic example of html in a single file component
|
||
|
|
|
||
|
|
|
||
|
|
## Script
|
||
|
|
The script section is where all of your logic exists. You can use the default language, JavaScript. You also have the option of using `TypeScript` instead.
|
||
|
|
It's also in this section all of your properties, methods and watchers exists, to make your component work.
|
||
|
|
|
||
|
|
```html
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: "foo-component",
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
message: "I am a message"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
sayHello() {
|
||
|
|
console.log("Hello world");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
```
|
||
|
|
You can check out how to use Vue, either by browsing this site, or checking out Vue's own documentation, [here](https://vuejs.org/v2/guide/index.html)
|
||
|
|
|
||
|
|
|
||
|
|
## Style
|
||
|
|
The final block in the single file component house. This section is where you can style your component. You can also choose, whether or not it should be non-scoped or scoped. Scoped means that the compiled code automatically gets ID's that is specific to the component, that the styling will affect. Non-scoped means that elements outside of the component, also will get targeted for the styling.
|
||
|
|
|
||
|
|
## Read more
|
||
|
|
If you want to read more about the Single File Components, you can do so [here](https://vuejs.org/v2/guide/single-file-components.html)
|