Vuejs の基礎を理解する【マスタッシュ構文編】

最近流行りのvuejsを使用してみました。 その中で特徴的なマスタッシュ構文、データバインディング構文などをvuejsを触ったことがない人でも理解しやすいよう、まとめてみようと思います。 今回は、「マスタッシュ構文」のみについて書きます。 基本構文の確認のみなのでCDNを使用しようと思います。 そのため、何かをインストールしたりする必要はありません。

マスタッシュ構文

まずは、簡単な文法から見ていきます。

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id="app">
  {{test}}
</div>
<script>
var vm = new Vue({
    el: "#app",
    data: {
        test: 'Hellow world!!',
    },
});
</script>

こちらを実行すると、ブラウザ上に「Hellow world!!」という文字列が表示されたと思います。 これは、testというパラメータに入っていた文字列が表示されており、その表示部分が**{{test}}**という記述です。 この構文を使用することで、testパラメータからのデータの取得や更新を簡単に行え、表示内容が簡単に切り替えることができます。 例えばですが、以下のように記述することで、testの内容（Hellow world!!）を書き換えることができます。

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id="app">
  {{test}}
  <button v-on:click='sample'>ボタン</button>
</div>
<script>
var vm = new Vue({
    el: "#app",
    data: {
        test: 'Hellow world!!',
	},
	methods: {
		sample: function(){
			this.test = "Goodbye world!!"
		}
	}
});
</script>

他にもこんな書き方をすれば、ボタンをクリックするたびにカウントすることもできます。

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id="app">
  <button v-on:click="counter += 1">{{counter}}</button>
</div>
<script>
var vm = new Vue({
    el: "#app",
    data: {
        counter: 0,
	},
});
</script>

慣れないと少し扱いづらそうですが、慣れてしまえばかなり便利そうですね。 ちなみに余談ですが、「マスタッシュ構文(moustache)」というのは、英語で「口ひげ」のことを指すそうです。 {{}}　これを90度回転させると、口ひげに見えるからだとか…。

イメージこんな感じなんですかね。 いや～、ちょっと無理があるような。