Vueのアプリがロードされません

私が作業を取得しようとしている、単純な「Hello World」のVueJSアプリがあります：オフ、Vueのアプリがロードされません

<!doctype html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <script type="text/javascript" src="https://unpkg.com/vue"></script>  
</head> 
<body>  
    <div id="app"> 
    Message: {{ message }} 
    </div>  
<script> 
    var vm = new Vue({ 
    el: "#app", 
    data: { 
     message: "Hello, world" 
    } 
    }); 
</script> 
</body> 
</html>

私は、ブラウザでこのファイルを読み込みます私のローカルディスク（すなわち：file：///home/user/vue-project/index.html）がロードされ、 "Hello、world"が表示されます。

しかし、同じファイルをpythonフラスコ開発サーバーやgunicornを通じて提供しようとすると{{message}}は空白になります。

何が起こるのか知っている人はいますか？

出典

2017-05-08 blindsnowmobile

（私は[[ message ]]を使用）、代替区切り文字を使用するようにVUEを設定する必要がありますか？変数は必ずガンコーンで共有されるわけではありません！ – Luke

'{{'と '}}'は可変レンダリングのためにフラスコで使用されていますが、 '[[message]]' –

フラスコは、あなたがメッセージを定義いけないので、それは単に空の文字列です...その解析の区切り文字として

render("mytemplate.html",message="Hello")を{{ variable }}を使用していますJinja2の持つその変数にはJavaScriptが処理される任意の前に「こんにちは」とすべての{{ message }}のブロックを置き換えますレンダリング...あなたは多分gunicornスレッドを使用していることを忘れてしまいました

<!doctype html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <script type="text/javascript" src="https://unpkg.com/vue"></script>  
</head> 
<body>  
    <div id="app"> 
    Message: [[ message ]] 
    </div>  
<script> 
    var vm = new Vue({ 
    el: "#app", 
    delimiters = ['[[', ']]'], 
    data: { 
     message: "Hello, world" 
    } 
    }); 
</script> 
</body> 
</html>

出典

2017-05-08 00:38:12

Ackのような別の区切り文字を使うようにvueを設定する必要があります。ありがとう。 – blindsnowmobile

ありがとう！言及すると、デリミタは次のように設定する必要があります：デリミタ：[[['、']] '] – Greg

Vueのアプリがロードされません

答えて

関連する問題