What is VueJS and How to use VueJS?
Want to start learning VueJS? so you are at right place in this tutorial series I am gone give you a start from very basic of vuejs to the advanced level.
VueJS is very popular framework for developing user interface, the framework more focus on User interface meaning the View from MVC pattern, currently VueJS begin used in Laravel Framework it is growing with Laravel, if your a Laravel developer or want to learn Laravel framework VueJS is going to be very supportive and usable while your going to start working on live application using Laravel framework it will boost your career
If you install new Laravel 5 Project you will see VueJS is already configured and ready to with sample template and VueJS initialisation, so this is the example of importance learning VueJS.
This tutorial preferred for beginner who is totally new in VueJS and want to start learning VueJS from scratch.
How to install VueJS?
There are three different ways to install VueJS, those are using CDN, NPM or CLI here I would recommend to use CDN as it is easy to begin with.
We can import Vuejs CDN library as showing below:
<script src="https://unpkg.com/vue@2.3.4"></script>VieJS Simple Data binding
VueJS supports dynamic data binding to the DOM with very simple code, following example shows how we can bind data and display on to the webpage
<!DOCTYPE html>
<html>
<head>
<title>VueJS 2.0</title>
</head>
<body>
<div id="app">
<input type="text" v-model="greeting">
{{ greeting }}
</div>
<script src="https://unpkg.com/vue@2.3.4"></script>
<script>
var app = new Vue({
el: "#app",
data: {
greeting: "Welcome"
}
});
</script>
</body>
</html>If you try to run above script into the browser it should act like below result:
Try to change the text from the text box and see the magic, text should auto reflect at both places where we are displaying the data
Next let’s start by learning few little tricks by listing data from array in using vueJs directives.
Listing Data from an Array Object by Using VueJS Directive:
In the below example we are using an VueJS directive called `v-for`, v-for directive is used to iterate database from collection of list or we can the list out the items from the array, as you see in following script we an items object which has number of items added and we are simple listing them using the directive and iterating the listing tag.
<!DOCTYPE html>
<html>
<head>
<title>VueJS 2.0</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in items">
{{ item }}
</li>
</ul>
</div>
<script src="https://unpkg.com/vue@2.3.4"></script>
<script>
var app = new Vue({
el: "#app",
data: {
items: ['first', 'second', 'third', 'fourth', 'fift', 'six']
}
});
</script>
</body>
</html>Output of the above script should look like below screen:
VueJS Data Binding to the Select Option Form Field:
We often needs to render data into the select form field along with the options, so hear we gone learn a how to bind select option field in vuejs along with id and name, for example we may want to bind a `cities` to the `select` field and cities would have two important properties from the database that is a id of the city and the name of the city, so select option field would have a value as city id and text should be the name of the city
So in the below example we are doing similar operations we simply have a items array along with data and we are using this data to render our select field using v-for directive.
Anther important point to note down is how to get selected id from select field in vuejs, we are solving this answer too, I am using v-model to bind selected with the select field to get selected id by user.
<!DOCTYPE html>
<html>
<head>
<title>VueJS 2.0</title>
</head>
<body>
<div id="app">
<select v-model="selected">
<option disabled value="">Select Item</option>
<option v-for="item in items" v-bind:value="item.id">{{ item.text }}</option>
</select>
<p>
<b>Selected</b>: {{ selected }}
</p>
</div>
<script src="https://unpkg.com/vue@2.3.4"></script>
<script>
var app = new Vue({
el: "#app",
data: {
items: [
{id: 1, text: 'first'},
{id: 2, text: 'second'},
{id: 3, text: 'third'},
{id: 4, text: 'fourth'},
{id: 5, text: 'fifth'},
{id: 6, text: 'six'}
],
selected: ''
}
});
</script>
</body>
</html>You can the live instance result of the above code:
How get multiple selected items from select field in VueJS?
It is much easier in vuejs to get multiple selected items from the select field, we just need to make few changes in the above script to demonstrate how should we get selected items in array.
Look at the below script:
<!DOCTYPE html>
<html>
<head>
<title>VueJS 2.0</title>
</head>
<body>
<div id="app">
<select v-model="selected" multiple>
<option disabled value="">Select Item</option>
<option v-for="item in items" v-bind:value="item.id">{{ item.text }}</option>
</select>
<p>
<b>Selected</b>: {{ selected }}
</p>
</div>
<script src="https://unpkg.com/vue@2.3.4"></script>
<script>
var app = new Vue({
el: "#app",
data: {
items: [
{id: 1, text: 'first'},
{id: 2, text: 'second'},
{id: 3, text: 'third'},
{id: 4, text: 'fourth'},
{id: 5, text: 'fifth'},
{id: 6, text: 'six'}
],
selected: []
}
});
</script>
</body>
</html>Check the result from the above script:
Conclusion of the tutorial:
Points to note down what we have learn from this tutorial, especially the focus points of your learning:
- Get started with VueJS from scratch
- How to import/add vuejs library in page
- How to display data on webpage ( text box or simple text )
- How to use VueJs model directive
- How to use VueJs v-for directive
- VueJS Databinding
- VueJS Data rendering in to the select field along with the value and text
- Get selected option from the select field
- Get multiple selection options from the select field.
In next tutorial we are going to learn dynamic attributes binding and class name binding in VueJS – VueJS 2.0 dynamic Attribute binding Class Name binding
Let me know if you get any issue related to this tutorial using comment box below.
Happy Learning!
