Vue.js is an awesome library for creating interactive webpages.

If you find yourself needing 2-way databinding and event driven code, you'll have to checkout Vue.js. If you're semi-familiar with Backbone, Ember, AngularJS, Polymer, or any other type of javascript front-end framework, you'll probably find Vue.js to be a breaze to work with.

Even if you don't have any experience with front-end frameworks you should still read on. Vue.js is super easy to use and understand.

Let me show you a quick code snippet on how you can add 2-way data-binding with a javascript variable and a textbox input value, here is a simple html file:


<!DOCTYPE html>
<html>
  <head>
    
  </head>
  <body>
    
    <div id="container">
      <input type="text" id="container" placeholder="enter text" v-model="value">
      <p>{{ value }}</p>
    </div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.11.10/vue.min.js"></script>
    <script>
      
      new Vue({
        el: '#container',
        data: {
          value: '',
        },
      });
      
    </script>
    
  </body>
</html>

So, in the code above we create a new textbox, then inside our Vue object we tell it which container or element we want to use. Then any elements inside the element can be bound with data using Vue.js. Then we tell the Vue which variables we want to make use of.

Checkout a live example of the code below:

Be sure to read more at the Vue.js website. There are so many great things you can do with this amazing library :)


Login

or Sign Up

Sign Up

or Login
×
Want to create your own SAAS?

I can teach you to create your own Software as a Service. Click here to learn more!

Visit SAAS Adventure!