Question

我尝试在Vue.js网站上的入门文档中创建一个Hello world应用程序。一切看起来都不错，但文字没有显示在页面上，只有html代码。

Vue版本：1.0.26

这是html代码：

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue!</title>
  </head>
  <body>
    <div id="app">
      {{message}}
    </div>
    <script src="vue.js"></script>
    <script src="app.js"></scrip>
  </body>
</html>

＆＃13;

这是app.js代码：

＆＃13;

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

＆＃13;

当然，vue.js是vue.js源文件，并且都加载了两个js文件。

控制台中没有错误

我做错了什么？

Answer 1

history.pushState

你有一个错字。结束标记中缺少// Configure $locationProvider html5Mode app.config(['$locationProvider', function($locationProvider) { $locationProvider.html5Mode({ enabled: true, requireBase: false, rewriteLinks: false }); }]); // In controller $window.history.pushState(null, 'Page Title', '/some_new_url');。因此，<script src="app.js"></scrip>脚本永远不会加载。

可能检测到这种情况的方法：

查看浏览器中的“开发人员工具网络”标签。您无法看到t
Validate您的HTML

Answer 2

您知道 - data组件的Vue道具应为function，返回Object

data () { return { message: 'Hello vue....' } }

请参阅：Vue JS Docs

Vue.js你好世界不会渲染

2 个答案: