Vue.jsのローカル環境での使用方法

初めに

　とあるインターン先でVue.jsを使うことになり、その勉強のメモのために記事を投稿してみました。
まず、Vue.jsとはJavascriptのフレームワークのことで、個人的な意見として、他のフレームワークに比べて内容が理解しやすいと感じました。
　Vue.jsの勉強にはjsfiddleという無料で使えるサイトを使う場合もありますが、今回は自分のテキストエディタで使用する方法を解説していきます。

方法

　まずは、Vue.jsの公式サイトにアクセスし、ページ内でインストールと検索してください。その後、下のほうに移動すると、直接読み込み
あるため、開発バージョンをダウンロードしてください。
　ここからは、エディタを使っていきます。先ほどダウンロードしたものと同じ場所にHTMLファイルを作成します。そして、そのHTMLファイルのbodyタグ内の1番初めに、

<script src = "vue.js"></script>

bodyタグ内の最後に

<script></script>

を入れ、この中にVue.jsのインスタンスを作成していきます。例として、

new Vue({
            el: '#app',
            data: {
                url: 'https://jp.vuejs.org/',
                toggle: true,
                languages: ['Javascript' , 'Ruby' , 'Python']
            }
        })

と記述します。では、実際に動くか確かめてみましょう。先ほど記述した2つのコードの間に

<div id = "app">
    <p v-if = "toggle">
        <a v-bind:href="url">Vue.js</a>
    </p>

    <ul>
        <li v-for = "language in languages">
            {{ language }}
        </li>
    </ul>

    <p>
        <input type = "text" v-model = "message">
    </p>
</div>

と入れると、結果のように表示されるので、成功してといえます。

終わりに

記事作成には不慣れなもので、至らない点が多々あると思いますので、何かご意見等があればご連絡ください。