Vue.js hello world 不会渲染

Question

我正在尝试在 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 文件都被加载了。

控制台中没有错误

我究竟做错了什么？

Answer 1

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

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

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

查看浏览器中的 Developer Tools Network 选项卡。 您不会看到对app.js的请求
验证您的 HTML

Answer 2

就像你知道的那样Vue组件的data属性应该是一个返回Object的function

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

请参阅： Vue JS 文档

Vue.js hello world 不会渲染

问题描述

2 个解决方案

解决方案1
8 已采纳

解决方案2
0 2017-12-28 17:08:19

Vue.js hello world 不会渲染

问题描述

2 个解决方案

解决方案1 8 已采纳

解决方案2 0 2017-12-28 17:08:19

解决方案1
8 已采纳

解决方案2
0 2017-12-28 17:08:19