javascript - vue.js 内容渲染问题

Question

我刚刚学习 Vue.js，但在渲染方面遇到了一些问题。假设我有以下几行代码:

index.html

<div id="header">
  <h5>{{pageName}}</h5>
  <p>{{pageSubtitle}}</p>
</div>

app.js

var header = new Vue({
  el: '#header',
  data: {
    pageName: 'CuteCat',
    pageSubtitle: 'World of cats'
  }
});

当我加载页面时，CuteCat 和 World of cats 完美显示，但当我查看源代码时，这就是我得到的:

<div id="header">
  <h5>{{pageName}}</h5>
  <p>{{pageSubtitle}}</p>
</div>

如何将 View 源中的 mustache 括号替换为其声明值，如下所示？

<div id="header">
  <h5>CuteCat</h5>
  <p>World of cats</p>
</div>

Answer 1

正如 @yuriy636 告诉您的那样，这无论如何都不是错误。

Vue 是一个 JavaScript UI 框架，在客户端(即浏览器)中发挥其魔力。在源 View 中，您可以看到从服务器加载的内容，并且您看到的正是这些内容。

如果您禁用 session 的 JavaScript 并重新加载应用程序，双 mustache 将可见。因为当JS开启时它们就被Vue取代了。

编辑:在 DOM 中，但是 Vue 渲染后一切正常，正如您所期望的那样。