vue.js内容呈现的问题

Question

我刚刚学习了Vue.js，而且我在渲染时遇到了一些问题。 我们假设我有以下几行代码：

的index.html

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

app.js

CuteCat

当我加载页面时，World of cats和<div id="header"> <h5>{{pageName}}</h5> <p>{{pageSubtitle}}</p> </div> 显示得很完美，但是当我查看来源时，这就是我得到的：

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

如何使用声明的值替换视图源中的胡须括号？

unpivot

先谢谢！

Answer 1

就像@ yuriy636告诉你的那样，这绝不是一个错误。

Vue是一个JavaScript UI框架，在客户端（即在浏览器中）发挥其神奇作用。在源视图中，您可以看到从服务器加载的内容以及您看到的内容正是如此。

如果为会话禁用JavaScript并重新加载应用程序，则会显示双重胡须。因为当JS开启时它们被Vue取代。

编辑：在DOM中，但是在Vue渲染之后一切正常，就像你期望的那样。

Answer 2

尝试在模板中加载html。

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