Javascript 是否从现有HTML实例化Vue.js组件？

我试图让Vue.js从现有HTML模板实例化它的组件，但我找不到任何合理的信息。我正在使用非JavaScript后端框架和Vue.js作为视图堆栈中的正常

.js

文件添加

假设我的HTML结构如下所示：

<div id="vueApp">
  <div class="vueComponent">...</div>
  <div class="vueComponent">...</div>
  <div class="vueComponent">...</div>
</div>

...
...
...

然后，我尝试使用如下JavaScript启用它（为了安全起见，将jQuery和Vue混合使用）：

//声明Vue组件
Vue.component（'不相关名称'{
模板：'.vueComponent'，
数据：函数（）{
返回{something:false}
}
});
//启动Vue应用程序
jQuery（文档）.ready（函数（）{
var vueApp=新的Vue({
el:“#vuepp”，
已创建：函数（）{
//TODO：一些方法，可以读取/解析组件数据，进行绑定，等等
}
});
});

无论何时，只要我在HTML结构中有一个精确声明和指向的

标记，并且组件应该只是一个单独的标记，这种方法就非常有效。在本例中，我尝试实例化由CSS类标识的n个类。 我知道一种可能的方法是使用JSON化的数组/集合数据将所有组件数据作为隐藏的

传递，然后要求

vueApp

根据这些数据动态创建单个模板驱动的组件，尽管这似乎有点乏味

有什么建议吗？

---

提前谢谢

我相信你可能想得不对。Vue绑定到单个元素，因此如果您希望操纵多个元素，您可以围绕div#vueApp创建一个新的Vue实例，并使用Vue模板在其中创建组件，如下所示：

Vue.comp组件（'Vue-comp'{
数据：函数（）{
返回{
有些东西：假的
}
},
模板：“”
})
让vueApp=新的Vue({
el:“#vuepp”，
已创建：函数（）{
}
});
div#vueApp{
填充：1rem；
背景：#CD545b；
显示：内联块；
}
部门vue-comp{
高度：50px；
宽度：50px；
保证金：0.1rem；
背景：#236192；
显示：内联块；
}

这是我建议自己做的有趣的事情，尽管我只是想知道是否可以强制Vue使用现有的HTML作为多个组件作为基础……或者等等，我读错了一些东西。你很好。谢谢！：）
<script>
  // declare Vue component
  Vue.component('irrelevantName', {
    template: '.vueComponent',
    data: function() {

      return { something: false }
    }
  });

  // launch Vue app
  jQuery(document).ready(function() {

    var vueApp = new Vue({
      el: '#vueApp',
      created: function() {

         // TODO: some method that will read/parse the component data, do binding, whatever
      }
    });
  });
</script>