Vueインスタンス【現役エンジニアが解説】

PROGRAM

今回は、Vueインスタンスについて、簡単に解説していきます。

Vueインスタンスとは

Vue.jsではVueインスタンスを作成できます。

var app = new Vue({
    // 各オプション
})

具体的には、上記のようにnew Vue()で作成することが可能です。

なお、引数の{}の中には様々なオプションを入れることになります。

Vueインスタンスの作成

実際にVueインスタンスを作成してみましょう。

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

<script>
var app = new Vue({
    el: '#app',
    data: {
        message: 'ほげ'
    }
})
</script>

上記のコードでは、Vueインスタンスを作成し、DOMと連携しています。

これによって、appのdataのmessageプロパティを変えることですみやかにappというidの要素の中のメッセージも変わります。

インスタンスライフサイクルフック

Vueインスタンスにはライフサイクルがあり、特定の段階で関数を実行できます。

var app = new Vue({
    el: '#app',
    data: {
        message: 'ほげ'
    },
    created: function() {
        console.log('インスタンスが作成されました');
    },
    destroyed: function() {
        console.log('インスタンスが削除されました');
    }
})

上記のように、createdでインスタンス作成時、destroyedでインスタンス削除時に関数を実行可能です。

app.$destroy()

どちらもブラウザのConsoleで動作を確認できますが、destroyedに関しては上記のコマンドで削除することで確認できます。