我的 Vue Hello World 示例显示双括号，但未呈现文本
[英]My Vue Hello World example shows double brackets and not rendered text
问题描述
我正在努力学习Vue。 我从 alligator.io 的一个简单的 hello world 示例开始
<!DOCTYPE html>
<html lang="en">
<meta>
<meta charset="UTF-8">
<title>Hello World in Vue.js</title>
</meta>
<body>
<div id="hello-world-app">
<h1>{{ msg }}</h1>
</div>
<script
src="//cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js">
</script>
<script>
new Vue({
el: "#hello-world-app",
data() {
return {
msg: "Hello World!"
}
}
});
</script>
</body>
</html>
我也曾尝试使用我自己的来自 Vue 官方文档 Hello World 的文档来做这件事。 结果是一样的。 我的页面显示 {{ msg }} 而不是 Hello World。 在控制台中，它读取未定义 Vue。
演示：
new Vue({ el: "#hello-world-app", data() { return { msg: "Hello World!" } } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script> <div id="hello-world-app"> <h1>{{ msg }}</h1> </div>
2 个解决方案
解决方案1
1 已采纳 2020-03-05 11:56:57
你需要把vue.min.js url改成https，试试这个
<!DOCTYPE html>
<html lang="en">
<meta>
<meta charset="UTF-8">
<title>Hello World in Vue.js</title>
</meta>
<body>
<div id="hello-world-app">
<h1>{{ msg }}</h1>
</div>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js">
</script>
<script>
new Vue({
el: "#hello-world-app",
data() {
return {
msg: "Hello World!"
}
}
});
</script>
解决方案2
1 2020-03-05 11:57:32
问题在于您的 URL 快捷方式。 您只需按照评论中的说明在本地打开 html 文件。
代替
//cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js
和
https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js
它会起作用。 还要将<meta>...</meta>替换为<head>...</head> ，只是为了使您的 HTML 正确。
问题是 - 正如我已经说过的 - 您在本地打开文件，在这种情况下，您的浏览器将假定file:而不是https: 。
当然file://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js很可能不会领先任何地方。
我复制粘贴了您的示例，只有通过此更改，它才能按预期工作。 您可以通过检查浏览器的开发人员工具轻松发现该问题。
另请查看此问题以获取相关答案。
为什么此Vuejs“ Hello World”示例不会在我的计算机上呈现？
[英]Why Won't This Vuejs “Hello World” Example Render On My Computer?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.