初心者向け

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

vue-introductory-course-template-syntax

こんばんは!光です。

大手企業でWebエンジニアをやっています。

Webエンジニアを目指してプログラミングを勉強している初心者の方向けに情報を発信しています。

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

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

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

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

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

jsFiddleというオンラインエディタを使用しています。
>> jsFiddle

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

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

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

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

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

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

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

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

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

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

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

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

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

Hello World編はこちら!

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

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

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の基礎的な部分で、これからも必ず使用することとなります。

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