1. Vue.jsを使ってみよう！

Vue.jsを使うにあたって、scriptタグでライブラリを読み込みます。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

これでVue.jsを使用することができるようになったので、次に進みます！

2. インスタンスを作ろう！

Vueは、Vue関数でVueインスタンスを作成することによって起動されます、これを実行するためには？
JavaScriptの特性として、new演算子を使えばインスタンスを作ることができますのでやってみましょう！

インスタンスが分からないという方はこちら見れば理解できるかも・・・？→https://wa3.i-3-i.info/word1118.html

var vm = new Vue({

})

これで準備ができました！

3.データを作ろう！

先ほどのインスタンス、あれを作る時に引数にオプションを渡すことでデータを定義することができます！

ここでは試しにお決まりの、Hello World!が入ったHelloWorldって名前のデータを定義してみましょう！

var vm = new Vue({
  data:{ HelloWorld: 'Hello World!'}
})

こちらdataオプションというものを使って、インスタンスの中のデータを定義しました！
ほぼ主要のオプションだと思うので是非覚えてください！
data: {プロパティ名: 値}

4.HTMLテンプレートを作ってみよう！

では早速先ほどHelloWorldに格納したHello World!を表示するための準備をしましょう！
その為には、HTMLテンプレートを作る必要があります。
Vue.jsでは({{ }}) ←を使ってインスタンスのデータを参照することができます。
では実際にやってみましょう！

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="test">
        <p>{{HelloWorld}}</p>
    </div>
    <script>
        var vm = new Vue({
            data: {
                HelloWorld: 'Hello world!'
            }
        });
    </script>
</body>

これでひとまずHTMLテンプレートの作成は終了です。
次にテンプレートとインスタンスを紐付けしていく方法を紹介します！

5.テンプレートとインスタンスを紐付けよう！

先ほどの順序でやったのに、あれ？HelloWorld!表示されないんだけど・・・ってなったと思います。
それは何故かというとテンプレートとインスタンスがくっついてなかったからなんです！バグやミスではありません！

そもそも、Vueの処理って、Vインスタンスを作ってどの要素と繋げるか（このことをマウントと呼ぶ）をしないと始まりません。
このマウントするためのオプションがel(elementの略)で指定した要素がマウントの対象になるわけです。
elを使ってHelloWorld!を表示させていきましょう～


var vm = new Vue({
            el: '#test',
            data: {
                HelloWorld: 'Hello world!'
            }
        });

このようにしたらブラウザを更新して確認してみてください！
HelloWorld!と表示されているはずです。

またこのelオプションはCSS、セレクタ、DOM要素を指定することができます。今回はidのtestを持つ要素を指定しました！

6.最後に

ここまでお疲れさまでした！
拙いかもしれませんが、できる限り分かりやすいように書いてみました！
こうして自分でアウトプットすることで頭に残る感覚がありますね・・・！
これを機にこれからもQiitaの執筆をしていきたいと思います´▽｀

ここまで読んでいただきありがとうございました！

はじめてのVue.js