【Vue.js】Vueのテンプレート構文の基本的な書き方

Vue.jsはhtmlベースとなるテンプレート構文を使用しているのでVueインスタンスのデータと描画されたDOMを宣言的に対応させることが可能です。

テンプレート構文の基本的な形としてマッシュタグ構文（二重中かっこ）になります。

Vue.jsの処理はVueインスタンスを生成してDOM要素にマウントするところからスタートします。
マウントとは既存のDOM要素をVue.jsが生成するDOM要素で置き換える作業のことです。 

オプションオブジェクトのプロパティ

Vue.jsの基本

上記で紹介した「オプションオブジェクト」を使ってサンプルを紹介します。

プロパティにはそれぞれ役目があります。

elプロパティにはマウントさせる場所を指定します。

dataはインスタンスの中のデータを指定します。

methodsプロパティにはインスタンスの中にどんなメソッドがあるのかを指定します。

html

<div id="app">
        <p> {{ number }} </p>
        <p> {{ arrangement }} </p>     
        <p> {{ message }} </p>
        <p> {{ number * 2 }} </p>
        <p> {{ text }} </p>
        <input type="button" v-on:click="btnON" value="ボタン">
</div>

js

<script>
let vm = new Vue({
    el: '#app',
    data: {
                number: 100,
                text: 'ボタンを押す前',
                arrangement: ['a', 'b', 'c'],
                message: 'Hello World'
    },
        methods: {
                btnON: function() {
                        this.text = 'ボタンが押されました';
                }
        }
})
</script> 

Vue.jsの勉強におすすめしたい本

たった1日で基本が身に付く！Vue.js超入門

とにかく短い期間でVue.jsの基礎だけを覚えてしまいたい人におすすめの入門書です。

Vue.js入門 基礎から実践アプリケーション開発まで

Vue.jsを初心者レベルから実践まで徹底的にわかりやすく解説されている本です。

vueの書き方から適用例まで詳しく書かれているのでvue.jsを覚えたい人におすすめです。

僕もこの本をいまでも使っていますしVue.jsをはじめたときにこの本で勉強しました。