Blog

About Vue.js

Vue.js is getting more and more popular, becoming a meaning competitor to frameworks like Angular or React. Developers’ love towards Vue.js is increasing every day. As a beginner-friendly front-end framework, it successfully conquers the hearts of junior front-end developers and people who just started to learn front-end programming. The first thing before staring to learn Vue is to check why it was created. What problem was solved with it and of course read the documentation.

Vue.js has downright excellent official documentation that lets developers discover pretty much every aspect of Vue and its ecosystem. The official guide has examples and detailed descriptions. API docs target most issues devs might encounter while coding.

All you really need to get going with Vue is a basic understanding of JavaScript, HTML, and CSS. Although not necessary, some experience with using frameworks is also welcome, even more so if you’re after building more complex web apps.

I have been using jQuery for long time and I wanted to see how things can be done with Vue. In this article I’m going to focus on what I consider “core” jQuery use cases. I won’t cover every single possible feature but instead take a “I often did [X] with jQuery” approach that may be more relatable to people considering learning Vue.

Vue has one significant difference from jQuery. When starting a with Vue project, we start by defining an “area” in the DOM we want it to focus on. In a typical jQuery application, we may write code like:

      $(document).ready(function() {
          $('#sidebar') // something...

          $('#loginForm') // something... 
        });
        

And in Vue we specify what we're working with in:

        new Vue({
          el:'#loginForm',
          // Code here...
        });

        new Vue({
          el:'#sideBar',
          // Code here...
        });
        

Another aspect you’ll find interesting, or scary, is how to “find stuff in the DOM.” That’s a bit vague, but let’s consider a firm example. We have a button, and when it’s clicked, we make something happen. Here’s an abbreviated example of how this could look:

       <button id="myButton">Click Me!</button>
        
        <script>
        $(document).ready(function() {
          $('#myButton').click(function() {
            alert(1);
          });
        });
        </script>
        

Now let's compare that to how it can be done with Vue:

       <div id="app">
          <button v-on:click="doSomething">Click Me!</button>
        </div>

        <script>
        const app = new Vue({
          el:'#app',
          methods: {
            doSomething: function() {
              alert(1);
            }
          }
        });
        </script>
        

The Vue application is a bit more verbose, but note how the markup has a direct connection between the action (“click”) and the function that will be called. Vue’s code doesn’t have a tie back to the DOM (outside of the el portion where we define where it needs to work). This was easily one of the things that sold me on Vue the most — it feels easier to tell what is going on. Also, I didn’t need to worry so much about the ID value and selectors. If I change the class or ID of the button, I don’t need to go back into my code and worry about updating selectors.

#Forms

A simple example of reading a few form fields with jQuery would look like:

       <form>
          <input type="number" id="first"> + 
          <input type="number" id="second"> =
          <input type="number" id="sum"> 
          <button id="sumButton">Sum</button>
        </form>

        <script>
        $(document).ready(function() {
          let $first = $('#first');
          let $second = $('#second');
          let $sum = $('#sum');
          let $button = $('#sumButton');
          
          $button.on('click', function(e) {
            e.preventDefault();
            let total = parseInt($first.val(),10) + parseInt($second.val(),10);
            $sum.val(total);
          });
        });
        </script>
        

And the same stuff with Vue would look like:

         <form id="myForm">
          <input type="number" v-model.number="first"> + 
          <input type="number" v-model.number="second"> =
          <input type="number" v-model="sum"> 
          <button @click.prevent="doSum">Sum</button>
        </form>

        <script>
        new Vue({
          el: '#myForm',
          data: {
            first: 0,
            second: 0,
            sum: 0
          },
          methods: {
            doSum: function() {
              this.sum = this.first + this.second;
            }
          }
        })
        </script>
        

V-model is how Vue creates two way data binding between values in the DOM and in JavaScript. The data block variables will automatically sync up with the form fields. Change the data, and the form updates. Change the form, and the data updates. The .number is a flag to Vue to treat the inherit string values of form fields as numbers. If we leave this off and do addition as we are, we’ll see string additions and not arithmetic. I’ve been working with JavaScript for nearly a century and still screw this up.

Another neat “trick” is @click.prevent. First, @click defines a click handler for the button, then the .prevent portion blocks the browser’s default behavior of submitting the form (the equivalent of event.preventDefault()).

The final bit is the addition of the doSum method that’s bound to that button. Note that it simply works with the data variables (which Vue makes available in the this scope).

#Play with Vue

Obviously, Vue is not tailored to game development. But to me Vue is universal multipurpose framework and I find good reasons to give it a chance. To create a game with Vue, you just apply what you already know while shifting your mind to a different context instead of having to learn a whole new game framework. Vue’s reactivity system allows building highly interactive interfaces with minimum effort. And I've always wanted to create a game. I am still learning, but here you can check out:

Image placeholder

V. Stefanova

Engineer Front-end developer