Xin chào mọi người này mình chia sẻ với mọi người cách sử dụng Vuejs trong template blade của Laravel. Vì sao mình làm bài hướng dẫn chia sẻ này mình nhìn thấy, hiện này có rất là nhiều hosting người dùng không có hổ trợ Server, Nên khi chúng ta chuyển khai một ứng dụng chạy bằng webserver, thì khi upload lên một hosting không có chức nâng hổ trợ chạy server thì ứng dụng đó sẻ không hoạt động được.
Đầu tiên bạn tạo một project Laravel 5.6 hoặc các phiên bản khác, nhưng đồi hỏi bạn cần kiểm tra php của bạn để tải phiên bản phù hợp nhé, bạn có thể xem bài CREATE TEMPLATE VUEJS IN LARAVEL 5.4 để hiểu về sự kết hợp Vuejs + Laravel như thế nào nhé
Sau khi bạn tải về xong bạn vào project vào thư mục Views/layouts tạo file tên là main.blade.php, trong file này chúng ta tạo một cấu trúc giao diện chính cho template blade, để các template blade khác kế thừa từ giao diện từ main.blade.php
Cấu trúc thư mục views trong project Laravel
-views
---layouts
-----main.blade.php
---pages
-----home.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet">
<title>@yield('title')</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script
</head>
<body>
<header>
@include('../blocks/header')
</header>
<section>
@yield('content')
</section>
<footer>
<div class="box-footer">
<p>CopyRight@2018 by Skipperhoa</p>
</div>
</footer>
</body>
</html>
Bên trên là file main.blade.php nằm trong thư mục layouts của mình, giờ chúng muốn sử dụng được Vuejs thì các bạn import đường link vuejs CDN gắn vào bên trên head của file main.blade.php nhé
Đều chúng ta quan tâm nhất là làm sao để dùng Vuejs trong blade vì cú pháp hiển thị dữ liệu nó lại giống với laravel như cặp dấu {{}} thì khi sử dụng bạn sẽ gặp báo lỗi.
Giờ ta vào thư mục views/pages tạo file tên là home.blade.php kế thừa từ main.blade.php như sau:
@extends('layouts.main')
@section('title','LẬP TRÌNH WEBSITE | HOANGUYENIT')
@section('content')
<div id="box-content">
<ul>
<li v-for="(item, index) in items">
@{{item.name}}
<img :src="item.images"/>
<img v-bind:src="item.images"/>
<a :href="item.linkUrl"/>
</li>
</ul>
</div>
<script>
new Vue({
el:"#box-content",
data:{
items:[
{
"name":"Cafe",
"images":"http://link-images-cafe.ds/cafe.jpg",
"linUrl":"http://hoanguyenit.com/cafe.jpg"
},
{
"name":"Cafe sửa",
"images":"http://link-images-cafe.ds/cafe-sua.jpg",
"linUrl":"http://hoanguyenit.com/cafe-sua.jpg"
}
]
}
})
</script>
@endsection
Các bạn nhìn đoạn trong section('content') của mình có đoạn show dữ liệu ra bằng Vuejs, các bạn sẽ thấy @{{item.name}} để show được dữ liệu trong Vuejs bạn cần thêm @ vào phía trước dấu {{}} thì Vuejs mới hiểu được nhé.
Bây giờ ta thử sử dụng cách khác thử nhé, mình sử dụng Vue.component export một template, trong @section('content') mình viết như sau:
<div id="box-content">
<ul>
<my-show v-for="(item, index) in items"
v-bind:name="item.name"
v-bind:src="item.images"
></my-show>
</ul>
</div>
<script>
Vue.component('my-show', {
props: ['name','src'],
template:`<li>@{{name}}
<img :src="src"/>
</li>`,
})
new Vue({
el:"#box-content",
data:{
items:[
{
"name":"Cafe",
"images":"http://link-images-cafe.ds/cafe.jpg",
"linUrl":"http://hoanguyenit.com/cafe.jpg"
},
{
"name":"Cafe sửa",
"images":"http://link-images-cafe.ds/cafe-sua.jpg",
"linUrl":"http://hoanguyenit.com/cafe-sua.jpg"
}
]
}
})
</script>
Bên trên là những cú pháp bạn có thể sử dụng Vuejs được trong template blade của Laravel, bên cạnh đó bạn cũng có thể sử dụng Axios lấy dữ liệu json hay các methods trong Vuejs cũng được nhé, nhưng nếu bạn muốn sử dụng Axios bạn cần add link CDN của Axios vào layouts main.blade.php giống như mình chèn đường link CDN của Vuejs vào laravel nhé.
Các bạn nhớ là mình không dùng import được file template vuejs có đuôi .vue nhé, vì nếu bạn để đuôi .vue và import vào template blade thì laravel không hiểu được và vuejs cũng không thể import được, file .vue chỉ có thể sử dụng được khi bạn chạy webpack trong laravel và vuejs, bên cạnh đó bạn cần cài thư viện vue, lúc đó bạn mới có thể sử dụng được Vuejs.
