事象 : 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>
<!--...省略...-->
おっ、表示された。
