Нацельтесь и управляйте одним элементом DOM в vue
Почему-то я до сих пор не могу понять некоторые основные концепции vue.
Я сделал простую веб-страницу, используя phalcon. Создал его так, чтобы он работал без JS и сейчас самое время добавить некоторые навороты - ajax запросы и тому подобное, чтобы пользовательский опыт был лучше.
Я хотел сделать все, используя vue, чтобы посмотреть, как все это складывается. Но после нескольких часов гугления я все еще не могу найти решение для самой простой задачи.
Скажем: я хочу получить текстовый абзац из набора <li>-ов и немного изменить его. Может быть, сделать отрывок из него и добавить кнопку «Подробнее» позади него. Теперь, в jQuery, я бы просто выполнял итерацию с каждым() и выполнял задачи. С набором элементов DOM для таргетинга vue мне намного сложнее, вероятно, из-за того, что вся парадигма «наоборот».
Я знаю, что мог бы выполнить итерацию с помощью v-for, но эти элементы уже находятся в DOM, взяты из базы данных и шаблонизированы с помощью volt. У меня была даже эта дикая идея создания файлов .js из phalcon, но это полностью свело бы на нет мою стратегию создания сначала функциональной веб-страницы, а затем ее постепенного улучшения.
Честно говоря, я чувствую, что прямо сейчас я слишком усложняю ради этого. Подходит ли vue для такого проекта, или это исключительно инструмент для создания приложения с нуля?
Ответы 2
Шаблоны 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
}
})
@heliogabal У вас не должно быть проблем с использованием шаблонов Phalcon, я могу только предположить, что это эквивалентно тому, что лезвие для Laravel, однако, исходя из опыта, я практически полностью исключил все шаблоны на основе php из всех своих проектов и использую Vue исключительно. Laravel больше действует как API. Vue также имеет много преимуществ по сравнению с jQuery, в первую очередь использование виртуального DOM. Просто мои 2 цента.
@heliogabal MVC вышел из моды, поскольку строгое разделение клиента и API гораздо более гибкое. Хотя можно смешать vue с каким-то бэкэнд-шаблоном MVC, я не думаю, что этот вариант особенно хорошо масштабируется. На мой взгляд, нет причин выбирать MVC вместо подхода API — вы также можете использовать здесь, например, firebase — но в конце концов все сводится к тому, что вам наиболее удобно.
Я немного старомоден, поэтому «прогрессивное улучшение» застряло у меня в голове. Я тоже думаю, что это песня прошлого :)
Vue предоставляет атрибут ссылка для регистрации ссылки на элемент dom или дочерний компонент:
// accessible via this.$refs.foo
<li ref = "foo">...</li>
Однако обратите внимание, что ссылки не являются реактивными, как указано в документах:
$refs is also non-reactive, therefore you should not attempt to use it in templates for data-binding.
Вероятно, мне следует просто отбросить часть «просмотра» phalcon по большей части и вернуть данные из контроллера. Но тогда почему бы просто не использовать firebase или что-то подобное, если у нас все равно нет функциональной версии, отличной от JS... Смешивание шаблонов volt и шаблонов vue, вероятно, вызовет у меня головную боль, и, поскольку мне нужны лишь некоторые незначительные улучшения UX, я думаю Я прибегну к jQuery.