Vue.JS for Beginners
Vue.JS for Beginners

What is Vue.js ?

Vue pronounced as vjuː , It is a  progressive framework like view , Vue.js lets you extend HTML with HTML attributes called directives . Vue.js directives offers functionality to HTML applications . Vue.js provides built-in directives ( which when we add to our HTML elements , give us dynamic behavior ) and user defined directives .

Why we are using VUE JS ?

VueJS is a progressive JavaScript framework which is used to develop interactive web interfaces. Focus is more on the view part, which is the front end. Main Focus in VueJs is on View part , that is front end . One of the best quality of VueJs is that , it is very easy to integrate with other projects and libraries .

The installation of “ Vue JS ” is fairly simple, and beginners can easily understand and start building their own user interfaces using Vue JS. 

Vue.js Directives :

Vue.js uses double braces  {{ }}  as place-holders for data. , Vue.js directives are HTML attributes with the prefix v- .

Example of Vue JS :

<div id=”app”>
<h1>{{ message }}</h1>
</div>
<script> var myObject = new Vue ({
    el: ‘#app’,
    data: {message: ‘Hello Digitechbits’}
})
</script>

In the example above for vue js, a new Vue object is created with new Vue(). . The property el: binds the new Vue object to the HTML element with id=”app”

We can understand the code very simply , First we will open a div with any id , here “app” , then we create a Vue JS structure inside HTML tag <h1> </h1> , here it is message inside double braces {{ }} . Now we will write a script Where el: will bind the Vue object with the Html element that we had created with the id app . Now we can write our text for message as {message: ‘Hello Digitechbits’} .

Vue.js Binding :

The most basic form of data binding in Vue JS is text interpolation for that we use “Mustache” syntax ::–double curly braces {{..}} .

As Example : <span> Message: {{ your message }} </span> .

The double mustaches ie : {{..}} , interprets the data as plain text, not HTML.If we need to output the real HTML, we use triple mustaches , {{{ … }}} Example : <div>{{{ html }}}</div>

When a Vue object is bound to an HTML element, the HTML element will change when the Vue object changes , As :

<div id=”app”>
{{ message }}
</div>

<script> var myObject = new Vue({
    el: ‘#app’,
    data: {message: ‘Hello Vue!’}
})

function myFunction() {
    myObject.message = “Abdul Kalam”;
}
</script>

Subscribe Now to get Free Project On Veu Js *

3 Replies to “Vue.JS for Beginners”

  1. Very Well defined concept about Vue.js .Easy to understand
    it is very helpfull for me
    thank you digitechbits

Leave a Reply

Your email address will not be published.