What is Vue.js?
VueJS is an open source progressive JavaScript framework for developing an interactive web interface. It is one of the most popular web development frameworks. Vue focuses on the view layer. It is easy to integrate into big projects requiring front-end development without any issues.It is very simple to install VueJS. In a matter of minutes, any developer can build interactive web interfaces.Directives
In Vue.js, uses double braces {{ }} for data placeholders.Vue.js directives are HTML attributes beginning with v-Vue Example
The following example creates a new Vue object with new Vue().In this case, el: binds the new Vue object to the HTML element with id=”app”.Example: <div id="app"> <h1>{{ message }}</h1> </div> <script> var myObject = new Vue({ el: '#app', data: {message: 'Hello Vue!'} }) </script>
Binding
Binding a Vue object to an HTML element results in the HTML element changing when the Vue object changes:Example: <div id="app"> {{ message }} </div> <script> var myObject = new Vue({ el: '#app', data: {message: 'Hello Vue!'} }) function myFunction() { myObject.message = "John Doe"; } </script>
Two-Way Binding
The v-model directive binds the value of HTML elements to application data.This is called two-way binding:Example: <div id="app"> <p>{{ message }}</p> <p><input v-model="message"></p> </div> <script> var myObject = new Vue({ el: '#app', data: {message: 'Hello Vue Developers!'} }) </script>
Loop Binding
The following example shows how you can use the v-for directive to bind an array of Vue objects to an array of HTML elements:Example: <div id="app"> <ul> <li v-for="x in todos"> {{ x.text }} </li> </ul> </div> <script> myObject = new Vue({ el: '#app', data: { todos: [ { text: 'Learn JavaScript' }, { text: 'Learn Vue.js' }, ] } })In the next article, we will dive deeper into Vue Js. So stay tuned to get information about blogs by hitting the Like button on our facebook page.
