ふりぶろぐ
Web Engineer's Blog
JavaScript

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

Vue.jsの基礎を知りたい!
とりあえず動かしてみたい!
基本的なことは解説してほしいな。

このようなご希望にお応えします。

この記事の内容
  • テンプレート構文とはテンプレートを作るためのもの!
  • データを描画するためには二重中括弧を使用する!
  • 関数を定義するときはmethodsを使用する!
  • Vueインスタンス内でプロパティにアクセスするときはthisを使用する!

超初心者向けVue.js入門講座です。
一緒にVue.jsを勉強して、Vue.jsを楽しみましょう!

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

読んでほしい人
  • Vue.jsが初めての人
  • Vue.jsを復習したい人
  • Vue.jsを動かしてみたい人

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

Static website

まず、テンプレート構文は何かというところから解説していきます。
テンプレート構文はVue.jsの基本となるので、しっかりと覚えておきましょう。

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

テンプレート構文とは名前の通り、テンプレートを作るためのものです。
ではテンプレートとは何なのかというと、こちらです。

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

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

このテンプレートを作るために使用するのがテンプレート構文になります。
テンプレートは最終的にVue.jsによってHTMLへと変換されます。

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

Conference

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

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

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

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

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

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

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

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

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

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

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

processing

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

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

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

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

Server status

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

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

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

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

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

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

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

ABOUT ME
りーふ
たまにブログを書いてるWebエンジニア。 サーバーサイドメインでインフラとフロントエンドもたまにやります。 Javaが得意。 Play Frameworkが好き。 本業は迷惑をかけない程度に手を抜くスタイル。 意識高い系は苦手。