Trong bài viết này, chúng ta sẽ tìm hiểu xem Vue là gì, nó hoạt động như thế nào với Laravel và tại sao bạn nên sử dụng nó.
Nếu bạn đã sử dụng một phiên bản Laravel mới nhất, bạn sẽ thấy nó thường đi kèm với Vue đi kèm với các công cụ khác như Bootstrap và jQuery. Bạn cũng sẽ thấy trong tài liệu Laravel rằng họ đã giới thiệu một chút về việc sử dụng các thành phần Vue. Đây có phải là dấu hiệu cho thấy Laravel khuyến nghị sử dụng Vue không?
Điều kiện tiên quyết
- Kiến thức cơ bản về PHP và Laravel
- Kiến thức cơ bản về JavaScript
- Cài đặt PHP trên máy cục bộ của bạn
- Có Composer được cài đặt trên máy cục bộ của bạn
Vue.js là gì?
Trực tiếp từ miệng của con ngựa, “Vue is a progressive framework for building user interfaces”. Vue ở cốt lõi của nó là tập trung vào các lớp xem chỉ của một ứng dụng, do đó, tích hợp với các nền tảng khác hoặc các ứng dụng hiện tại là thực sự dễ dàng. Bạn cũng có thể sử dụng Vue để xây dựng các ứng dụng trang đơn tinh vi.
Vue hoạt động như thế nào?
Nếu bạn đã lập trình cho web trước thời đại của các khuôn khổ JavaScript frontend hướng sự kiện, bạn sẽ hiểu rằng có những khó khăn đáng kể và sự thiếu hiệu quả phát sinh từ việc cố gắng cập nhật Mô hình đối tượng tài liệu (DOM).
Để cập nhật DOM trực tiếp có nghĩa là bạn sẽ phải thực hiện trang, thực hiện thay đổi cho một phần nhỏ của nó, sau đó tải lại toàn bộ DOM để các thay đổi có thể có hiệu lực. Nếu nói rằng bạn đang xem video trên YouTube và có nhận xét mới, toàn bộ trang sẽ tải lại và video của bạn sẽ phải bắt đầu lại.
Vue cố gắng giải quyết những thách thức này bằng cách sử dụng một DOM ảo để quản lý chế độ xem mà người dùng nhìn thấy. Vue cơ bản tạo ra một bản sao của DOM và lưu trữ nó. Khi một thay đổi được thực hiện cho bất kỳ phần nào của DOM, nó chỉ cập nhật phần đó của DOM mà không cần tải lại DOM. Điều này có nghĩa là các bình luận sẽ cập nhật mà không cần bạn chú ý đến nó.
Vue cung cấp các thành phần xem phản ứng và composable. Vue đáp ứng các sự kiện và kích hoạt các thay đổi trên DOM ngay lập tức. Thành phần composable của nó có thể được lựa chọn và lắp ráp trong các kết hợp khác nhau để đáp ứng bất cứ nhu cầu phát sinh. Bạn có thể có các thành phần cho tất cả mọi thứ và tái sử dụng chúng tuy nhiên bạn cần.
Tại sao bạn nên sử dụng Vue với Laravel
Đây là một câu hỏi mà bạn cần dành thời gian để trả lời. Điều quan trọng là phải hiểu những gì Vue cung cấp và điều đó có ý nghĩa gì đối với công việc của bạn.
Chúng ta sẽ khám phá một vài lý do tại sao bạn nên sử dụng Vue với Laravel.
Mọi thứ xảy ra trên giao diện người dùng
Các ứng dụng trên internet hiện nay được định hướng theo sự kiện. Chúng được xây dựng để đảm bảo người dùng có trải nghiệm liền mạch như họ sẽ làm nếu họ sử dụng ứng dụng được cài đặt trên máy tính của họ.
Tất cả mọi thứ bây giờ xảy ra trên lối vào và người dùng không bao giờ phải tải lại trang một lần nữa (cảm ơn bạn JavaScript).
Các thành phần phản ứng tạo ra một ứng dụng hướng sự kiện xuất sắc
Vue cho phép bạn xây dựng một ứng dụng toàn diện được điều khiển theo sự kiện và có tất cả hoạt động hoàn toàn xử lý trên giao diện người dùng. Nó cũng cung cấp các thành phần composable có thể được sử dụng nếu bạn muốn. Do nó ghép nối độc đáo với Laravel, bạn sẽ chỉ cần thực hiện một vài route để yêu cầu dữ liệu từ ứng dụng Laravel của bạn và thực hiện thay đổi giao diện người dùng bằng cách chuyển đổi các thành phần mà không cần tải lại trang.
Bạn có thể kích hoạt các thay đổi giao diện người dùng liền mạch với giao diện Vue của bạn, từ đó cung cấp cho người dùng của bạn trải nghiệm tuyệt vời. Nó có thể đơn giản như làm cho văn bản trên trang của bạn có thể chỉnh sửa hoặc hoán đổi toàn bộ thành phần để tải lên video do người dùng yêu cầu mà không cần tải lại trang.
Với tốc độ và hiệu suất của Vue, điều này xảy ra rất nhanh và trôi chảy mà không chiếm quá nhiều tài nguyên máy tính của bạn.
Xây dựng các trang giao diện phức tạp tối ưu
Nếu bạn nghĩ đến việc xây dựng một ứng dụng với các phần cần cập nhật thường xuyên, bạn không còn cách nào khác ngoài việc làm cho giao diện người dùng chạy hoàn toàn trên JavaScript.
Thách thức với JavaScript vani hoặc jQuery hoặc các thư viện JavaScript khác không có DOM ảo là bạn nhanh chóng đạt được các vấn đề về hiệu suất với tần suất tăng cập nhật hoặc khối lượng dữ liệu cần theo dõi để thay đổi tăng đáng kể. Các thay đổi đối với DOM sẽ dần dần chấm dứt ngay lập tức và bạn bắt đầu gặp phải sự chậm trễ hiệu suất đáng chú ý.
Khi bạn soạn ứng dụng của bạn với các thành phần Vue, các phụ thuộc của mỗi thành phần được tự động theo dõi trong quá trình render của nó, vì vậy hệ thống biết chính xác thành phần nào thực sự cần được cập nhật khi có thay đổi về dữ liệu. Điều này làm cho tất cả các bản cập nhật cho DOM sử dụng tài nguyên tối thiểu, do đó cải thiện hiệu quả ứng dụng tổng thể.
Vue cũng tương thích với các nhà quản lý state như Flux, Redux và Vuex, là công cụ tuyệt vời trong việc quản lý luồng dữ liệu trong các ứng dụng phức tạp. Việc sử dụng mô hình ràng buộc dữ liệu một chiều của Vue cũng làm cho việc quản lý trạng thái dễ dàng hơn trong các ứng dụng phức tạp.
Ứng dụng trang đơn (Single Page Application)
Tôi muốn chia sẻ ý kiến cá nhân – Ứng dụng một trang là điều tuyệt vời nhất xảy ra với internet trong thập kỷ qua. Nó mở ra các ứng dụng cho một lượng người dùng rộng hơn so với trước đây.
Khi bạn xem xét rằng nhiều người dùng internet bên ngoài một số vùng của Mỹ và Châu Âu có những thách thức trên internet, bạn bắt đầu đánh giá cao vai trò của các ứng dụng đơn lẻ trong việc cung cấp trải nghiệm web phong phú cho họ.
Toàn bộ dữ liệu ứng dụng của bạn được tải một lần (và hầu hết được lưu trữ), tất cả những gì ứng dụng của bạn thực hiện khi người dùng tương tác với nó là dữ liệu yêu cầu thường yêu cầu băng thông thấp để đáp ứng.
Dễ dàng để tìm hiểu và sử dụng
Vue dễ dàng để tìm hiểu. Nó cung cấp rất ít tùy chọn cho bạn với tư cách là nhà phát triển và có rất nhiều điều trừu tượng. Bạn cảm thấy như bạn đang viết JavaScript đơn giản khi bạn sử dụng Vue và bạn có thể tạo một ứng dụng đơn giản với JavaScript đơn giản và nó vẫn hợp lệ trong Vue.
Một điều tuyệt vời khác về Vue là HTML hợp lệ của bạn cũng là một mẫu Vue hợp lệ. Bạn có thể giữ CSS của bạn bên ngoài hoặc bạn có thể xử lý nó với JavaScript tùy thuộc vào nhu cầu ứng dụng của bạn. Bạn cũng có thể tận dụng kiểu dáng có phạm vi, để áp dụng các thay đổi kiểu cho một thành phần đơn lẻ mà không có thay đổi ảnh hưởng đến các thành phần khác.
Nếu bạn đã quen với JavaScript, bạn có thể xây dựng một ứng dụng không tầm thường với Vue chỉ sau một ngày đọc tài liệu .
Sử dụng Vue cơ bản với Laravel
Vue tích hợp độc đáo với Laravel. Bạn có thể tạo các thành phần Vue và sử dụng chúng như bạn sẽ sử dụng các thẻ HTML thông thường bên trong tập tin của bạn. Bạn có thể truyền component cho thành phần từ đầu ra được tạo ra khi tệp blade của bạn hiển thị.
Để thử nó, tạo một cài đặt Laravel mới bằng cách sử dụng trình cài đặt Laravel:
$ laravel new vueapp
Nếu bạn không có trình cài đặt Laravel, hãy chạy lệnh sau để nhận nó:
$ composer global require "laravel/installer"
Sau khi cài đặt xong, hãy thay đổi thư mục làm việc của bạn thành cài đặt Laravel mới của bạn:
$ cd vueapp
Cài đặt Vue và các thư viện JavaScript khác mà ứng dụng của bạn cần chạy:
$ npm install
Thiết lập ứng dụng của bạn để tải lại khi bạn thực hiện thay đổi đối với nội dung js:
$ npm run watch
Nếu bạn muốn nhìn thấy những thay đổi của bạn khi bạn thực hiện chúng, đặc biệt là kể từ khi bạn đang học, sau đó bạn nên
run watch đểxem các ứng dụng.
Bây giờ, mở một terminal khác và khởi động máy chủ ứng dụng Laravel:
$ php artisan serve
Tóm Tắt
Tạo thành phần Vue đầu tiên của bạn
Tạo thành phần Vue dễ dàng. Nếu bạn mở file resources/assets/js/app.js tệp, bạn sẽ thấy rằng Vue đã được nhập và tạo thành phần Vue mẫu.
Bạn có thể tạo các thành phần Vue của bạn theo nhiều cách. Đối với bài viết này, chúng ta sẽ tạo từng component trong một tệp riêng biệt trong thư mục resources/assets/js/components để giữ cho mọi thứ gọn gàng hơn. Tất cả các tệp mẫu Vue kết thúc bằng phần mở rộng .vue, vì vậy hãy đặt tên cho tất cả các template bạn tạo chính xác.
Bây giờ, hãy tạo một tệp mới Welcome.vue bên trong thư mục components và thêm phần sau vào nó:
template
<
>
<
divclass
=
"flex-center position-ref full-height"
>
<
divclass
=
"content"
>
<
divclass
=
"title m-b-md"
>
Welcome to Vue.
js on Laravel<
/
div>
<
divclass
=
"links"
>
<
a href=
"https://laravel.com/docs"
>
View Laravel Docs<
/
a>
<
a href=
"https://vuejs.org/v2/guide/"
>
View Vue Docs<
/
a>
<
a href=
"https://laracasts.com"
>
Watch Videos<
/
a>
<
/
div>
<
/
div>
<
/
div>
<
/
template>
<
script>
export
default
{
}
<
/
script>
<
style scoped>
html,
body{
background-
color:
#fff;
color:
#636b6f;
font-
family:
'Raleway'
,
sans-
serif;
font-
weight:
100
;
height:
100vh;
margin:
0
;
}
.
full-
height{
height:
100vh;
}
.
flex-
center{
align-
items:
center;
display:
flex;
justify-
content:
center;
}
.
position-
ref{
position:
relative;
}
.
top-
right{
position:
absolute;
right:
10px;
top:
18px;
}
.
content{
text-
align:
center;
}
.
title{
font-
size:
84px;
}
.
links>
a{
color:
#636b6f;
padding:
0
25px;
font-
size:
12px;
font-
weight:
600
;
letter-
spacing:
.
1rem;
text-
decoration:
none;
text-
transform:
uppercase;
}
.
m-
b-
md{
margin-
bottom:
30px;
}
<
/
style>
Thẻ <template> giữ mẫu HTML cho trang mà chúng tôi đang tạo. Nếu ta không đính kèm HTML trong thẻ này thì sẽ phải chỉ định mẫu là gì, hoặc bằng cách liên kết tới tệp bên ngoài hoặc bằng cách gán toàn bộ nội dung mẫu làm biến cho Vue.
Nếu ta có một tệp bên ngoài được gọi MyTemplate.vue, ta sẽ cần lấy thêm các thư viện JavaScript để giúp chúng tôi phân tích cú pháp và sử dụng mẫu bên ngoài. Đây là lý do đủ để không sử dụng các mẫu bên ngoài.
Nếu bạn nhìn vào các nội dung kèm theo thẻ <template>, bạn sẽ thấy rằng nó chỉ là đánh dấu HTML đơn giản. Phần quan trọng nhất là đây cũng là mẫu Vue hợp lệ. Bạn sẽ không cần phải học các thủ thuật mới để bắt đầu.
Ta có phần script trên trang nơi ta xác định toàn bộ logic điều khiển trang. Ta không cần phải xác định hoặc khai báo bất cứ điều gì để sử dụng mẫu Vue, vì vậy chỉ cần để trống.
Phần cuối cùng là phần style. Ta đã thêm một tham số vào nó là scoped – chỉ cần nói với Vue “Áp dụng style cho component này, không áp dụng nó cho component khác”.
Điều này có nghĩa là những thay đổi chúng tôi đã thực hiện đối với các kiểu hiện có và kiểu mới mà chúng tôi đã thêm sẽ không hiển thị bên ngoài thành phần này.
Sử dụng thành phần trong tệp blade của bạn
Ta đã tạo thành phần Vue đầu tiên. Để sử dụng nó trong file welcome.blade.php, ta sẽ cần phải làm cho Vue biết rằng nó tồn tại và đặt tên cho nó là Vue.
Mở file resources/assets/js/app.js và chỉnh sửa tệp sau:
require
(
'./bootstrap'
)
;
window.
Vue=
require
(
'vue'
)
;
Vue.
component
(
'welcome'
,
require
(
'./components/Welcome.vue'
)
)
;
const
app=
new
Vue
(
{
el:
'#app'
}
)
;
Tiếp theo, sử dụng thành phần Vue bên trong tệp resources/views/welcome.blade.php của bạn :
[
.
.
.
]
<
metaname
=
"
viewport"
content
=
"
width=
device-width, initial-scale=
1"
>
<
metaname
=
"
csrf-token"
content
=
"
{{ csrf_token() }}"
>
<
title>
Laravel</
title>
[
.
.
.
]
<
body>
<
divid
=
"
app"
>
<
welcome>
</
welcome>
</
div>
<
scripttype
=
"
text/javascript"
src
=
"
js/app.js"
>
</
script>
</
body>
[
.
.
.
]
Đảm bảo chỉnh sửa tệp phù hợp và bao gồm thẻ tập lệnh trong đó để thành phần Vue của bạn có thể hiển thị trên trang
Nếu bạn đặt ứng dụng của mình để xem các thay đổi đối với nội dung js của mình thì bạn sẽ thấy ứng dụng đã tạo toàn bộ ứng dụng và sẽ xuất ra thông báo compiled successfully in XXXms.
Bây giờ, hãy truy cập vào http://localhost:8000 từ trình duyệt của bạn để xem ứng dụng của bạn.
Chuyển dữ liệu đến thành phần
Giả sử chúng ta muốn đưa ra các chi tiết của nhà phát triển ứng dụng, và chúng ta không thể biết nó bởi vì chỉ ứng dụng mới có thể cung cấp chi tiết đó. Chúng ta có thể dễ dàng chuyển các chi tiết đến thành phần và để nó hiển thị nó khi nó render.
Tiếp theo, chúng ta sẽ chuyển một tiêu đề cho thành phần và xem nó như thế nào. Mở tệp resources/views/welcome.blade.php và thêm các mục sau:
[
.
.
.
]
<
divid
=
"
app"
>
<
welcome:title
=
"
'This cool app'"
>
</
welcome>
</
div>
[
.
.
.
]
Chúng ta vừa chuyển dữ liệu vào thành phần bằng cách gắn kết dữ liệu với một biến mà chúng ta sẽ nhận được trong thành phần như một thuộc tính (prop).
Sau đó, mở tệp resources/assets/js/components/Welcome.vue và thêm phần sau vào tệp:
template
<
>
[
.
.
.
]
<
divclass
=
"title m-b-md"
>
{
{
title}
}
<
/
div>
[
.
.
.
]
<
/
template>
<
script>
export
default
{
props:
[
'title'
]
}
<
/
script>
Ở trên ta thấy là ta đã thay thế Welcome to Vue.js on Laravel bằng {{title}}. Đây là cách để xuất nội dung của một biến trong mẫu Vue của bạn, giống như với mẫu blade của Laravel.
Trong phần kịch bản, ta nhận được một prop sử dụng props : ['title'] và kết quả là:
Tiếp theo, ta sẽ chuyển tiêu đề từ máy chủ ứng dụng của ta. Mở routes/web.php tệp và chỉnh sửa như sau:
[
.
.
.
]
Route
::
get
(
'/'
,
function
(
)
{
return
view
(
'welcome'
,
[
'title'
=
>
"An even cooler way to do the title"
]
)
;
}
)
;
Sau đó, chỉnh sửa tệp welcome.blade.php như sau:
[
.
.
.
]
<
divid
=
"
app"
>
<
welcome:title
=
"
'{{$title}}'"
>
</
welcome>
</
div>
[
.
.
.
]
Chúng tôi chỉ xuất nội dung titletừ máy chủ và chuyển trực tiếp nội dung đến thành phần. Kết quả là:
Tiếp theo, ta sẽ thêm một trang thứ hai vào ứng dụng của chúng ta và đồng thời cũng tạo component thứ hai. Tạo một tệp mới resources/assets/js/components/Page.vue và thêm thông tin sau vào tệp:
template
<
>
<
divclass
=
"flex-center position-ref full-height"
>
<
divclass
=
"content"
>
<
divclass
=
"title m-b-md"
>
{
{
title}
}
<
/
div>
<
divclass
=
"links"
>
<
spanclass
=
"subtitle"
>
Name:
{
{
author.
name}
}
<
/
span>
<
br/
>
<
spanclass
=
"subtitle"
>
Role:
{
{
author.
role}
}
<
/
span>
<
br/
>
<
spanclass
=
"subtitle"
>
Code:
{
{
author.
code}
}
<
/
span>
<
br/
>
<
/
div>
<
/
div>
<
/
div>
<
/
template>
<
script>
export
default
{
props:
[
'title'
,
'author'
]
}
<
/
script>
<
style scoped>
html,
body{
background-
color:
#fff;
color:
#939b9f;
font-
family:
'Raleway'
,
sans-
serif;
font-
weight:
100
;
height:
100vh;
margin:
0
;
}
.
title{
font-
size:
60px;
}
.
subtitle{
font-
size:
20px;
}
.
full-
height{
height:
100vh;
}
.
flex-
center{
align-
items:
center;
display:
flex;
justify-
content:
center;
}
.
position-
ref{
position:
relative;
}
.
top-
right{
position:
absolute;
right:
10px;
top:
18px;
}
.
content{
text-
align:
center;
}
.
m-
b-
md{
margin-
bottom:
30px;
}
<
/
style>
Giống như trang đầu tiên, ta đã nhận được một nhánh thứ hai là một trang json object chứa thông tin tác giả.
Chúng ta hãy làm cho Vue biết về thành phần mới mà chúng ta vừa tạo ra. Mở resources/assets/js/app.js và thêm các mục sau:
[
.
.
.
]
Vue.
component
(
'welcome'
,
require
(
'./components/Welcome.vue'
)
)
;
Vue.
component
(
'page'
,
require
(
'./components/Page.vue'
)
)
;
[
.
.
.
]
Bây giờ, tạo một tệp mới resources/views/page.blade.php và thêm phần sau vào tệp:
<!doctype html>
<html lang="{{ app()->
getLocale
(
)
}
}
">
<
head>
<
metacharset
=
"
utf-8"
>
<
metahttp-equiv
=
"
X-UA-Compatible"
content
=
"
IE=
edge"
>
<
metaname
=
"
viewport"
content
=
"
width=
device-width, initial-scale=
1"
>
<
metaname
=
"
csrf-token"
content
=
"
{{ csrf_token() }}"
>
<
title>
Page</
title>
<
linkhref
=
"
https://fonts.googleapis.com/css?family=
Raleway:100,600"
rel
=
"
stylesheet"
type
=
"
text/css"
>
</
head>
<
body>
<
divid
=
"
app"
>
<
page:title
=
"
'{{$title}}'"
:author
=
"
{{$author}}"
>
</
page>
</
div>
<
scripttype
=
"
text/javascript"
src
=
"
js/app.js"
>
</
script>
</
body>
</
html>
Cuối cùng, mở routes/web.php và thêm một route để tải trang ở cuối tệp:
[
.
.
.
]
Route
::
get
(
'/page'
,
function
(
)
{
return
view
(
'page'
,
[
'title'
=
>
"Page 2 - A little about the Author"
,
'author'
=
>
json_encode
(
[
"name"
=
>
"Đặng Trần Long"
,
"role"
=
>
"Development Enginner"
,
"code"
=
>
"Always keeping it clean"
]
)
]
)
;
}
)
;
Để xem route mới của ta hoạt động thế nào, hãy truy cập http://127.0.0.1:8000/page trên trình duyệt của bạn và xem kết quả hiển thị.
Xây dựng toàn bộ frontend bằng Vue
Như đã nói, mọi thứ chạy trên giao diện người dùng và người dùng không phải tải lại bất kỳ thứ gì. Chúng ta sẽ xem cách xây dựng một ứng dụng trang đơn (Single Page Application – SPA) sẽ chỉ phải tải một lần và tìm nạp mọi thứ bằng cách thực hiện các lời gọi API.
Cài đặt vue router
Vue router là công cụ Vue để điều hướng xây dựng dựa trên ứng dụng giao diện người dùng. Nó sẽ cho phép bạn điều hướng một SPA. Để cài đặt bộ định tuyến vue, hãy chạy lệnh sau:
$ npm install vue-router
Thoát khỏi
watchtrước đó bằng cách sử dụngctrl + c. Ta sẽ mở để xem lại các thay đổi sau khi cài đặt xong vue-router.
Thiết lập các route
Bây giờ vue-router đã được cài đặt, chúng ta cần định nghĩa các route cho ứng dụng. Sau đây là hướng dẫn để chuyển đổi giữa các thành phần chúng tôi đã thực hiện.
Tạo một tệp mới resources/assets/js/vueapp.js và chỉnh sửa nó như sau:
Vue from
import
'vue'
import
VueRouter from'vue-router'
Vue.
use
(
VueRouter)
import
App from'./components/App'
import
Welcome from'./components/Welcome'
import
Page from'./components/Page'
const
router=
new
VueRouter
(
{
mode:
'history'
,
routes:
[
{
path:
'/home'
,
name:
'welcome'
,
component:
Welcome,
props:
{
title:
"This is the SPA home"
}
}
,
{
path:
'/spa-page'
,
name:
'page'
,
component:
Page,
props:
{
title:
"This is the SPA Second Page"
,
author:
{
name:
"Fisayo Afolayan"
,
role:
"Software Engineer"
,
code:
"Always keep it clean"
}
}
}
,
]
,
}
)
const
app=
new
Vue
(
{
el:
'#app'
,
components:
{
App}
,
router,
}
)
;
Điều gì sẽ xảy ra?
Bạn đã quen thuộc với import trong JavaScript và làm thế nào để làm điều đó. Trong đoạn mã trên, ta đã nhập mọi thứ muốn sử dụng cho SPA.
Vue.use(VueRouter) – nói với vue để sử dụng gói router, vì vậy nó có thể truy cập tất cả các chức năng của router và giải thích route mà ta sắp tạo.
const router = new VueRouter – xác định các route cho ứng dụng của ta. Thông qua ứng dụng, các định nghĩa tuyến đường sẽ không được thay đổi, vì vậy chúng tôi phải làm cho chúng không đổi.
mode – đây là chế độ mà chúng tôi muốn router sử dụng trong việc quản lý điều hướng của ứng dụng. Chế độ mặc định là chế độ hash mode sử dụng hàm băm URL để mô phỏng URL đầy đủ để trang sẽ không được tải lại khi URL thay đổi. Thứ hai là history mode, thúc đẩy API history.pushState để đạt được điều hướng URL mà không cần tải lại trang.
routes – các route mà ta muốn ứng dụng có.path – url để truy cập route nàyname – tên mà ta muốn cung cấp cho route (hữu ích khi điều hướng trong component) component – thành phần ta muốn tải khi route được truy cập. props – các thành phần dữ liệu muốn truyền cho component
Cuối cùng ta tạo ra ứng dụng Vue và định nghĩa thành phần cha mà router sẽ sử dụng làm điểm vào của nó. Trong trường hợp này ta đã sử dụng component App làm component chính.
Thiết lập vùng chứa cha
Chúng ta cần tạo component App trong resources/assets/js/component. Thêm phần sau vào nó:
template
<
>
<
div>
<
navclass
=
"navbar navbar-expand-md navbar-light navbar-laravel"
>
<
divclass
=
"container"
>
<
ulclass
=
"navbar-nav"
>
<
router-
link:
to=
"{ name: 'welcome' }"
class
=
"nav-link"
>
Home<
/
router-
link>
<
router-
link:
to=
"{ name: 'page' }"
class
=
"nav-link"
>
Spa-
Page<
/
router-
link>
<
/
ul>
<
/
div>
<
/
nav>
<
main>
<
router-
view>
<
/
router-
view>
<
/
main>
<
/
div>
<
/
template>
<
script>
export
default
{
}
<
/
script>
Vue sẽ sử dụng <router-view> làm đầu ra cho bất kỳ thành phần nào mà chúng tôi truy cập dưới dạng URL của nó. <router-link> có trách nhiệm điều hướng giữa các component.
Gắn các component
Ta cần phải làm một vài điều trước khi chúng tôi có thể sử dụng SPA. Đầu tiên cần thiết lập file vueapp.js. Ta cũng cần định nghĩa tập tin blade mà SPA của ta sẽ sử dụng làm điểm vào. Cuối cùng, ta cần phải xác định các route cho phép truy cập vào SPA.
Để thiết lập cho vueapp.js, hãy chỉnh sửa tập tin webpack.mix.js như sau:
[
.
.
.
]
mix.
js
(
'resources/assets/js/app.js'
,
'public/js'
)
.
js
(
'resources/assets/js/vueapp.js'
,
'public/js'
)
.
sass
(
'resources/assets/sass/app.scss'
,
'public/css'
)
;
Bây giờ, hãy tạo tệp vueapp.blade.php trong thư mục resources/views. Chỉnh sửa nó như sau:
<!doctype html>
<html lang="{{ app()->
getLocale
(
)
}
}
">
<
head>
<
metacharset
=
"
utf-8"
>
<
metahttp-equiv
=
"
X-UA-Compatible"
content
=
"
IE=
edge"
>
<
metaname
=
"
viewport"
content
=
"
width=
device-width, initial-scale=
1"
>
<
metaname
=
"
csrf-token"
content
=
"
{{ csrf_token() }}"
>
<
title>
Outletfor
SPA
</
title>
<
linkhref
=
"
https://fonts.googleapis.com/css?family=
Raleway:100,600"
rel
=
"
stylesheet"
type
=
"
text/css"
>
<
linkrel
=
"
stylesheet"
type
=
"
text/css"
href
=
"
css/app.css"
>
</
head>
<
body>
<
divid
=
"
app"
>
<
app>
</
app>
</
div>
<
scripttype
=
"
text/javascript"
src
=
"
js/vueapp.js"
>
</
script>
</
body>
</
html>
Sau đó xác định route trong tệp routes/web.php như sau:
[
.
.
.
]
Route
::
get
(
'/{any}'
,
function
(
)
{
return
view
(
'vueapp'
)
;
}
)
-
>
where
(
'any'
,
'.*'
)
;
Bây giờ, hãy xây dựng ứng dụng bằng cách chạy lệnh sau:
$ npm run prod
Truy cập ứng dụng trên http://127.0.0.1:8000/home và xem kết quả.
Kết luận
Trong hướng dẫn này, chúng ta đã xem xét những gì Vue.js có thể làm và cách nó có thể làm việc với Laravel. Ta cũng đã chỉ ra một số lý do tại sao bạn nên cân nhắc sử dụng Vue với Laravel. Chúng tôi cũng đã xem xét cách sử dụng Vue với Laravel, bao gồm tạo một ứng dụng SPA chạy trên Laravel.
Có rất nhiều thứ bạn có thể xây dựng với Vue và Laravel. Vue rất dễ sử dụng và hoạt động tốt với Laravel. Bạn nên đọc tài liệu để tìm hiểu về điều tuyệt vời mà bạn có thể xây dựng với nó.
