Vue.jsの特徴

段階的に拡張できる。
- プログレッシブ(1ページからnページまで段階的に作れる。)
コンポーネント分割
- メンテしやすい
SPAが作れる
- ユーザービリティ向上

インストール(CDN)

ここでは2.6.11を指定してhead内に保存している。

Hello Vue!と表示されれば成功。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{ message }}
      </div>

      <script>
        let app = new Vue({
            el: '#app',
            data(){
                return{
                    message:'Hello Vue!'
                }
            }
          })
      </script>
</body>
</html>

API(elとdata)

Vueをインスタンス化した時のelやdataなどのことをAPIをいう。
- API一覧


<div id="app"> //elで指定した仮想DOMの範囲
    {{ message }} //dataで指定したkeyをマスタッシュで囲む。
 </div>
 <script>
    let app = new Vue({
        el: '#app', //仮想DOMの範囲を指定する。
        data(){ //elで指定した仮想DOMの範囲でオブジェクト形式でデータをセットする。
            return{
                message:'Hello Vue!'
            }
        }
        })
  </script>

仮想DOM

DOM(Dockument Object Model)
- HTMLをプログラムから操作できる仕組み
- DOMはツリー状の構造となっている。

以下、検証ツールで確認することもできる。

 const html = document.querySelector('html')
 console.dir(html)

仮想DOM
- 旧DOM（変更前）と新DOM(変更後)のDOMを比較し、変更があった差分だけを実際のDOMに反映する。
  - 処理が速くなるメリットがある。

参考

【Vue.js2&Vue.js3対応】基礎から【Vuetify】を使った応用まで！超初心者から最短距離でレベルアップ
 vue.js公式リファレンス

【Vue.js 入門】Vueの特徴

Vue.jsの特徴

インストール(CDN)

API(elとdata)

仮想DOM

参考