Vue.js Tutorial For Beginners – Introduction

3775
views

Vue.js Tutorial For Beginners

Vue.js is a progressive javascript framework for creating user interfaces. Vue.js is mainly focused on view part which is similar to React.js. You will also learn in this tutorial few concepts taken from angular like data binding, directives etc. So on whole Vue.js is a combination of React.js & Angular.js.

You can read more here

Angular vs React vs Vue.js – Which Is Better?

Vue.JS is created by Evan You, an ex-employee from Google. The first version of Vue.JS was released in Feb 2014. Vue.js can be integrated into any projects to build interactive user interfaces.

vue.js tutorial for beginners

Features Of View.JS

Virtual DOM

Similar to react Js Vue.js uses virtual DOM. You can read more about virtual Dom here.

Components

Components are nothing but a piece of code that can be reused throughout your application.

Data Binding

If you are familiar with angular Js you must be familiar with data binding too. Data binding helps to manipulate or assign values to HTML attributes.

Directives

Directives are used when you want to attach a behavior to the element we use directives. Vue.js supports multiple built-in directives like v-if, v-else, v-show, v-on, v-bind, and v-model.

Computed Properties

It helps to listen to the changes that made to the UI elements.

Templates

You can write templates using HTML. And Vue.js will compile the templates and update the virtual DOM.

Lightweight

Vue.js is lightweight and very fast.

Animations/ Transitions

You can apply various transitions to HTML elements when you are updating or removing the elements from DOM.

These are some main features of vue.js.

Vue.Js Simple “Hello World” Example

  1. Create a new file on your machine called ‘index.html’.
  2. Now import vue.js library in HTML head section.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

In html body, section add below two lines of code.

 <div id="app">
 <p>{{ message }}</p>
</div>

Now add the below script in head section like this.

<script>
new Vue({
 el: '#app',
 data: {
 message: 'Hello World!'
 }
})
</script>

You can see the live demo here

https://jsfiddle.net/chrisvfritz/50wL7mdz/

This is how you create a vue.js app. Hope you got to know about vue.js and its features. In next tutorial, we will learn few more concepts about Vue.js.

Thanks for reading. Let me know if you have any queries in the comment section.

LEAVE A REPLY

Please enter your comment!
Please enter your name here