概要

ここではVue.jsの基本的な使い方について記載します。

基本コード

以下のコードを例に挙げて説明していきます。

<!DOCTYPE html>
<html>
    <head>
        <title>My First Vue App</title>
        <script src="https://unpkg.com/vue"></script> 　  ----- ①
    </head>
    <body>
        <h1>Vue.js</h1>
        <div id="app">
            {{ text }}                                   ----- ②
        </div>

        <script>                                         ----- ③
            var app = new Vue({
                el: '#app',
                data: {
                    text: 'Vue Test'
                }
            })
        </script>
    </body>
</html>

Vue.jsに関係している部分はコードの①,②,③の部分になります。
- ①ではVue.jsを読み込んでいます。
- ②で変数に入れられた文字列の表示を行います。
- ③ではVueオブジェクトの定義をしています。
el:というプロパティでVueオブジェクトの対象となるものを指定します。

まとめ

Vue.jsはhtmlに埋め込むことで非同期処理を実現できます。
今回はhtmlファイルに書き込むような形でしたが、複雑な処理の場合はjs用にファイルを切り分けて実装しても良いと思います。

Vue.jsの仕組み

概要

基本コード

まとめ