我的 Vue Hello World 示例显示双括号，但未呈现文本
[英]My Vue Hello World example shows double brackets and not rendered text
问题描述
I am trying to learn Vue.
我正在努力学习Vue。 I started with a simple hello world example from alligator.io我从 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>
I had also tried doing it with my own document from the offical Vue documentation Hello World.我也曾尝试使用我自己的来自 Vue 官方文档 Hello World 的文档来做这件事。 The result is the same.结果是一样的。 My page shows {{ msg }} and not Hello World.我的页面显示 {{ msg }} 而不是 Hello World。 In console, it reads that Vue is not defined.在控制台中，它读取未定义 Vue。
DEMO:演示：
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
You need to change the vue.min.js url to https, try this你需要把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
The problem is your URL shortcut.问题在于您的 URL 快捷方式。 You just open your html-file locally as you stated in the comments.您只需按照评论中的说明在本地打开 html 文件。
Replace代替
//cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js
with和
https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js
and it will work.它会起作用。 Also replace that <meta>...</meta> with <head>...</head> , just to make your HTML correct.还要将<meta>...</meta>替换为<head>...</head> ，只是为了使您的 HTML 正确。
The problem is - as I already stated - that you open the file local, in which case your browser will assume file: and not https: .问题是 - 正如我已经说过的 - 您在本地打开文件，在这种情况下，您的浏览器将假定file:而不是https: 。
Of course file://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js most likely won't lead anywhere.当然file://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js很可能不会领先任何地方。
I copy-pasted your example and with this change only it was working as expected.我复制粘贴了您的示例，只有通过此更改，它才能按预期工作。 You could have easily spotted that problem by inspecting your browser's developer tools.您可以通过检查浏览器的开发人员工具轻松发现该问题。
Also check out this question for a related answer.另请查看此问题以获取相关答案。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.