기존 HTML에서 Vue.js 구성 요소를 인스턴스화하시겠습니까?

기존 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를 혼합) 활성화하려고 한다.

<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 구조 내의 태그와 구성요소는 하나의 태그에 불과하도록 되어 있었다.이 경우 나는 CSS 클래스로 식별된 n개의 항목을 인스턴스화하려고 한다.한 가지 가능한 접근방식은 모든 구성 요소 데이터를 숨김으로 전달하는 것임을 알고 있다.<input>JSON으로 구성된 어레이/컬렉션 데이터를 사용한 다음vueApp이 데이터에서 즉시 단일 섀시 기반 구성 요소를 생성하는 것은 다소 지루한 접근 방식인 것 같다.

좋은 의견이라도 있나?미리 고마워!

난 네가 잘못 생각하고 있을지도 모른다고 믿어.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>

참조URL: https://stackoverflow.com/questions/51613656/instantiate-vue-js-components-from-existing-html