Question

我的VueJS代码未在DOM上呈现数据。它发出Ajax请求，正确获取数据，但不会呈现给DOM。

为了隔离，我尝试了最基本的DOM渲染示例，但仍然无法正常工作。

代码如下：

<!DOCTYPE html>
<html>

<head>
  <title>My first Vue app</title>
  <script src="https://unpkg.com/vue"></script>
</head>

<body>
  <div id="app">
    {{ message }}
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })
  </script>
</body>

</html>

将该页面放到网络服务器上并用chrome打开后，这就是我在“查看源代码”中看到的内容：

<!DOCTYPE html>
<html>
<head>
  <title>My first Vue app</title>
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <div id="app">

  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })
  </script>
</body>
</html>

与Firefox相同。它可以在JSFiddle上运行，但不能在本地运行。这是怎么回事？

Answer 1

如jcubic的评论中所述，问题在于django正在提供文件，该文件在解析模板时正在删除标签{{ message }}。

解决方案是在django不应更改任何内容的地方添加{% verbatim %}标签。

谢谢！

VueJS Hello World示例未呈现

1 个答案: