【Vue.js】.vueファイルの書き方
はじめに
この記事ではVue.jsやNuxt.jsで使用する.vueファイルの書き方について書いていきます！
Vue.jsを初めて勉強する際は、HTMLファイルにscriptタグで一行追加するだけで利用できるCDN版で書いてみる人が多いと思います。
しかし、プロジェクト方式で開発となるとページの内容を記述する際にはHTMLファイルではなく、.vueファイルを利用していきます。
その際に、HTMLファイルから.vueファイルでの記述の違いで躓かないよう、この記事が少しでも参考になったら幸いです。
.vueファイルとは
.vueファイルはVue.jsのコンポーネントを定義しているファイルです。HTMLファイルに実装する方式ではコンポーネントはVue.componentを使って作成しますが、プロジェクト方式ではこの.vueファイルでコンポーネントを定義します。この.vueファイルという一つのファイルにまとめたコンポーネントを単一ファイルコンポーネントと言います。
.vueファイルでは、HTML、JavaScript、CSSを1ファイルにまとめて書けることが利点として挙げられます。
まとめて書くことで管理がしやすく、大規模なアプリケーションを作る際に大きな恩恵が受けられます。
.vueファイルの構造
.vueファイルは主に <template>タグ、<script>タグ、<style>タグの3つの部分に分けられています。
<template>
<div>
<div class="example">{{ msg }}</div>
<App/>
</div>
</template>
<script>
import App from './App.vue'
export default {
data () {
return {
msg: 'Hello world!'
}
},
components:{
App
}
}
</script>
<style>
.example {
color: red;
}
</style>
<template>タグ
<template>
<div>
<div class="example">{{ msg }}</div>
<App/>
</div>
</template>
一番最初にある<template>タグの中は、HTMLで記述します。
この<template>タグの中に記述した内容が実際の画面に表示されます。
<script>タグ
<script>
import App from './App.vue'
export default {
data () {
return {
msg: 'Hello world!'
}
},
components:{
App
}
}
</script>
scriptタグではHTMLファイルで実装するときと同じように、JavaScriptで処理を記述します。 しかし、見たことがないのが、export default{ }の部分です。このexport default{ }で囲むと書いた中身が外部のファイルからも呼び出せるようになります。 .vueファイルは外部からも呼び出せることが前提の仕組みのため、export default{}が必要なわけです。とりあえず最初はexprot default{}を脳死で書いておきましょう！
そして、もう一つあまり見かけないのが import ~~ from ~~の部分です。
import 好きなコンポーネント名 from 'コンポーネントとして利用したい.vueファイルのパス'
上記のように記述することで他の.vueファイルを読み込んで、コンポーネントとしてそのまま使用することができます！
なお、他のvueファイルを読み込む必要がないのならば、この一文は必要ありません。
<style>タグ
<style>
.example {
color: red;
}
</style>
最後はHTMLファイルの時とほとんど変わりありません。
CSSで記述してページを装飾することができます！
また、<style scoped>という風にscoped属性を付けると、この.vueファイル内のみにスタイルの設定を適用することができます。
