0

Vue.jsの学習を始めた超初心者です。
参考書を片手に理解しようとしているのですが、
参考書に掲載されているソースコードを書いても正しい出力結果が表示されません。

具体的には

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="https://unpkg.com/vue@3/dist/vue.global.js" type="text/javascript"></script>
</head>
<body>
  <div id="sample">
    ただいまの時間は{{time}}です。
  </div>
</body>
  <script type="text/javascript">
    Vue.createApp({
      el: '#sample',
      data: {
        time: new Date().toLocaleTimeString()
      }
    })
  </script>
</html>

参考書によれば、このようにコードを書けば、出力結果は

ただいまの時間はH:mm:ssです。

となるようなのですが、実際の出力内容は

ただいまの時間は{{time}}です。

と波かっこがそのまま表示されてしまいます。
なぜなのでしょうか。参考書に掲載されているコードが間違っているのでしょうか?

わかる方は教えていただけると幸いです。

4
  • 「参考書に掲載されているソースコード」を正しく入力されていないのでは? 例えば</body>がHTMLソースの途中にありますが、それは最終行の</html>の直前に記述されるものでは?Vue.js 現在時刻の表示 ~時計~, Vue.jsを使ってデジタル時計を作る方法を解説, 初心者向け。Vue.jsのデジタル時計アプリの作り方を詳しく解説 それから書籍の内容を基にしているなら、書籍の名称や掲載ページ等の情報を記述してください。他にもこちらのヘルプ記事を参考に。良い質問をするには?, 再現可能な短いサンプルコードの書き方
    – kunif
    Commented 2023年6月15日 16:42
  • コメントありがとうございます。参考書籍は『Vue.js』ポケットリファレンス(技術評論社:2023年5月2日 初版)。「3.3 HTMLに直接Vue.jsを組み込む」のページを参照しました。 スペルミスがないことは何度も確認しましたがダメでした。 また、</body>と</html>の間に<script>が入っているのも参考書籍掲載のコードの通りです。 Commented 2023年6月15日 17:02
  • 約2ヵ月前に出たばかり Vue.jsポケットリファレンス のようなので、そのうちサポートページとか正誤情報とかの追記が出るのでは? 貴方自身で出版社に問い合わせてみても良いと思われます。
    – kunif
    Commented 2023年6月15日 17:19
  • 深追いして調べてみました。本書は「Vue.js3対応」と謳っているにも関わらず、今回取り上げたサンプルコードはVue.js 2系では正常に処理されるけど、3に対応していないものでした。 「Vue.js3対応」と謳われているので、当然サンプルコードもVue.js3に対応しているものと思っていましたが、そうではなかったみたいです。 Commented 2023年6月15日 17:26

1 件の回答 1

0

JavaScriptコードの部分を次のようにしてください。

Vue.createApp({
  data() {
    return {
      time: new Date().toLocaleTimeString()
    };
  }
}).mount('#sample');
2
  • ありがとうございます。 記載していただいたコードに変えたところ、意図通りの出力となりました。 やはり参考にした書籍のコードが間違っていたのでしょうか..... 2023年5月刊と新しめの書籍なので、問題ないだろうと思っていたのですが。 Commented 2023年6月15日 17:08
  • Vue2 → Vue3の変更で、elパラメータではDOMにマウントできなくなっていていました。参考にした書籍が「Vue.js3対応」と書かれていたので、掲載されているサンプルコードも3に対応していると思っていましたが、Vue.js2用のコードでした。それがわからず、CDNでVue.js3を読み込んでいたせいで意図した結果にならなかった、というのが原因でした。 Commented 2023年6月15日 17:34

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。