Vue.js hello world 不会渲染答案

【问题标题】：Vue.js hello world won't renderVue.js hello world 不会渲染
【发布时间】：2016-09-15 15:24:17
【问题描述】：

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

Vue 版本：1.0.26

这是html代码：

<!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>

这是 app.js 代码：

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

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

控制台没有错误

我做错了什么？

【问题讨论】：

控制台有错误吗？
控制台中没有错误。感谢您的帮助。
是缺少t 的问题吗？包含它后是否有效？
它解决了静态 html 的问题。

标签： javascript vue.js

【解决方案1】：

<script src="app.js"></scrip>

你有一个错字。结束标记中缺少 t。因此，app.js 脚本将永远不会加载。

可能检测到这一点的方法：

查看浏览器中的“开发者工具网络”选项卡。您不会看到对app.js 的请求
Validate你的 HTML

【讨论】：

【解决方案2】：

您知道 - Vue 组件的 data 属性应该是返回 Object 的 function

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

见：Vue JS Docs

【讨论】：