javascript - 在 VueJS3 中创建多个应用程序的正确方法是什么？

Question

新的 VueJS 即将到来。我玩过它，但我有一个问题。

const HelloVueApp = {
  data() {
    return {
      message: 'Hello Vue!!'
    }
  }
}
Vue.createApp(HelloVueApp).mount('.demo')

<script src="https://unpkg.com/vue@next"></script>

<div class="demo">one {{ message }}</div>
<!-- a lot of static html code -->
<div class="demo">two {{message}}</div>

第一个实例创建得很好，但第二个不是。如何在同一页面上创建多个 vue3 应用程序？

Answer 1

const HelloVueApp = {
  data() {
    return {
      message: 'Hello Vue!!'
    }
  }
}
Vue.createApp(HelloVueApp).mount('.demo')

<script src="https://unpkg.com/vue@next"></script>

<div class='demo'> 
one {{ message }}
////////////////////////
two {{message}}
</div>

您不能在同一页面的 2 个标签中使用相同的 id 或类，您应该创建主标签