In our previous blog we have learned about vue.js and how to install vue.js, if not you can read it by following the link https://www.codersarts.com/post/vue-js-introduction-and-installation.
Now, in this blog we are going to learn some more concepts about vue.js
What is Vue.js ?
Vue.js is an open source JavaScript framework with various optional tools used to develop interactive web interfaces. It is one of the famous frameworks used to simplify web development. Vue.js focuses on the view layer. It can be easily integrated into big projects for front-end development without any issues.
Features of Vue.js
These are the some of the features of Vue.js:
1. Virtual DOM: Vue.js makes the use of virtual DOM, which is also used by other frameworks such as React, Ember, etc.
2. Data Binding: The data binding feature helps manipulate values to HTML attributes, change the style, assign classes with the help of binding directive called v-bind.
3. Components: Components are one of the important features of Vue.js that helps create custom elements, which can be reused in HTML.
4. Event Handling: v-on is an attribute added to the DOM elements to listen to the events in Vue.js.
5. Animation & Transition: Vue.js provides various ways to apply transition to HTML elements when they are added or removed from the DOM. We can easily add third party animation libraries and also add more interactivity to the interface.
6. Lightweight: Vue.js script is very lightweight and the performance is also very fast.
7. Templates: Vue.js provides HTML-based templates that bind the DOM with the Vue instance data. Vue compiles the templates into virtual DOM Render functions.
8. Directives: Vue.js has built-in directives such as v-if, v-else, v-show, v-on, v-bind, and v-model, which are used to perform various actions on the frontend.
9. Watchers: Watchers are applied to data that changes.
10. Routing: Navigation between pages is performed with the help of vue-router.
11. Vue-CLI: Vue.js can be installed at the command line using the vue-cli command line interface. It helps to build and compile the project easily using vue-cli.
Example:
As Vue is basically built for front-end development, we are going to deal with lot of HTML, JavaScript and CSS files.
In this example, we are using the development verison of vuejs. To run this example you have to download the development version of vue.js and have to place it in a folder named js.
Output:
We have created our first app using vue.js.
Vue.js Instance
To create an application in vue.js, we have to create new Vue instance with the vue function.
Syntax:
var app = new Vue({ // options })
We are going to understand it with the help of an example:
instance.html
instance.js
For Vue, there is a parameter called el. It takes the id of the DOM element. In the above example, we have the id #vue_dt. It is the id of the div element, which is present in .html file.
<div id="vue_dt"></div>
Now, we have defined the data object. It has the values firstname, lastname, and address.
The same is assigned inside the div. We can see it here,
<div id="vue_dt"> <h1>Firstname : {{firstname}}</h1> <h1>Lastname : {{lastname}}</h1> </div>
The Firstname : {{firstname}} value will be replaced inside the interpolation, i.e. {{}} with the value assigned in the data object. The same will happen with the last name.
Next, we have methods where we have defined a function mydetails and a returning value. It is assigned inside the div as
<h1>{{mydetails()}}</h1>
Hence, inside {{}} the function mydetails will be called. The value returned in the Vue instance will be printed inside {{}}.
Output:
Vue.js Template
In this section, we will learn how to get an output in the form of HTML template on the screen.
template.html
template.js
Now, when we show the html content on the page, with interpolation, i.e. with double curly brackets, this is what we will get in the browser.
Output:
Here, we see that the html content is displayed the same way we have written in the variable htmlcontent, this is not what we need as the output, we need it to be displayed in a proper HTML content on the browser.
For this, we will have to use v-html directive. The moment we assign v-html directive to the html element, Vue.js knows that it has to display it as HTML content.
Now we are going to add v-html directive in the .html file and we will see the difference.
template.html
Now, we don’t need the double curly brackets to show the HTML content, instead we have to use v-html = ”htmlcontent” where htmlcontent is defined inside the js file as:
template.js
Now, when we display the htmlcontent will look like this.
Output:
If you have any queries regarding this blog or need any help you can contact us on: contact@codersarts.com