Vue.jsの基礎を知りたい!
とりあえず動かしてみたい!
基本的なことは解説してほしいな。
このようなご希望にお応えします。
- テンプレート構文とはテンプレートを作るためのもの!
- データを描画するためには二重中括弧を使用する!
- 関数を定義するときはmethodsを使用する!
- Vueインスタンス内でプロパティにアクセスするときはthisを使用する!
超初心者向けVue.js入門講座です。
一緒に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へと変換されます。
データを描画するためには二重中括弧を使用する!

第1回でも解説したのですが、改めて解説します。
データを描画するためには二重中括弧{{ }}
を使用します。
テンプレート内でよく使用されるものですね。
keyを指定することでvalueを取得できる
data内で定義されているプロパティのkeyを{{ }}
内で指定することで、valueを取得することができます。
こちらは第1回のサンプルコードと同じものになります。
{{ }}
内で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の基礎的な部分で、これからも必ず使用することとなります。
忘れないようにしっかりと覚えておきましょう。