Таргетинг и управление одним элементом DOM в vue - PullRequest
Новая
       29

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

0 голосов
/ 02 февраля 2019

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

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

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

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

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

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

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

Ответы [ 2 ]

0 голосов
/ 02 февраля 2019

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

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

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

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

0 голосов
/ 02 февраля 2019

Шаблонирование 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
  }
})
...