サンプルコードから基礎を学ぶ！Vue.js入門講座！【テンプレート構文編】

今回はこのようなご要望をいただきました。

Vue.jsの基礎を知りたい！
とりあえず動かしてみたい！

ということで今回はテンプレート構文について解説していきます。

超初心者向けVue.js入門講座です。

一緒にVue.jsを勉強して、Vue.jsを楽しみましょう！

テンプレート構文とはテンプレートを作るためのもの！

まず、テンプレート構文とは何かというところから解説していきます。

テンプレート構文はVue.jsの基本となるので、しっかりと覚えておきましょう。

テンプレート構文ってなに？

テンプレート構文とは名前の通り、テンプレートを作るためのものです。

ではテンプレートとは何なのかというと、こちらです。

<div id="app">
  <p>message</p>
  <p>{{ message }}</p>
</div>

こちらがテンプレートになります。

HTMLのようですが、あくまでこれはVue.jsのテンプレートになります。

このテンプレートを作るために使用するのがテンプレート構文になります。

テンプレートは最終的にVue.jsによってHTMLへと変換されます。

データを描画するためには二重中括弧を使用する！

前回のHello World編でも解説したのですが、改めて解説します。

あわせて読みたい

サンプルコードから基礎を学ぶ！Vue.js入門講座！【Hello World編】

データを描画するためには二重中括弧{{ }}を使用します。

テンプレート内でよく使用されるものですね。

keyを指定することでvalueを取得できる

data内で定義されているプロパティのkeyを{{ }}内で指定することで、valueを取得することができます。

こちらは第１回のサンプルコードと同じものになります。

{{ }}内でmessageというkeyを指定することによって、Hello World!というvalueを取得できていますね。

{{ }}の外ではmessageというテキストがそのまま表示されます。

{{ }}内ではJavaScriptが使用できる

実はこの{{ }}内ではJavaScriptが使えます。

では実際にJavaScriptを使ってみましょう。

data内でnumberという数値を定義して、{{ }}内で+1しています。

numberは3と定義したのですが、表示は4となっていますね。

このように{{ }}内ではJavaScriptが使用できます。

ただし、ここで使えるのは単一の式のみとなります。

関数を定義するときはmethodsを使用する！

dataと同じように関数を使用したい場面があると思います。

そんなときにはmethodsプロパティを使用します。

dataプロパティと同じようにmethodsプロパティに定義します。

methodsは関数なので、function(){}を定義する必要があります。

このようにfunction(){}は省略して書くこともできます。

Vueインスタンス内でプロパティにアクセスするときはthisを使用する！

methodsで定義した関数の中で、dataの値を使いたいときがあります。

そんなときはthisを使用します。

テンプレート構文内でプロパティへアクセスする場合は不要なのですが、Vueインスタンス内の場合にはthisというものを付ける必要があります。

このようにthisを使用することで、各プロパティへアクセスできるようになります。

まとめ：これがテンプレート構文の基本！

これがテンプレート構文の基本になります。

Vue.jsはシンプルなので、ごちゃごちゃしてなくて良いですね。

今回の内容はVue.jsの基礎的な部分で、これからも必ず使用することとなります。

忘れないようにしっかりと覚えておきましょう！