Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • What is Vue.js and Why Use it

    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 0
    • 0
    • 114
    Comment on it

    Vue.js is a library of javascript that can be used to build any web application. It has MVVM(Model-View-ViewModel) architecture. It is easy to learn and also more flexible.
    Here you will see how you can use this js in your application.

    Adding Vue.js to Your Application:

    You have to include this js inside your file like this:
     

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js">
    </script>

    Creating a View-Model:

    To create view-models, Vue class is used. You can understand view-model as an object that can display the data of your model inside a view. You can take any object literal as a model and view as any html element.

    View:
     

    <div id=myView>
    </div>

    Model:
     

    var myModel = {
      name: swati,
      age:24
    };

    Now we have both a view and a model, then we can bind them and create a view-model:
     

    var myViewModel = new Vue({
      el: '#my_view',
      data: myModel
    });

    Here el property is used for view that you have and data property defines the model that you have created.
    If you want to display your model’s data inside your view element, you can add the string inside {{}} this and put it there in view element.

    <div id="myView">
      {{ name }} is {{ age }} years old.
      <!-- Evaluated to swati is 24 years old" -->
    </div>


    Note that  any changes that you make to your model will also reflect to your view.

     

 1 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: