Tutorials‎ > ‎

Vue Js Tutorial

posted Mar 30, 2017, 4:24 AM by Denny Angkasa

Setting Up and Installing Dependencies

 

Create a folder that we are going to use for our project. Open a command window inside the folder and use the command “npm init” to create a package.json file for our project.

 

Now we are going to install the dependencies for our project. Use the command

npm install vue vue-resource bootstrap --save

 

Now our dependencies should be installed and we are ready to code our application.

 

The Application

 

Initialization

Create the files index.html and app.js. We will use index.html as our view and app.js as the base for our Vue application. The goal of this tutorial is to help readers understand Vue.js basics, data binding, and components. By the end of the tutorial we would have a very simple application for product management.

 

Let’s start with index.html. The base of our Vue application is going to be very simple. We are going to use a div with a specific ID and bind it to our Vue Javascript. Let’s use a div with id=products for that.

1.   <!DOCTYPE html>  

2.   <html>  

3.   <head>  

4.       <title>Vue Test</title>  

5.       <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">  

6.   </head>  

7.   <body>  

8.       <div id="products">  

9.         

10.     </div>  

11.   

12.     <script src="node_modules/vue/dist/vue.js"></script>  

13.     <script src="node_modules/vue-resource/dist/vue-resource.js"></script>  

14.     <script src="app.js"></script>  

15. </body>  

16. </html>  

 

Hello World

Now we’re going to app.js to set up our Vue Application.

1.   new Vue({  

2.       el: '#products',  

3.       data: {  

4.           text: 'Hello World'  

5.       }  

6.   });  

 

As you may have noticed, we initialize the application by creating a new Vue object. The el attribute refers to the id of element in the view, and data attribute is used to contain the data for our application. In the above example, we have a data with the name of “text” and the value of “Hello World”. Now we are going to use the text data in our view. To print out data in view is a very simple task. We use the syntax {{ DATA_NAME }}.

1.   <!DOCTYPE html>  

2.   <html>  

3.   <head>  

4.       <title>Vue Test</title>  

5.       <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">  

6.   </head>  

7.   <body>  

8.       <div id="products">  

9.           {{text}}  

10.     </div>  

11.   

12.     <script src="node_modules/vue/dist/vue.js"></script>  

13.     <script src="node_modules/vue-resource/dist/vue-resource.js"></script>  

14.     <script src="app2.js"></script>  

15. </body>  

16. </html>  

 

 

Components

We can use components for reusability and modularize our application. Let’s try creating a component.

1.   Vue.component('test-component', {  

2.       props: ['text'],  

3.       template: `  

4.           <div>  

5.               {{text}}  

6.           </div>  

7.       `  

8.   });  

9.     

10. new Vue({  

11.     el: '#products',  

12.     data: {  

13.         text: 'Hello World'  

14.     }  

15. });  

 

And use it in our view

1.   <!DOCTYPE html>  

2.   <html>  

3.   <head>  

4.       <title>Vue Test</title>  

5.       <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">  

6.   </head>  

7.   <body>  

8.       <div id="products">  

9.           <test-component :text="text">  

10.         </test-component>  

11.     </div>  

12.   

13.     <script src="node_modules/vue/dist/vue.js"></script>  

14.     <script src="node_modules/vue-resource/dist/vue-resource.js"></script>  

15.     <script src="app2.js"></script>  

16. </body>  

17. </html>  

 

As you may notice, we passed the text property to the child component, and use it as output in the child component.

 

Insert Product Component

We are going to create a component that we will use to insert a new product.

1.   Vue.component('insert-product-component', {  

2.       props: ['products'],  

3.       data: function() {  

4.           return {  

5.               previousId: 3,  

6.               product: {  

7.                   name: '',  

8.                   stock: 0,  

9.                   price: 0  

10.             }  

11.         };  

12.     },  

13.     methods: {  

14.         addProduct: function() {  

15.             this.product.id = ++this.previousId;  

16.             this.product.price = parseInt(this.product.price);  

17.             this.product.stock = parseInt(this.product.stock);  

18.             this.products.push(this.product);  

19.   

20.             this.product = {  

21.                 name: '',  

22.                 price: 0,  

23.                 stock: 0  

24.             };  

25.         }  

26.     },  

27.     template: `  

28.         <div class="container">  

29.             <form v-on:submit.prevent="addProduct">  

30.                 <div class="page-header">  

31.                     <h1>Insert</h1>  

32.                 </div>  

33.                 <div class="form-group">  

34.                     <label>Name</label>  

35.                     <input type="text" class="form-control" v-model="product.name"/>  

36.                 </div>  

37.                 <div class="form-group">  

38.                     <label>Price</label>  

39.                     <input type="number" class="form-control" min="0" v-model="product.price"/>  

40.                 </div>  

41.                 <div class="form-group">  

42.                     <label>Stock</label>  

43.                     <input type="number" class="form-control" min="0" v-model="product.stock"/>  

44.                 </div>  

45.                 <button class="btn btn-primary">Save</button>  

46.             </form>  

47.         </div>  

48.     `  

49. });  

 

The Main Vue Application

The main Vue application will be used to store our data, with the insert product component as its child. We are also going to put in 3 dummy data as starting data.

1.   new Vue({  

2.       el: '#products',  

3.       data: {  

4.           product: {  

5.               name: '',  

6.               price: 0,  

7.               stock: 0  

8.           },  

9.           products: []  

10.     },  

11.     mounted: function() {  

12.         this.fetchProducts();  

13.     },  

14.     methods: {  

15.         fetchProducts: function() {  

16.             var products = [  

17.                 {  

18.                     id: 1,  

19.                     name: 'Test',  

20.                     price: 15000,  

21.                     stock: 50  

22.                 },  

23.                 {  

24.                     id: 2,  

25.                     name: 'Test2',  

26.                     price: 13000,  

27.                     stock: 67  

28.                 },  

29.                 {  

30.                     id: 3,  

31.                     name: 'Test3',  

32.                     price: 25000,  

33.                     stock: 40  

34.                 }  

35.             ];  

36.   

37.             this.$set(this'products', products);  

38.         }  

39.     }  

40. });  

 

Now we will adjust our index.html

1.   <!DOCTYPE html>  

2.   <html>  

3.   <head>  

4.       <title>Vue Test</title>  

5.       <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">  

6.   </head>  

7.   <body>  

8.       <div id="products">  

9.           <insert-product-component :products="products">  

10.         </insert-product-component>  

11.         <table class="table table-striped table-hover" style="margin-top: 20px;">  

12.             <tr>  

13.                 <th>Id</th>  

14.                 <th>Name</th>  

15.                 <th>Price</th>  

16.                 <th>Stock</th>  

17.             </tr>  

18.             <tr v-for="product in products">  

19.                 <td>{{ product.id }}</td>  

20.                 <td>{{ product.name }}</td>  

21.                 <td>{{ product.price }}</td>  

22.                 <td>{{ product.stock }}</td>  

23.             </tr>  

24.         </table>  

25.     </div>  

26.   

27.     <script src="node_modules/vue/dist/vue.js"></script>  

28.     <script src="node_modules/vue-resource/dist/vue-resource.js"></script>  

29.     <script src="app.js"></script>  

30. </body>  

31. </html>  

 

The Result



Comments