包含 vue 应用程序的 Div 中没有任何元素，当它明确时答案

【问题标题】：Div containing vue app has no elements in it, when it clearly does包含 vue 应用程序的 Div 中没有任何元素，当它明确时
【发布时间】：2021-03-19 06:14:39
【问题描述】：

我刚刚开始学习 Vue.js，我现在正在学习 Vue Mastery 初学者课程。出于某种原因，当我在 Chrome 上检查它时，我的带有 id app 的 div 不包含任何元素，而在我的 html 代码中显然它包含。我还发现，当我注释包含我的主要 JavaScript 文件的脚本标记时，html 元素会出现在页面上。请帮忙！

main.js

const app = Vue.createApp({
    data() {
        return {
            cart:0,
            product: 'Soks',
            image: './assets/images/socks_blue.jpg',
            inStock: true,
            details: ['50% cotton', '30% wool', '20% polyester'],
            variants: [
              { id: 2234, color: 'green', image: './assets/images/socks_green.jpg' },
              { id: 2235, color: 'blue', image: './assets/images/socks_blue.jpg' },
            ]
        }
    },
    methods: {
        addToCart() {
            this.cart += 1
        },
        updateImage(variantImage) {
            this.image = variantImage
        }
    }
})

index.html

<div id="app">
  <div class="nav-bar"></div>

  <div class="cart">Cart({{ cart }})</div>
  
  <div class="product-display">
    <div class="product-container">
      <div class="product-image">
        <img v-bind:src="image">
      </div>
      <div class="product-info">
        <h1>{{ product }}</h1>
        <p v-if="inStock">In Stock</p>
        <p v-else>Out of Stock</p>
        <ul>
          <li v-for="detail in details">{{ detail }}</li>
        </ul>
        <div v-for="variant in variants" :key="variant.id" @mouseover="updateImage(variant.image">{{ variant.color }}</div>
        <button class="button" @click="addToCart">Add to Cart</button>
      </div>
    </div>
  </div>
</div>

<!-- Import App -->
<script src="./main.js"></script>

<!-- Mount App -->
<script>
  const mountedApp = app.mount('#app')
</script>

index.html 的截图

【问题讨论】：

标签： vue.js vuejs3

【解决方案1】：

需要安装应用程序（哦，我看到你现在正在这样做......）：

const app = Vue.createApp({
...
})
app.mount("#app");

并且模板中有一个未闭合的括号：

@mouseover="updateImage(variant.image)"

如果你想要的话，这里是demo

【讨论】：