VueJs数据不会显示

Question

我使用Django和VueJs。

我尝试在Django模板中使用Vue但是当我尝试从我的脚本中显示数据时没有出现。

这是我的html文件：

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

在我的app.js中：

{{1}}

我的脚本已加载，但Hello Vue！不会出现。

Answer 1

您的数据

 data: function () {
  return {
    messages: 'Hello!'
  }
 }

应该是

'dev_mode' => false

Answer 2

正如在另一个答案中指出的那样：下面的工作示例：

new Vue({
    el: '#app',
    data: () => {
      return {
    	  message: "hello world"
      }
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="app">
  Message: {{ message }}
</div>

Answer 3

似乎Vue JS分隔符{{＆}}与Jinja模板分隔符一起崩溃。解决方法就是更改定界符。

new Vue({
    delimiters : ['[[',']]'],
    el: '#app',
    data: () => {
      return {
         message: "hello world"
      }
    }
  })

在这里，我将定界符更改为[[＆]]。因此，您可以像这样使用它：

<div id="app">[[message]]</div>