Таргетинг и управление одним элементом DOM в vue

Question

Почему-то я все еще не могу обернуть голову вокруг некоторых основных концепций Vue.

Я сделал несколько простых веб-страниц, используя phalcon. Создал его так, чтобы он работал без JS, и теперь пришло время добавить некоторые навороты - запросы ajax и тому подобное, чтобы пользовательский опыт стал лучше.

Я хотел сделать все, используя vue, чтобы увидеть, как все это складывается. Но после долгих поисков я все еще не могу найти решение для самых простых задач.

Скажем: я хочу получить текстовый абзац из серии

и немного его изменить. Возможно, сделайте отрывок из этого и добавьте кнопку "увидеть больше" позади него. Теперь в jQuery я просто повторял бы с каждым () и выполнял задачи. С Vue таргетингом набор элементов DOM для меня намного сложнее, вероятно, из-за того, что вся парадигма "наоборот".

Я знаю, что мог бы выполнять итерацию с помощью v-for, но эти элементы уже находятся в DOM, взяты из базы данных и созданы с помощью вольт. У меня даже была эта дикая идея создания файлов.js из phalcon, но это полностью отрицало бы мою стратегию создания функциональной веб-страницы, а затем постепенно улучшало ее.

Честно говоря, сейчас я чувствую, что слишком усложняюсь ради этого. Подходит ли Vue для такого проекта или это исключительно инструмент для создания приложений с нуля?

Answer 1

Шаблонирование Vue на стороне клиента, что означает, что если вы предоставляете уже шаблонную html-страницу (вашим бэкэндом), мало что может сделать для вас vue. Vue нужны данные, а не элементы DOM для построения своих моделей представления.

Это становится довольно очевидным, например, при создании одностраничного приложения, которое будет отображаться только на стороне клиента. Вы просто загружаете данные асинхронно из API-интерфейса сервера (например, REST), а затем выполняете весь рендеринг на клиенте.

Насколько я понимаю ваш сценарий использования, вы хотите смешать рендеринг на стороне клиента и сервера, рендеринг большей части неинтерактивного контента с использованием шаблонизатора вашего бэкенда и добавление некоторой интерактивности с использованием vue. В этом случае вам нужно добавить некоторые компоненты vue (с их собственной логикой рендеринга) в шаблон бэкэнда и передать данные этому компоненту, используя привязку данных vue.

Вот пример:

...
<div id="app">
    <my-vue-list :products="{% products %}"></my-vue-list>
</div>
...

И в вашем JS:

var app = new Vue({
  el: '#app',
  data: {
    components: {MyVueList} // You will have to register all the components you want to use here
  }
})

Answer 2

Vue предоставляет атрибут ref для регистрации ссылки на элемент dom или дочерний компонент:

// accessible via this.$refs.foo
<li ref="foo">...</li>

Обратите внимание, однако, что ссылки не являются реактивными, как указано в документации:

$ refs также не реагирует, поэтому вы не должны пытаться использовать его в шаблонах для привязки данных.