2019/06/04 受邀至 LaraGirls Meetup #3 分享，討論有關 Laravel 裡可以如何使用 Blade 樣板引擎及 Vue Component 做以視覺趨動的切版開發。 程式碼範例： https://github.com/laravel-dojo/20190604-laragirls-layout-with-blade-and-vue-1 https://github.com/laravel-dojo/20190604-laragirls-layout-with-blade-and-vue-2

1. Laravel
—
(Shengyou Fan)
LaraGirls Meetup #3
2019/06/04

2. Copyright © 2000-2019 JetBrains s.r.o.

3. —

4. Laravel
—
https://www.laravel-dojo.com

5. —
https://community.laravel-dojo.com

6. LaravelConf Taiwan 2019
—
https://laravelconf.tw

7. View
Photo by Paul Skorupskas on Unsplash
/ vju /

8. —
Visual Driven Development

9. Web
—
HTML Browser Rendering+ CSS
+ Javascript

10. —
Request
Response

11. Laravel
—
Request
Response
Route View

12. LaraGirls
Photo by Jos Zwaan on Unsplash

13. 5
—
https://laragirls.org
LaraGirls
•
•

14. —
/jobs/posts/news /projects
/
/jobs/{id}/posts/{id}/news/{id} /projects/{id}

15. Blade
—
index.blade.php
news.blade.php
post.blade.php
@yield
header.blade.php
sidebar.blade.php
master.blade.php
@include
@include
@extends

16. Blade
—
@yield ('{section name}')
@include('{view name}')
@extends('{view name}')
@section('{yeild name}')
@endsction
{{ $var }}
{!! $html !!}
@if
@elseif
@else
@endif
@foreach($plural as $singular)
@endforeach
@for($i = 0; $i < 10; $++)
@endfor

17. Image from: https://i.ytimg.com/vi/DsuTwV0jwaY/maxresdefault.jpg

18. Vue in View
—
/posts/{id}
Request
Response
Route Data
(HTML)
(JSON)
(show.blade.php)

19. —
Vue
Laravel
Request
Response
Route Data
(JSON)
ComponentsDownload

20. —
•
• Web View
• Laravel Blade
•
Photo by Ashley Batz on Unsplash

21. —
GitHub
• https://github.com/laravel-dojo/20190604-laragirls-layout-with-blade-and-vue-1
• https://github.com/laravel-dojo/20190604-laragirls-layout-with-blade-and-vue-2

22. Copyright © 2000-2019 JetBrains s.r.o.
Section title
place your text here
four columns
maximum
—
Laravel
(Shengyou Fan)
shengyou.fan@jetbrains.com
—