javascript - 从现有 HTML 实例化 Vue.js 组件？

Question

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

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

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

然后我尝试像这样使用 JavaScript 启用它(为了安全混合使用 jQuery 和 Vue):

<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>

每当我有一个精确声明和指向的 <template> 时，这种方法就非常有效。标记在 HTML 结构中，组件应该只是一个单独的。在这种情况下，尽管我试图实例化 n 个由 CSS 类标识的对象。 我知道一种可能的方法是将所有组件数据作为隐藏传递 <input>使用 JSON 化的数组/集合数据，然后询问 vueApp从这些数据中动态创建单一模板驱动的组件，尽管这似乎有点乏味。

有什么建议吗？ 提前致谢!

Answer 1

我相信您可能以错误的方式思考这个问题。 Vue 绑定(bind)到单个元素，因此如果您想要操作多个元素，您可以做的是围绕 div#vueApp 创建一个新的 Vue 实例，并使用 Vue 模板在其中创建组件，如下所示:

Vue.component('vue-comp', {
  data: function () {
    return {
      something: false
    }
  },
  template: '<div class="vue-comp"></div>'
})

let vueApp = new Vue({
  el: '#vueApp',
  created: function() {
    
  }
});

div#vueApp {
  padding: 1rem;
  background: #CD545b;
  display: inline-block;
}

div.vue-comp {
  height: 50px;
  width: 50px;
  margin: 0 1rem;
  background: #236192;
  display: inline-block;
}

<script src="https://unpkg.com/vue"></script>
<div id="vueApp">
  <vue-comp></vue-comp>
  <vue-comp></vue-comp>
  <vue-comp></vue-comp>  
</div>