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

Question

我试图让 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 以确保安全）：

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

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

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

Answer 1

我相信你可能想错了。 Vue 绑定到单个元素，所以如果你想操作多个元素，你可以做的是围绕 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>