Czy istnieje sposób inicjowania obiektu Vue zachowującego początkowy kod HTML?

Question

Chcę użyć Vue.js do łatwiejszego manipulowania DOM, ale kiedy inicjalizuję obiekt Vue, przepisuje początkowe dane, które są generowane z backendem na początku przed manipulowaniem.

Na przykład mam ten znaczników:

<ul id="list"> 
    <li v-repeat="elements" v-text="content">a</li> 
    <li v-repeat="elements" v-text="content">b</li> 
    <li v-repeat="elements" v-text="content">c</li> 
</ul> 

A potem chcę użyć new Vue({ el: '#list' }) tak, że to jakoś odczytać już istniejących znaczników i zachować go przed manipulowania poprzez edycję $data. Czy jest to w jakiś sposób możliwe do osiągnięcia?

Answer 1

Myślę, że nie jest to możliwe tak, jak tego chcesz. Vue.JS nie działa bezpośrednio w DOM. Czyta elementy DOM, konwertuje je do funkcji renderowania i zastępuje cały Element wynikiem działania funkcji renderowania.

Prawdopodobnie powinieneś użyć JQuery do przeskanowania DOM i wypełnienia swojego obiektu $ data (i ewentualnie łańcucha szablonów dla Vue), a następnie zainicjować instancję Vue tymi wygenerowanymi danymi.

Ale ogólnie - powinieneś przemyśleć swoją logikę aplikacji, ponieważ wydajesz się robić coś bardzo zawiłego, co może być łatwiejsze do rozwiązania. Niezależnie od tego, co wygeneruje Twój szablon DOM, prawdopodobnie możliwe będzie również bezpośrednie przekształcenie w zmienną JS, a nawet dostęp do niej za pomocą wywołania AJAX ...

Jeśli chcesz renderować podejście awaryjne, jeśli klient nie obsługuje JS lub CDN ponieważ Vue nie jest dostępny, możesz użyć podejścia skrypt-szablon. Zdefiniuj treść Vue.JS w tagu skryptu, który zastąpi oryginalny DOM, kiedy Vue będzie gotowy.

przykład:

function loadVue() { 
 
    new Vue({ 
 
    data: { values: [ 'aaa','bbb','ccc' ] }, 
 
    template: '#list-template', 
 
    el: '#list' 
 
    }) 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script> 
 

 
<ul id="list"> 
 
    <li>a</li> 
 
    <li>b</li> 
 
    <li>c</li> 
 
    <button onclick="loadVue()">Load Vue.JS</button> 
 
</ul> 
 

 
<script type="text/x-template" id="list-template"> 
 
<ul id="list"> 
 
    <li v-for="v in values">{{v}}</li> 
 
</ul> 
 
</script>

Answer 2

Nie ma powodu, nie można użyć kombinacji już istniejących elementów i v-repeat jak ten

new Vue({ 
 
    el: '#list', 
 
    data: { 
 
     elements: [{ 
 
      content: "d (v-repeat)" 
 
     }, { 
 
      content: "e (v-repeat)" 
 
     }, { 
 
      content: "f (v-repeat)" 
 
     }] 
 
    } 
 
});

<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.11.4/vue.min.js"></script> 
 
<ul id="list"> 
 
    <li>a</li> 
 
    <li>b</li> 
 
    <li>c</li> 
 
    <li v-repeat="elements" v-text="content">c</li> 
 
</ul>

Po prostu nie umieścić v-repeat na elementach, które są już obecne.