1

Vue.jsのマスタッシュ構文の中身が反映されないです。具体的には、messageと表示されます。
どうすれば反映されるのでしょうか?ご教授願います。

以下はHTMLファイルです。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>
            {{ message }}
        </p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>
</html>

以下はVue.jsを記述したファイルです。

var app = new Vue ({
    el: '#app',
    data: {
        message: 'Hello Vue.js!'
    }
})

1 件の回答 1

3

「Vue.js を記述したファイル」を読み込んでいないため、マスタッシュ構文によるテキストの展開が行われていないのではないでしょうか。以下は当該ファイルの内容をインラインスクリプトとして記述した動作例ですが、正常に動作しています。

テンプレート構文[1]

Vue.js では HTML ベースのテンプレート構文を使っているので、Vue インスタンスのデータと描画された DOM を宣言的に対応させることができます。全ての Vue.js テンプレートは、仕様に準拠しているブラウザや HTML パーサによってパースできる有効な HTML です。

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <p>
    {{ message }}
  </p>
</div>

1
  • 様 ありがとうございました!インラインスクリプトではなく、Vue.jsで記述したファイルと別々にしたかったのです。<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>の下に<script src="vue.js"></script>というVue.jsで記述したファイルを読み込む記述をしましたら、'Hello Vue.js'という表示をさせることに成功しました!
    – atago_IT
    2019年12月15日 12:40

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

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