Vue.js通过CDN引入后字符串插值失效问题求助

嘿，我来帮你搞定这个问题！你的代码里有几个小细节出错了，导致Vue没法正常解析{{message}}，咱们一步步来修正：

问题点分析 #

• 挂载选项拼写错误：你在Vue实例里写的是e1:'#app'，这是个笔误！正确的属性名应该是el（是element的缩写，不是数字1），这个错误会让Vue找不到要绑定的DOM容器，自然没法渲染插值内容。
• 重复引入Vue库：你同时加载了CDN的Vue和本地的vue.js，这很容易导致库版本冲突或者加载异常。如果本地没有存放vue.js文件，直接删掉本地引入那行就行；如果要用本地文件，就去掉CDN的引入。
• 脚本顺序问题：你的自定义Vue代码需要放在Vue库加载之后，确保Vue构造函数已经存在才能创建实例。

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<!-- 只保留一个Vue库引入，这里用CDN示例 -->
<script src='https://unpkg.com/vue'></script>
<script>
// 修正拼写错误，确保脚本在Vue库之后
var app = new Vue({
 el:'#app', // 把e1改成el
 data:{
 message:'Hello Vue!'
 }
})
</script>
</body>
</html>

把上面的代码替换你的原代码，刷新页面就能看到Hello Vue!正常显示啦～

内容的提问来源于stack exchange，提问作者Bhavya Dhiman