What Is Vue.js And How Do I Use Vue.js With Examples

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 and user defined directives.VueJS is a progressive JavaScript framework used to develop interactive web interfaces. Focus is more on the view part, which is the front end. It is very easy to integrate with other projects and libraries. The installation of VueJS is fairly simple, and beginners can easily understand and start building their own user interfaces.

Vue.js Directives

Vue.js uses double braces {{ }} as place-holders for data.

Vue.js directives are HTML attributes with the prefix v-

Example(1)

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

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

In the example above new Vue object is created with new Vue().

The property el: binds the new Vue object to the HTML element with id="app".

 

Vue.js Binding

When a Vue object is bound to an HTML element, the HTML element will change when the Vue object changes
Example (2)

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

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

    function Function() {
        Object.message = "abc";
    }
</script>

The v-model directive binds the value of HTML elements to application data.
Example(3)

<div id="app">
    <p>{{ message }}</p>
    <p><input v-model="message"></p>
</div>

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

Vue.js Loop Binding

Using the v-for directive to bind an array of Vue objects to an "array" of HTML element.
Example(4)

<div id="app">
    <ul>
        <li v-for="x in todos">
            {{ x.text }}
        </li>
    </ul>
</div>

<script>
    myObject = new Vue({
        el: '#app',
        data: {
            todos: [
                { text: 'JavaScript' },
                { text: 'Vue.js' },
                { text: 'HTML' }
            ]
        }
    })
</script>