【第2回】サンプルコードから基礎を学ぶ！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へと変換されます。

第１回でも解説したのですが、改めて解説します。

データを描画するためには二重中括弧{{ }}を使用します。
テンプレート内でよく使用されるものですね。

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

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

{{ }}内でmessageというkeyを指定することによって、Hello World!というvalueを取得できていますね。
{{ }}の外ではmessageというテキストがそのまま表示されます。

実はこの{{ }}内ではJavaScriptが使えます。
では実際にJavaScriptを使ってみましょう。

data内でnumberという数値を定義して、{{ }}内で+1しています。
numberは3と定義したのですが、表示は4となっていますね。

このように{{ }}内ではJavaScriptが使用できます。
ただし、ここで使えるのは単一の式のみとなります。

dataと同じように関数を使用したい場面があると思います。
そんなときにはmethodsプロパティを使用します。

dataプロパティと同じようにmethodsプロパティに定義します。
methodsは関数なので、function(){}を定義する必要があります。

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

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

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

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

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

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

今回の内容はVue.jsの基礎的な部分で、これからも必ず使用することとなります。
忘れないようにしっかりと覚えておきましょう。