javascript - 我的 Vue Hello World 示例显示双括号而不是呈现文本
问题描述
我正在努力学习 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>
解决方案
您需要将 vue.min.js 网址更改为 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>
推荐阅读
- batch-file - 使用批处理脚本将 CSV 文件数据加载到雪花云表
- python - 查找在一列中不以大写字母开头的条目
- java - Java 8 - 流 - 收集时的值更新
- spring-boot - 合并来自两个不同服务器的日志
- python-3.x - 检查目标时出错:预期 conv2d 有 4 个维度,但得到了具有形状的数组
- reactjs - 测试一个笑话模拟函数本身
- python - TypeError: 'encoding' is an invalid keyword argument for this function - 我该如何解决?
- react-native - React Native - 异常'- [NSNull length]:在调用multiSet时抛出无法识别的选择器发送到实例0x1e6c059b0'
- php - 没有函数的字符串执行
- firebase - Firebase 网络挂钩