私のアウトプットです。
Vue.jsも人気のフロントエンドフレームワークのはずですが
なぜかReact推しであるブログ記事やYouTubeが多いので
私自身、Vue.jsを学習する上で、理解しておきたいことをまとめました。
今回は、敢えてv2.6.11を前提に投稿いたします。
コード全体
<html>
<head>
<title>Hello Vue</title>
<!-- （1） CDNからのVueの読み込み -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
</head>
<body>
<!-- （5） Vueインスタンスの有効範囲ここから -->
<div id="app">
<!-- （6） マスタッシュ構文 -->
<p>Hello {{world}}</p>
<p>Counter: {{count}}</p>
<!-- （7） v-ifディレクティブ -->
<p v-if="count == 5">見えました！</p>
<!-- （8） v-modelディレクティブ -->
<input v-model="world"><br>
<input type="number" v-model="count" />
</div>
<script>
// （2） Vueインスタンスの作成
new Vue({
el: "#app", // （3） elプロパティ
data() { // （4） data()メソッド
return {
world: "Vue",
count: 0
}
}
})
</script>
</body>
</html>
Vue.jsの読み込み
<!-- （1） CDNからのVueの読み込み -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
（1）は、CDNで公開されているVue.jsを読み込んで実行する為のコードです。
プロトタイピングや学習を目的とする場合は、このCDNを使用するのが良さそうです。
Vueインスタンスの有効範囲
<body>の中の<script></script>を見ます。
<script>
// （2） Vueインスタンスの作成
new Vue({
el: "#app", // （3） elプロパティ
data() { // （4） data()メソッド
return {
world: "Vue",
count: 0
}
}
})
</script>
（2） は、new Vue()でVueインスタンスを作っています。
引数に渡しているオブジェクトがVueのコンポーネントになっています。
このオブジェクトを見ていくと、elプロパティ（3）と、data()メソッド（4）があります。
elプロパティはDOMに対して指定した値に該当するエレメントを見つけて
対象のエレメントが見つかった時にVue.jsのインスタンスとHTMLをマッピングするセレクタです。
data()メソッドはオブジェクトを返すメソッドとして定義しています。
このときのオブジェクトが持つプロパティ(（4）では、worldとcount)をVue.jsは監視し続けます。
この監視対象が変化したとき、必要に応じて画面への反映を即座に行ってくれます。
DOM上での変数展開
<body>の中の<div id="app"></div>を見ます。
<!-- （5）Vueインスタンスの有効範囲ここから -->
<div id="app">
<!-- （6） マスタッシュ構文 -->
<p>Hello {{world}}</p>
<p>Counter: {{count}}</p>
<!-- （7） v-ifディレクティブ -->
<p v-if="count == 5">見えました！</p>
<!-- （8） v-modelディレクティブ -->
<input v-model="world"><br>
<input type="number" v-model="count" />
</div>
これがVueインスタンスが有効な範囲です。
このid="app"で先ほど作ったVueインスタンスとHTMLをマッピングしていきます。
Vueインスタンスのelプロパティ指定と併せて、
別のidを指定したり、classで指定することも可能です。
<p>Hello {{world}}</p>（6）で使われている{{}}という構文はマスタッシュ構文と言います。
見た目が『口ひげ』に似ているからだそうです。
この中ではdata()の中のプロパティにアクセスができ、
data()の中にあるプロパティが変化すると、それに応じた結果が即座に反映されます。
v-if
<!-- （7） v-ifディレクティブ -->
<p v-if="count == 5">見えました！</p>
v-で始まる属性をVue.jsではディレクティブと言います。
このv-ifは条件付きレンダリングと呼ばれるディレクティブで、
v-ifの後に記述する条件に一致していればDOMにレンダリングされ、
不一致ならDOM上から消えるようになっています。
（言わば、『if文』ですね。）
今回の場合はcountプロパティの値が5の場合に
『見えました！』と表示されることになります。
v-model
<!-- （8） v-modelディレクティブ -->
<input v-model="world">
これは、双方向バインディングと言って、
<input>タグの様な入力を受け付けるタグに対して
data()プロパティを指定できます。
つまり、<input v-model="world">の場合は、
テキストボックスに値を入力すると
その値がdata()のworldに設定されることになります。
これにより、入力フォームのinputイベントを監視して、
data()のプロパティへ随時反応されていくというコードになります。
なお、Vue.jsではv-modelによってフォームと対応付けられているプロパティが認識されている為
識別用のクラスや名前を付与しなくても値の読み取りが可能です。
まとめ
（1）CDNからのVueの読み込み
CDNで公開されているVue.jsを読み込んで実行する為のコードです。
（2）Vueインスタンスの作成
new Vue()でVueインスタンスを作っています。
（3）elプロパティ
DOMに対して指定した値に該当するエレメントを見つけて
対象のエレメントが見つかった時にVue.jsのインスタンスとHTMLをマッピングするセレクタです。
（4）data()メソッド
オブジェクトを返すメソッドです。
（5）Vueインスタンスの有効範囲
id="app"でVueインスタンスとHTMLをマッピングしていきます。
（6）マスタッシュ構文
<p>Hello {{world}}</p>で使われている{{}}です。
（7）v-ifディレクティブ
v-ifの後に記述する条件に一致していればDOMにレンダリングされ、
不一致ならDOM上から消えるようになっています。
（8）v-modelディレクティブ
<input>タグの様な入力を受け付けるタグに対してdata()プロパティを指定できます。