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>

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

1 个答案: