Không Nên Tin

  Ở ngày 7 thì mọi thứ về môi trường mình đã cùng nhau setup xong giờ chỉ việc vào nội dung chính  Gọi API Thêm mới Giờ quay lại component ApiCalling.vue hôm ngày 7 tạo viết cho nó 1 cái form nhập liệu như sau: Ở đây đơn giản là mình sẽ khởi tạo trước cái product trong data có name rổng và price là 0 Tiếp đến phương thức createProduct là khi click submit trên form nó sẽ gọi đến hàm này. Chắc có người sẽ hỏi ủa axios ở đâu ra mà sài như đúng rồi vậy Trả lời là nó có sẳn ở resources/js/bootstrap.js nha Nếu chưa có mà bị báo lổi thì ta thêm vào window.axios = require('axios); Khai báo ở đây có nghĩa là mình được toàn quyền gọi axios từ bất kì đâu trong laravel. 1 điều nữa ủa sao biết route là /products với methods là post mà gọi như đúng rồi vậy. Dạ xin thưa trang chủ Laravel nó ghi là vầy GET               /photos                    index     photos.index GET               /photos/create     create     photos.create POST           /photos                    store         photos.store

Buổi 1: Tạo môi trường và các thứ liên quan.  Ở những ngày trước mình đạ tìm hiểu VueJS là gì, nó có gì, lúc nào thì gọi nó, thao tác giữa các component như thế nào. Ở ngày hơm nay mình làm 1 cái khác với 6 ngày trước là sài VueJS trong Laravel, đơn giản là Laravel nó có support VueJS. Bắt đầu với việc tạo dự án Laravel trước nha chạy lệnh : composer create-project laravel/laravel project-name Chi tiết tại đây nha  Chờ 1 chúc để cài xong nha, tiếp đến chúng ta cần chạy thêm 1 vài lệnh để khởi tạo phân frontend VueJS nữa nha composer require laravel/ui --dev php artisan ui vue npm install    Vào phần chính hôm nay đầu tiên mình tạo 1 component Vue mới resources/js/components đặt tên là ApiCalling.vue với nội dung như sau: Tiếp đến vào app.js khai báo component mới như sau: Cuối cùng bỏ api-calling trong template nha template nằm ở welcome.blade.php Tiếp đến mình cần tạo cho nó 1 database ten examplevue và khai báo trong .evn nha Ở ngày 7 này mình dùng Axios để gọi API CRUD(Thêm, sửa

Tình hình hiện tại là có nhiều Frameworks có tích hợp API như là Angular 2 có http module Jquery có $.ajax Còn đối với Vue 2 thì có http client mà trong trường hợp này mình sài Axios dễ sài và thao tác cực kì đơn giản. Axios là 1 thư viện của Vue nó cũng là 1 http client (nom na là bạn truye cập vào 1 website bạn là 1 client và truy cập thông qua http) Axios mặc định là dùng Promise và chạy trên cả máy khách và máy chủ(điều này giúp nó dể fetching data dễ dàng trong khi phía máy chủ đang render) Nếu nó dùng dc Promise thì tức nghĩa nó cũng sẽ có async và await Vô. cài đặt Axios như sao bạn nào sài npm thì: npm install axios --save bạn nào sài Yarn thì: yarn add axios cài xong rồi tiếp  Nếu đã dùng tới API thì chắc chắn sẽ có chứng thực không phải lúc nào mà cũng gọi khơi khơi được. Axios cung cấp cho bạn khả năng tạo base instance. Điều này có ích trong việc gọi đến 1 server khác có authorization header Ở ví dụ này mình tạo 1 file tên là http-common.js Nội dung như sau: Tiếp đến phải

Tiếp theo thì truyền dữ liệu bằng Event bus Truyển dữ liệu bằng Emit và Props mình đã nói rất kỹ ở bài trước bạn có thể tìm thấy nó ở đây  Y như Vuex mình sẽ tạo folder store/index.js Thì giờ Event bus cũng vậy tại src/ tạo 1 folder tên bus và tạo file index.js  Giải thích sơ là vầy: Ở đây mình đặt tên class là EventBus trong hàm khởi tạo có duy nhất 1 thuộc tính là bus với giá trị ban đầu là 1 vue object. Ở đây những gì mà mình nhận được là 1 thành phần hoàn toàn tách rời khỏi DOM hoặc ứng dụng Vue Class này có 4 phương thức mình có comment chức năng của từng cái Đại khái là 2 phương thức dùng để lắng nghe sự kiện on, Còn emit là để truyền đi 1 event nào đó trên toàn ứng dụng Vue Tiếp đến đoạn dưới cùng để có thể gọi từ bất cứ chổ nào thì ta export ra phương thức install với 1 tham số là vue instance. Ở trong phương thức này mình khởi tạo đối tượng EventBus sau đó mình thêm thuộc tính $bus vào trong tất cả các coponent Vue bằng cách dùng Vue.prototype.$bus = bus Với cách này thì mình

       Ở 3 ngày trước mình đã tìm hiểu sơ về VueJS, mình cũng thấy được cốt lõi của VueJS là các Component, vậy làm cách nào các Component này nói chuyện được với nhau cùng nhau tìm hiểu nào.     Thường thì có 4 cách căn bản để truyền data giữa các Component trong VueJS      1. Truyền data từ cha xuống con thông qua pops     2. Truyền data từ con lên cha sài emit event     3. Truyền giữa các component không có quan hệ thông qua Event bus     4. Thông qua store trong VueX. Tìm hiểu từng cái một nào. Mình sẽ sữ dụng lại Project của hôm trước nha 1 vs 2. Dùng Pops và Emit để truyền dữ liệu.     Để bắt đầu 1 cách ngọt liệm mình cần tạo các file như sau:     UserDashboard.vue      ListUser.vue UserDetail.vue Ví dụ này mình sẽ tạo ra 1 component chính là UserDashboard và 2 component con là ListUser và UserDetail Tiếp đến nhớ chỉ nó biết đường dẫn đến UserDashboard trong file routes.js và App.vue Để đưa 2 component con này vào root thì làm như sau: Ở bài này thì mình sẽ có cấu trúc folder như