1. Chat NodeJS + VueJS
  2. Create Cart Laravel 5.4 +VueJS
  3. Create Form Register using Nodejs + Vuejs
  4. Create QR Code in VueJS
  5. Create Template Vuejs and Laravel 5.4
  6. Deploying Vuejs to Heroku
  7. Hướng dẫn kết hợp Nodejs + Vuejs
  8. Read Data From File Using FileReader API in Vuejs
  9. Passing data from Laravel to Vue
  10. Multiple Subcategories in Laravel 5.8 + Vue
  11. Laravel 5.7 + Vue SPA
  12. Send Mail using Laravel 5.4 + VueJS
  13. Transition in VueJS
  14. Sử dụng Routes trong Vuejs
  15. Sử dụng Props trong Vuejs
  16. Sử dụng Axios Get API trong Vuejs
  17. SHOW DATA VUEJS IN TEMPLATE BLADE LARAVEL
  18. Shopping list using Vuejs
  19. Xây dụng chức năng Register+ Login bằng Laravel 5.4 + VueJS
  20. Video Create Form Register and Login + Chat Real Time Using Nodejs + Vuejs
  21. Using v-for in VueJS
  22. Tạo ứng dụng Laravel 5.4 kết hợp với Vuejs

Shopping list using Vuejs

min read

Đã lâu rồi không viết bài viết chia sẻ nào, này mình chia sẻ nói về VueJS, bài này cũng không có hấp dẫn gì hết, chỉ để mọi người hiểu về VueJS tí thôi, này mình làm một Demo tạo Shoping cart mình dùng Vuejs.

Hiện nay Vue.js là đang ở version 2, rất là được nhiều người dùng tới vì nó rất dễ sử dụng và tích hợp với các Framework khác như: Laravel,Nodejs, dùng để xây dựng một ứng dụng website Single-Page Applications (SPAs)

Đầu tiên để sử dụng được Vue.js thì các bạn thêm thư viện Vue.js vào file template của mình thông qua CDN hoặc npm install cài đặt Vue.js

Mình sẽ tạo một file index.html với nội dung như sau:

<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../bootstrap-4/css/bootstrap.min.css" rel="stylesheet">
    <script src="../bootstrap-4/js/jquery-3.3.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div class="container" id="basic-01">
        <div class="row">
            <div class="col-md-2"></div>
            <div class="col-md-8">
                <!--code-->
            </div>
            <div class="col-md-2"></div>
        </div>
    </div>
</body>
</html>

Ở bên trên mình thêm thư viện bootrstrap và vue.js thông qua CDN, giờ mình muốn tạo một chức năng thêm một item thì item đó được lưu vào mảng và hiện thị ra cho người dùng xem, tính tổng số tiền, tổng số sản phẩm hiện có, giống giao diện dưới đây.

Để làm được như vậy các bạn phải thiết kế html như sau:

<h2>{{title}}</h2>
                <div class="form-group">
                    <label>Add phone</label>
                    <input type="text" name="phone" placeholder="Phone name?" v-model="item.name" />
                    <input type="number" name="price" placeholder="price?" v-model="item.price" />
                    <button type="button" class="add-phone" v-on:click="addItem">Add</button>
                    <br/>
                    <span>Count:{{count}}</span>
                    <br/>
                    <span>price:{{price}}</span>
                </div>
                <h3>Lists all</h3>
                <ul class="list-group">
                    <li class="list-group-item" v-for="(item,index) in items">{{item.name}}</li>
                </ul>

Ở bên trên mình tạo một cái biến {{title}} để hiển thị title của ứng dụng,với lại mình vùng v-model="item.name" và v-model="item.price" dùng để lưu giá trị mà mình nhập vào input

Để thêm được sản phẩm bạn cần tạo một cái hàm(function) để thực hiện thao tác đó, mình tạo một function tên là addItem, thông qua v-on:click="addItem" hoặc bạn dùng @click="addItem" cũng được, giờ đây chúng ta cần viết Vue.js để thực hiện thao tác bên trên như sau:

var items= [
        {
            "name": "Iphone 6 64GB",
            "price":6000000
        },
        {
            "name": "Xiaomi Note 4 32GB",
            "price":4000000
        }
    ];
    var app = new Vue({
        el: '#basic-01',
        data: {
            title: "Shop phone",//title app
            item:{},// push item from input 
            items: items,
            count:items.length,//length items 
            price:0 //price
        },
        created:function () {
           this.sumPrice();
        },
        methods:{

            //function add item
            addItem:function(){
                console.log(this.item.name);
                //add item push items
                this.items.push({
                    "name":this.item.name,
                    "price":this.item.price
                })
                
               
                //update count
                this.count=this.items.length;

                //update price
                this.price = parseInt(this.price)+parseInt(this.item.price);

                 //empty input 
                 this.item.name=null;
                 this.item.price=null;

            },

            //function sum price items
            sumPrice:function(){
                items.forEach(element => {
                    this.price+=parseInt(element.price);
                });
            }  
        }
    })

Ở bên trên mình có chú thích sẵn các bạn có thể thấy, các bạn có thể xem file toàn bộ soucre sau đây:

<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../bootstrap-4/css/bootstrap.min.css" rel="stylesheet">
    <script src="../bootstrap-4/js/jquery-3.3.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div class="container" id="basic-01">
        <div class="row">
            <div class="col-md-2"></div>
            <div class="col-md-8">
                <h2>{{title}}</h2>
                <div class="form-group">
                    <label>Add phone</label>
                    <input type="text" name="phone" placeholder="Phone name?" v-model="item.name" />
                    <input type="number" name="price" placeholder="price?" v-model="item.price" />
                    <button type="button" class="add-phone" v-on:click="addItem">Add</button>
                    <br/>
                    <span>Count:{{count}}</span>
                    <br/>
                    <span>price:{{price}}</span>
                </div>
                <h3>Lists all</h3>
                <ul class="list-group">
                    <li class="list-group-item" v-for="(item,index) in items">{{item.name}}</li>
                </ul>
            </div>
            <div class="col-md-2"></div>
        </div>
    </div>
</body>
<script src="../bootstrap-4/js/bootstrap.min.js"></script>
<script>
    var items= [
        {
            "name": "Iphone 6 64GB",
            "price":6000000
        },
        {
            "name": "Xiaomi Note 4 32GB",
            "price":4000000
        }
    ];
    var app = new Vue({
        el: '#basic-01',
        data: {
            title: "Shop phone",//title app
            item:{},// push item from input 
            items: items,
            count:items.length,//length items 
            price:0 //price
        },
        created:function () {
           this.sumPrice();
        },
        methods:{

            //function add item
            addItem:function(){
                console.log(this.item.name);
                //add item push items
                this.items.push({
                    "name":this.item.name,
                    "price":this.item.price
                })
                
               
                //update count
                this.count=this.items.length;

                //update price
                this.price = parseInt(this.price)+parseInt(this.item.price);

                 //empty input 
                 this.item.name=null;
                 this.item.price=null;

            },

            //function sum price items
            sumPrice:function(){
                items.forEach(element => {
                    this.price+=parseInt(element.price);
                });
            }  
        }
    })


</script>

</html>

Vue.js rất thú vị và hay, các bạn có thể vào trang chủ website và học nó nhé, hiện nó có nativescript-vue để dùng xây dựng ứng dụng app trên IOS và Android đã được phát triển từ tháng 2 vừa qua!

x

Ủng hộ tôi bằng cách click vào quảng cáo. Để tôi có kinh phí tiếp tục phát triển Website!(Support me by clicking on the ad. Let me have the money to continue developing the Website!)