Ларавел Ливевире је одличан алат за постизање динамичког понашања на веб страници, без директног писања ЈаваСцрипт кода. То чини изградњу динамичких интерфејса једноставном, без напуштања удобности Ларавел-а. Недавно је језгро Ливевире-а потпуно преписано.
Нови Ливевире в3 има бољу разлику, функције се могу направити брже и мање је дуплирања између Ливевире-а и Алпине-а јер се више ослања на Алпине и користи свој Морпх, Хистори и друге додаци. Неколико нових карактеристика је такође омогућено реструктурирањем кодне базе и стављањем већег нагласка на Алпине.
1. Аутоматски убаците Ливевире скрипте, стилове и Алпине
Након што композитор инсталира Ливевире в2, морате ручно додати @ливевиреСтилес, @ливевиреСцриптс и Алпине свом изгледу. Уз Ливевире в3, потребно је само да инсталирате Ливевире и све што вам је потребно се аутоматски убацује - укључујући Алпине!
<!ДОЦТИПЕ хтмл>
<хтмл ланг="ен">
<глава>
<скрипт срц="//unpkg.com/alpinejs" одложити></script>
@ливевиреСтилес@ливевиреСцриптс
</head>
<тело>
...
</body>
</html>2. ЈаваСцрипт функције у ПХП класама
Ливевире в3 ће подржати писање ЈаваСцрипт функција директно у вашим позадинским Ливевире компонентама. Додајте функцију својој компоненти, додајте /\*_ @јс _/ коментар изнад функције, а затим вратите неки ЈаваСцрипт код користећи ПХП-ову ХЕРЕДОЦ синтаксу и позовите га са свог фронтенда. ЈаваСцрипт код ће бити извршен без слања икаквих захтева на ваш бацкенд.
<?пхп
именског простораАпликација\Хттп\Ливевире;
класаТодоспротеже \Ливевире\Саставни део
{
/** @проп */
јавности $тодос;
/** @јс */
јавностифункцијајасно()
{
повратак <<<'ЈС'
тхис.тодо = '';
ЈС;
}
}
?>
<див>
<улазна жица: модел="урадити" />
<жица за дугме: клик ="јасно">Јасно</button>
</div>3. Закључана својства
Ливевире в3 ће подржавати закључана својства - својства која се не могу ажурирати са сучеља. Додајте /\*\* @лоцкед / коментар изнад својства на вашој компоненти, а Ливевире ће избацити изузетак ако неко покуша да ажурира то својство са фронтенда.
<?пхп
именског простораАпликација\Хттп\Ливевире;
класаТодоспротеже \Ливевире\Саставни део
{
/** @лоцкед */
јавности $тодос = [];
}
?>4. Жица: модел је подразумевано одложен
Како су Ливевире и његова употреба еволуирали, схватили смо да „одложено“ понашање има више смисла за 95% образаца, тако да ће у в3 „одложена“ функционалност бити подразумевана. Ово ће уштедети на непотребним захтевима који иду на ваш сервер и побољшати перформансе. Када вам је потребна функција "уживо" на улазу, можете користити вире: модел.ливе да бисте омогућили ту функцију.
Ово је једна од ретких промена са в2 на в3.
5. Захтеви су скупљени
У Ливевире в2, ако имате више компоненти које користе жице: анкета или диспечирање и ослушкивање догађаја, свака од тих компоненти ће послати засебне захтеве серверу за сваку анкету или догађај. У Ливевире в3 постоји интелигентно груписање захтева тако да се повезују: анкете, догађаји, слушаоци и позиви метода се могу групирати у један захтев када је то могуће, штедећи још више захтева и побољшавајући перформансе.
6. Реацтиве Пропертиес
У Ливевире в3, када проследити део података подређеној компоненти , додајте/\*_ @проп _/ коментар изнад својства у детету, а затим га ажурирајте у надређеној компоненти, биће ажурирано у подређеној компоненти.
<?пхп
именског простораАпликација\Хттп\Ливевире;
класаТодосЦоунтпротеже \Ливевире\Саставни део{
/** @проп */
јавности $тодос;
јавностифункцијадати, пружити(){
повратак <<<'ХТМЛ'
<див>
Тодос: {{ цоунт($тодос) }}
</div>
ХТМЛ;
}
}7. Приступите подацима и методама родитељске компоненте користећи $парент
У Ливевире в3, постојаће нови начин приступа подацима и методама родитељске компоненте. Постоји ново својство $парент којем се може приступити за позивање метода на родитељу.
<?пхп
именског простораАпликација\Хттп\Ливевире;
класаТодоИнпутпротеже \Ливевире\Саставни део{
/** @моделабле */
јавности $валуе = '';
јавностифункцијадати, пружити(){
повратак <<<'ХТМЛ'
<див>
<улазна жица: модел="вредност" жица: кеидовн.ентер="$парент.адд()">
</div>
ХТМЛ;
}
}8. Телепорт
Ливевире в3 ће такође укључити нову @телепорт Бладе директиву која ће вам омогућити да "телепортујете" део ознаке и прикажете га као други део ДОМ-а. Ово понекад може помоћи да се избегну проблеми са з-индексом са модалима и клизањем.
<див>
<жица за дугме: клик ="сховМодал">Прикажи модал</button>
@телепорт('#фоотер&апос;)
<к-модална жица: модел="сховМодал">
<!--... -->
</x-modal>
@ендтелепорт
</div>9. Лази Цомпонентс
У Ливевире в3, само додајте атрибут лењи када рендерујете компоненту и она се неће приказати у почетку. Када дође у оквир за приказ, Ливевире ће покренути захтев да га прикаже. Такође ћете моћи да додате садржај чувара места имплементацијом методе чувара места на вашој компоненти.
<див>
<жица за дугме: клик ="сховМодал">Прикажи модал</button>
@телепорт('#фоотер&апос;)
<к-модална жица: модел="сховМодал">
<ливевире: пример-компонента лењи />
</x-modal>
@ендтелепорт
</div>
<?пхп
именског простораАпликација\Хттп\Ливевире;
КласаЕкамплеЦомпонентпротеже \Ливевире\Саставни део{
јавностистатичнефункцијачувар места(){
повратак <<<'ХТМЛ'
<к-спиннер />
>>>
}
јавности функција дати, пружити()/** [тл! колапс: 7] */{
повратак <<<'ХТМЛ'
<див>
Тодос: {{цоунт($тодос) }}
</div>
ХТМЛ;
}
}
?>Једноставност и снага у Ливевире В3
Комбинација једноставности и снаге је оно што чини Ларавел Ливевире тако сјајан и зашто га користи толико много програмера. Посебно је добра алтернатива комбинацији Ларавел + Инертиа + Вуе. Конкретно, Ларавел је такође у пакету са другим оквирима који су моћни и са којима се може радити.