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

2020年1月9日

最近流行りの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度回転させると、口ひげに見えるからだとか...。