Vue.jsのテンプレート構文についてその1

テンプレート構文とは？

テンプレート構文とは、Vue.jsにおいてHTMLを描画するテンプレートを書くための構文。以下のような部分のこと。

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

あくまでもこれはVue.jsのテンプレート構文を用いたテンプレートを記述しているのであって、HTMLを記述しているわけではない。

テンプレートを最終的にVue.js側がHTMLを出力し、ブラウザがレンダリングしている。

テンプレートを使用するためには以下のようにnew Vueを用意する必要がある。

new Vue({
  el: '#app',
  data: {
    message: 'Hello World!'
  }
})

elプロパティでVue.jsで扱う部分を指定する。

dataプロパティでデータを設定する。

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

出力結果：

Hello World!

例：

new Vue({
  el: '#app',
  data: {
    number: 5
  }
})

<div id="app">
  <P>{{ number + 2 }}</p>
</div>

出力結果：

例：

new Vue({
  el: '#app',
  data: {
    ok: true
  }
})

<div id="app">
  <P>{{ ok ? '◎' : '×'}}</p>
</div>

出力結果：

◎

ok: trueをfalseに変えると×が表示される。

例：

new Vue({
  el: "#app",
  data: {
    message: "Hello World!",
  },
  methods: {
    goodMorning() {
        return 'Good Morning';
    }
  }
})

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

出力結果：

Hello World!
Good Morning

※メソッドの場合は()が必要。

※メソッドの場合は二重中括弧の中に単一の式のみ書ける。(varなどは使用できない。)

以下のようにmessageだけでは動かない。

new Vue({
  el: "#app",
  data: {
    message: "Hello World!",
  },
  methods: {
    goodMorning() {
        return message;
    }
  }
})

thisをつけることによってアクセスできるようになる。

new Vue({
  el: "#app",
  data: {
    message: "Hello World!",
  },
  methods: {
    goodMorning() {
        return this.message;
    }
  }
})

出力結果：

Hello World!

テンプレート内ではthisは不要。

インスタンス内で自身のインスタンスにアクセスする場合には必ずthisをつける。

※cssを別に当てています。全てのコードはEdit in JSFiddleより確認できます。

その2はこちら