Vue-Laravel single file

User avatar
teroristd
Много Редовен
Много Редовен
Posts: 1769
Joined: Thu Feb 18, 2010 11:50 am
Answers: 83

Vue-Laravel single file

Post by teroristd » Mon Jul 23, 2018 9:17 am

Здравейте, правя си опити с Vue и Laravel 5.5. Едно от нещата които ме мъчат е че blade и Vue имат еднакъв синтаксис за някои неща. Ако може да ми дадете някои препоръки как да се оправям с тези несъответствия.

[php]
// Vue
{{ message }}

// Така го пиша в blade иначе не работи
@{{ message }}

<!-- full syntax -->
<a v-on:click="doSomething"> ... </a>

// Този shorthand не работи
<!-- shorthand -->
<a @click="doSomething"> ... </a>
[/php]

Това обаче не е основният проблем. Когато се опитам да извадя кода в отделен файл, например Test.vue, нищо не работи. Инсталирал съм си npm. Успявам да подкарам единствено вградения ExampleComponent.vue. Ако може някой да ми обясни по-подробно как се работи с тези файлове ще съм много благодарен.

User avatar
anonimen
Много Редовен
Много Редовен
Posts: 1523
Joined: Mon Jun 11, 2012 6:07 pm
Answers: 162
Location: Parse error: unexpected "}" in /home/index.php on line 26

Post by anonimen » Mon Jul 23, 2018 11:34 am

Първо си дай сметка за тези две различия:
1. С blade сървърно генерираш html source файл с попълнени променливи от Laravel.
2. С Vue в клиента динамично ъпдейтваш променливи от JS.

След това избери кой метод ще ползваш - в случая 2.

Значи няма да правиш blade темплейт файл (предполагам с разширение .blade), а най-обикновен html, който ще е по формата на Vue - с разширение .html.

Когато на Laravel кажеш да рендерне някаква страница, ще му подадеш .html файла, без да минаваш през Blade.

Не знам в Laravel как се борави с Blade, но най-вероятно подаваш .blade файл на някаква Blade инстанция, която връщаш от контролера.

Вместо това от контролера директно върни html страницата, без да минаваш през Blade.

User avatar
teroristd
Много Редовен
Много Редовен
Posts: 1769
Joined: Thu Feb 18, 2010 11:50 am
Answers: 83

Post by teroristd » Mon Jul 23, 2018 12:57 pm

Това лесно може да стане, но не ми изглежда правилно. Все пак от Laravel сами препоръчват Vue. Ако е такава работата не виждам какъв е смисълът да се ползва Vue заедно с Laravel.

User avatar
anonimen
Много Редовен
Много Редовен
Posts: 1523
Joined: Mon Jun 11, 2012 6:07 pm
Answers: 162
Location: Parse error: unexpected "}" in /home/index.php on line 26

Post by anonimen » Mon Jul 23, 2018 1:46 pm

teroristd wrote:Това лесно може да стане, но не ми изглежда правилно. Все пак от Laravel сами препоръчват Vue. Ако е такава работата не виждам какъв е смисълът да се ползва Vue заедно с Laravel.
Ама те са съвсем различни неща - едното е в браузъра, другото е на сървъра. Нито едното не го интересува другото какво е. Защо смяташ, че се губи смисълът?

Можеш да комбинираш двата подхода - в template страница да импортнеш html без да го парсваш, в който да оставиш Vue да рендерира.

User avatar
anonimen
Много Редовен
Много Редовен
Posts: 1523
Joined: Mon Jun 11, 2012 6:07 pm
Answers: 162
Location: Parse error: unexpected "}" in /home/index.php on line 26

Post by anonimen » Mon Jul 23, 2018 1:50 pm

Хрумна ми нещо.

Нищо не ти пречи да го пишеш и така, всъщност:

[html]{{ "{{ vue_placeholder}}" }}
{{ blade_placeholder }}[/html]

Това ти решава проблема генерално - в 1 файл ще можеш и Vue, и Blade темплейти да ползваш.

joTunkiq
Потребител
Потребител
Posts: 825
Joined: Tue Dec 25, 2012 10:03 am
Answers: 142
Contact:

Post by joTunkiq » Tue Jul 24, 2018 5:56 pm

Леко допълнение към колегата, в случай че ти върне стринга ексейпнат:

[php]{!! "{{ vue_placeholder}}" !!}[/php]

П.с. идеята на vue е да го ползваш за компоненти и да създаваш динамично такива и ларавела да ти е само бекенда, както при Angular и т.н. Общо взето го позлваш за API.

Ето полезен ресурс как да нагласиш бейсик CRUD неща: https://www.youtube.com/watch?v=u0Y_l7wkB2g

Сигурен съм, че можеш да намериш много по-добри видеа, това е просто първото, което намерих. Стана ми интересно да видя възгледите на колегите, ще следя темата. :idea: :?:

User avatar
teroristd
Много Редовен
Много Редовен
Posts: 1769
Joined: Thu Feb 18, 2010 11:50 am
Answers: 83

Post by teroristd » Wed Jul 25, 2018 8:05 am

joTunkiq wrote: П.с. идеята на vue е да го ползваш за компоненти и да създаваш динамично такива и ларавела да ти е само бекенда, както при Angular и т.н. Общо взето го позлваш за API.
Точно това ми беше основният проблем. Не можех да подкарам компоненти от отделен файл. В крайна сметка се справих. За сега нещата се получават, въпреки че има някои разлики от това което гледам в туториалите и при мен.

User avatar
anonimen
Много Редовен
Много Редовен
Posts: 1523
Joined: Mon Jun 11, 2012 6:07 pm
Answers: 162
Location: Parse error: unexpected "}" in /home/index.php on line 26

Post by anonimen » Wed Jul 25, 2018 9:32 am

Как го оправи? По тоя начин ли - {{ "{{ param }}" }}? Или импортна .html файл без да го парсваш (с blade)?

И би ли обяснил това:
Това лесно може да стане, но не ми изглежда правилно.
Защо? Нали разделяш клиента от сървъра, и темплейтите и vue-структурите ти стоят в самостоятелни компоненти. Какъв проблем виждаш тук?
Все пак от Laravel сами препоръчват Vue. Ако е такава работата не виждам какъв е смисълът да се ползва Vue заедно с Laravel.
Ок, препоръчват го. Но как това се отнася към методите, които ти предложих по-горе? Защо те да са в конфликт с Ларавел? Т.е. каква е връзката "няма смисъл от Vue + Laravel" и "използвай отделни .html файлове за Vue", и защо двете да са взаимноизключващи се?

User avatar
teroristd
Много Редовен
Много Редовен
Posts: 1769
Joined: Thu Feb 18, 2010 11:50 am
Answers: 83

Post by teroristd » Wed Jul 25, 2018 11:14 am

anonimen wrote:Как го оправи? По тоя начин ли - {{ "{{ param }}" }}? Или импортна .html файл без да го парсваш (с blade)?

Имам предвид че започнах да пиша във файлове с .vue накрая. При тях го няма този проблем. Това {{ "{{ param }}" }} все още не съм го пробвал, иначе в blade файловете го пишех така @{{ param }} и си работеше. В .html файл си работи без проблеми.

anonimen wrote: И би ли обяснил това:
Това лесно може да стане, но не ми изглежда правилно.
Защо? Нали разделяш клиента от сървъра, и темплейтите и vue-структурите ти стоят в самостоятелни компоненти. Какъв проблем виждаш тук?
Все пак от Laravel сами препоръчват Vue. Ако е такава работата не виждам какъв е смисълът да се ползва Vue заедно с Laravel.
Ок, препоръчват го. Но как това се отнася към методите, които ти предложих по-горе? Защо те да са в конфликт с Ларавел? Т.е. каква е връзката "няма смисъл от Vue + Laravel" и "използвай отделни .html файлове за Vue", и защо двете да са взаимноизключващи се?
Исках да кажа че ако не можеш да използваш пълноценно всички компоненти на Laravel, като темплейтната им система например заедно с Vue, то по добре да използваш някаква друга технология, например React. Но това са първи впечатления, и може и да греша.

User avatar
anonimen
Много Редовен
Много Редовен
Posts: 1523
Joined: Mon Jun 11, 2012 6:07 pm
Answers: 162
Location: Parse error: unexpected "}" in /home/index.php on line 26

Post by anonimen » Wed Jul 25, 2018 8:11 pm

Исках да кажа че ако не можеш да използваш пълноценно всички компоненти на Laravel, като темплейтната им система например заедно с Vue, то по добре да използваш някаква друга технология, например React
Ок, сега ти разбирам идеята.

Само че не виждам как Vue ти пречи да си ползваш blade.
Ако правиш статични страници ще можеш да ползваш Ларавел "пълноценно".

Ларавелската темплейтна система предлага решение на същия проблем. Само че с Vue имаш "живот" в темплейтите, който Ларавел не ти предлага. А и не му е работа - нали е server side.

Работата му е да прави http respond на даден request. Не се принуждавай да влизаш в граници, когато не ти помагат, а ти пречат.

+ и последно, React, също като Vue, е component renderer. Можеш да си го ползваш наред с Laravel.

----
Сещам се за един недостатък на този подход - ако искаш да правиш server side rendering за по-бързо зареждане на страниците (т.е. всички {{}}-та да са попълнени още преди да пристигне React/Vue/Library.js), то ще ти трябва JS среда, което по очевидни причини е несъвместимо с Ларавел. React предлага фунцкия за построяване на DOM и генерирането на html output без браузър за постигане на това ^, и предполагам с Vue не е по-различно.

Post Reply