JavaScript+Vueを使って{{変数}}でデータが表示されない

状況
Webアプリ初心者です。vueを学習しております。Vue機能で{{変数}}で内容を表示しようとしていますが表示されません。
webでサンプルをコピペして実行しても同じ現象です。
拡張子をhtml,mst,ejsで試しましたが解決しません。
画面上には{{変数}}が直接表示される状況です。
似た様な質問がteratailにありましたがその内容とも異なります。

webエンジンはmac safariです。
試したソースは以下です。
初歩的なミスなのかと想いますがよろしくお願いします

test02.html

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8">  <title>TEST02</title> </head> <body> <div id="app">TEST02(html):{{message}}</div>  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>  <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </body> </html>

行動規範の内容に同意します

回答3件

ベストアンサー

こんにちは。
</script>で閉じていないからですかね。

こちらMacがないんで、Win10+Chromeですが貼っていただいたコードだと変数は出ません。
補完すると出てきます。

投稿2021/01/17 02:53

退会済みユーザー

総合スコア0

退会済みユーザー

2021/01/17 02:55

あ、回答被っちゃいましたね。すみません。。

行動規範の内容に同意します

scriptタグが閉じられていないため、構文エラーで表示ができていないのだと思います。

ご参考になれば

HTML
1<script>
2var app = new Vue({
3  el: '#app',
4  data: {
5    message: 'Hello Vue!'
6  }
7})
8</script> // scriptタグが閉じられていませんでした。

投稿2021/01/17 02:47

Twoshi

総合スコア354

fukuro

2021/01/17 04:04

ありがとうございました。その通りでした。サンプルをコピペしたつもりで、上手くいかないのは環境だろうと思い込みチェックが甘かったです。実は、本件は別の問題がありました。アプリ側で同じ現象があり少し大きいので、web上のサンプリで確認したものでした。この結果、アプリ側には</script>が抜けているなどは見つかりませんでした。もう１つの原因は、アプリ側の拡張子をmstにしていた事でした。こちらもmstからhtmlにする事で表示できました。ありがとうございました。

行動規範の内容に同意します

ご指摘いただいた様に</script>抜けが原因でした。
もう一件、同じ現象のデータがありましたが、こちらはHTMLファイルの拡張子がmstを使用していたことも原因で、htmlにすることで解決しました。

投稿2021/01/17 04:06

fukuro

総合スコア3