javascript - 为什么这个 Vuejs "Hello World"示例无法在我的计算机上呈现?

标签 javascript jquery vue.js

我正在尝试将 Vue 与 Phoenix/Elixir 项目结合使用。经过大量故障排除后,我仍然无法渲染 Vuejs 元素。所以我决定在原始 html/js 中测试简单的“hello world”示例。

也不行。我做错了什么?

这是我试图在我的计算机上复制的 jsfiddle: https://jsfiddle.net/yyx990803/okv0rgrk/

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Vue Test</title>

<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>

</head>
<body>

<div id="app">
    {{ message }}
</div>

</body>
</html>

最佳答案

把你的第二个script</body> 之前标记.你的代码不工作的原因是因为你试图挂载 #app在它存在之前。如果您尝试在它存在之后安装它,那就没问题了。

关于javascript - 为什么这个 Vuejs "Hello World"示例无法在我的计算机上呈现?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34774937/

相关文章:

javascript 高度数学重新计算每个页面更改

javascript - 当页面从底部向前向后随机单击时,jquery 数据表滚动到顶部

javascript - JS引擎处理数据,为什么不符合预期值

javascript - jQuery 将焦点设置在元素之外

javascript - 在 HTML 中将 Jquery UI 添加到 UL

javascript - 如何连接样式

css - 如何在移动 View 上切换 Vue 组件的渲染顺序?

javascript - 尝试刷新 token 时 Axios 拦截器无限循环

javascript - 如何在 IE 的 Javascript 中获取当前日期?

javascript - Ajax 加载后按钮上的 JQuery HTML onclick 属性不起作用