61458


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

以下はHTMLファイルです。

[code]

    <!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>
    
[/code]

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

[code]

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


CC BY-SA 4.0
2019-12-15T09:25:51.077
61457
2019-12-16T02:16:08.543
2019-12-16T02:16:08.543
3060
36906
question
html5 vue.js
Vue.jsのマスタッシュ構文の中身が反映されないです。どうすれば反映されるのでしょうか？


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

> ## テンプレート構文[[1]](https://jp.vuejs.org/v2/guide/syntax.html)
>
> Vue.js では HTML ベースのテンプレート構文を使っているので、Vue インスタンスのデータと描画された DOM
> を宣言的に対応させることができます。全ての Vue.js テンプレートは、仕様に準拠しているブラウザや HTML パーサによってパースできる有効な
> HTML です。
[code]

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

[code]

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
    <div id="app">
      <p>
        {{ message }}
      </p>
    </div>
[/code]


CC BY-SA 4.0
2019-12-15T09:50:14.177
61458
2019-12-15T09:50:14.177
32986
61457
answer