Vue.js未按预期工作：浏览器显示product而非Boots的问题排查

我帮你找到了两个导致这个问题的关键原因，都是Vue入门时很容易踩的小坑：

• 错误1：带src的script标签不能嵌套内部代码
  当你给<script>标签指定了src属性（用来加载外部Vue库），浏览器会优先加载外部资源，直接忽略标签内部的所有代码。这就导致你的Vue实例代码根本没被执行，模板自然无法完成插值渲染。

• 错误2：Vue构造函数首字母必须大写
  你代码里写的是new vue({...})，但Vue提供的全局构造函数是大写开头的Vue。小写的vue是未定义的变量，会导致实例创建失败，最终模板只能显示原始的插值语法{{product}}。

修正后的完整代码 #

<div id="app">
  <h2>{{product}}</h2>
</div>

<!-- 单独引入Vue库 -->
<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>

<!-- 单独写Vue实例代码 -->
<script>
const app = new Vue({
  el: "#app",
  data: {
    product: "Boots"
  }
})
</script>

把代码改成这样之后，浏览器就能正确渲染出Boots了。

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