Есть ли способ инициализировать объект Vue, сохраняющий исходный HTML

Question

Я хочу использовать Vue.js для более легкого управления DOM, но когда я инициализирую объект Vue, он сначала перезаписывает исходные данные, которые сначала генерируются с помощью бэкэнд, прежде чем манипулировать ими.

Например, у меня есть этот код:

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

А потом я хочу использовать new Vue({ el: '#list' }) так, что бы как-то прочитал уже существующую разметку и сохранить его, прежде чем манипулировать с помощью редактирования $data. Это как-то достижимо?

Answer 1

Я думаю, что это невозможно, как вы хотите это сделать. Vue.JS не работает непосредственно с DOM. Он считывает элементы DOM, преобразует их в функцию рендеринга и заменяет весь элемент результатом рендеринга.

Возможно, вы должны использовать JQuery для сканирования вашей DOM и заполнения вашего объекта данных (и, возможно, вашей шаблонной строки для Vue), а затем инициализировать экземпляр Vue с помощью этих сгенерированных данных.

Но в целом - вы должны переосмыслить свою прикладную логику, потому что вы, кажется, делаете что-то очень запутанное, что можно было бы решить намного проще. Независимо от того, что генерирует ваш DOM-шаблон, возможно, также можно напрямую преобразовать в JS-переменную или даже получить доступ с помощью вызова AJAX ...

Если вы хотите сделать откат, если клиент не поддерживает JS или CDN для Vue недоступно, вы можете использовать подход шаблона сценария. Определите свой контент Vue.JS в теге скрипта, который заменит исходный DOM, когда Vue будет готов.

Пример:

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

Там нет причин вы не можете использовать комбинацию уже существующих элементов и v-repeat как этот

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>

Вы просто не поставить v-repeat на элементы, которые уже присутствуют.