事象 : CDNを使ってVueを表示できない

はじめてのVue.jsにチャレンジしようと思って、本に載っているサンプルコードをHTMLファイルに書いてブラウザで表示してみた・・・が、{{ message }}がそのまま表示されている。

<!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">
    {{ message }}
  </div>
  <script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
  </script>
</body>
</html>

原因 : CDNの参照先はVue3だから

参考元にした本に書いてあったコードは、Vue2の書き方。
CDNの参照先は、Vue3であった。
CDNの「https://unpkg.com/vue 」をブラウザでアクセスするとリダイレクトされて「https://unpkg.com/vue@3.2.31/dist/vue.global.js 」になる、というわけでCDNが見ているVueのバージョンは3。

そして、書き方は変わったようだ。
参考 : はじめに | Vue.js

// Vue2の書き方
var app = new Vue({...})
// Vue3の書き方
const app = {...}
Vue.createApp(app).mount('#app')

対応 : Vue3の書き方に変える

ど素人的に新しいも何も・・・何もしりませぬ。

<!--...省略...-->
  <script>
    const app = {
      data() {
        return {
          message: 'Hello Vue!'
        }
      }
    }

    Vue.createApp(app).mount('#app')
  </script>
<!--...省略...-->

おっ、表示された。