Single File Components
Now that we have taken a look at the structure of the project, let’s talk more about the App.vue file. This file consists of a so-called single file component. We can see this on the file name, which has the vue extension. This is a convention for single file components. These files contain a template within a HTML5 template element at the top, followed by a script tag, and lastly a style tag. So the following structure:
<template>
</template>
<script>
</script>
<style>
</style>
The script tag is not required, and neither is the style tag. But if you want to add any logic to the template, such as events and string interpolation, then you will need a script tag that exports an object. While the template is not special, except that it is wrapped within a template element, the script tag is a bit special.
Here we must export an object, which is generally identical to the objects that we would pass to Vue instances. Since we should only export this object within the file, then we don’t have to give it a name, and instead use the default keyword, which is part of the ES6 module system.
<script>
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
Instead, we can give the object a name that we choose when importing it.
import App from './App.vue';
This file structure is specific to Vue.js, hence the vue file extension. The file gets compiled to JavaScript by webpack, and vue-loader takes care of understanding this file structure and handling it correctly.
While you saw how to make use of such a single file component in this project, we will be taking a closer look at it when we begin learning about components, so that’s all I wanted you to know for now.
Here is what you will learn:
- How to build advanced Vue.js applications (including SPA)
- How Vue.js works under the hood
- Communicating with services through HTTP
- Managing state of large applications with Vuex
- ... and much more!
One comment on »Single File Components«
Hello,
I`m a java developer. My project has .jsp files and some of which uses vue. I’d like use single file component but I don`t know how to add this functionality to my project. In this course could I learn it?