在 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 或类，你应该创建一个主标签