Vue.js Fundamentals: Declarative Rendering

Vue.js Fundamentals

In the previous lesson, you learned how to setup a development environment and import Vue.js into your application. Now you’re ready to learn about declarative rendering using Vue.js.

Declarative rendering is the process of writing code with the intention of hiding the implementation details and focusing on the outcome. Take for example the code below.


                  var list = [1,2,3,4,5];
                  var newList = [];

                  for (var i = 0; i < list.length; i++) {
                    newList[i] = list[i] * 10;
                  }

                  console.log("The new list is ", newList);
                

At first glance, it’s not easy to see what’s going on. You have to read each line to understand that the for loop is creating a new array with the numbers of the initial array multiplied by 10;

This is an example of imperative programming, which can be best described as a series of statements that are created to reach an ultimate goal. In this case, a new array of new integers.

In imperative programming, you tell the computer what you want it to do every step of the way. This forces you to focus on the implementation instead of the outcome. Now take a look at the code below.


                  var list = [1,2,3,4,5];

                  var newList = list.map(function(item){
                    return item * 10;
                  });

                  console.log("The new list is ", newList);
                

This is an example of declarative programming. One of the first things that you should notice is that it requires fewer lines of code than the previous example, but accomplishes the same thing. You should also have been able to tell what it did without having to dive too much into the source code.

Declarative programming is the process of writing code that focuses on the outcome and hides the implementation. Going back to our example, you know that the map function returns a new array, but you don’t really know how it does it.

In declarative programming, you can assume that the information will always be consistent and will only change if new inputs are entered.

This only touches the surface of what these two programming paradigms are, but this should be enough for you to continue on with the lesson. If you want to learn more, though, there are some great articles on the internet that focus entirely on the topic.

Moving on, you should now have an understanding of what declarative programming is, and how it compares to imperative programming.

With your newfound knowledge, you’re finally ready to learn about declarative rendering in Vue.js. To do so, you are going to render the tried and true “Hello World” text onto the browser.

You will first need to create a new index.html. If you don’t have the one that you created in the previous lesson, it’s okay. I have included mine, with Vue.js imported, below.


                  <!DOCTYPE html>
                    <html>
                    <head>
                      <meta charset="utf-8">
                      <title>Hello World Example</title>
                    </head>
                    <body>
                      <div id='root'>
                      </div>
                      <script src="https://unpkg.com/vue@2.2.1" type="text/javascript"></script>
                      <script type="text/javascript">
                      </script>
                    </body>
                  </html>
                

Now that you have the HTML file ready, you can start to focus on rendering the text. You might be tempted to just create an h1 element and place the text inside, but that defeats the purpose of this example.

So how would you go about using Vue.js, instead of plain HTML? The first step would be to create a Vue instance, which at its core is just a JavaScript object. This is what Vue.js uses to determine where things should be rendered and how.

To create a new Vue instance, you need to place the following lines of code inside the second pair of script tags in your index.html file.


                  Var app = new Vue({});
                

As you can see, it is a JavaScript object that takes in another object as its argument. Make it more interesting by typing in the following lines of code inside the argument object.


                  Var =  new Vue({
                    el: '#root',
                    data: {
                      message: 'Hello World'
                    }
                  });
                

That’s more like it. It now looks like something that you can use. The first parameter inside the object is the el (element) parameter and this tells Vue where it needs to look in the index.html to start rendering code. Otherwise, Vue would not know where to start and your HTML file would be useless.

A common convention is to use a div with an id of either root or app. If you used the example HTML I included above, you can see that I opted to use root as my id. Feel free to change it if you choose, though.

The second parameter is called data and it takes another object as its value. The data parameter is what Vue uses to render content onto the browser. In this case, “Hello World.”

If you ran the code as is, though, you still won’t see anything on the browser. This is because you have the data you wish to render, but you haven't actually told Vue to do anything with it.

That’s where declarative rendering comes in. For you see, to render the text onto the browser, you only need to include the following lines of code into the div in your index.html file.


                  {{message}}
                

If you did everything correctly, you should now see “Hello World” displayed in all its simple glory on your browser window. So you might be asking yourself, how is this declarative rendering? Well, you know that you wanted to display the text onto the browser but you don't really know how Vue did it, right? You only know that it will take the value of whatever key you type into double curly braces and use it to display the text associated with it.

That’s the wonder of Vue.js. You don’t have to worry about the process, only the outcome.

Furthermore, there is something more that will really showcase how powerful Vue.js is. Assume that you wanted to change the text “Hello World” to something else. Maybe “Hello New World.” If this was normal HTML, you would have to go into the DOM and make the change manually, either with plain JavaScript or jQuery.

Wouldn't it be easier if you could just change the value of the message object and just have the text automatically change that way, without you having to do it manually? Of course, it would, and Vue.js allows you to do just that.

To change the value of any data object inside a Vue instance, you only need to set the variable that is referencing the Vue instance followed with the name of the key you wish to change to a new value. So like this.


                  App.message = “Hello New World”
                

That’s it. You should now see the new text in the browser. All without you having to worry about how Vue does it, only that it can.

That's the power of declarative rendering and this lesson only scratches the surface of what can be done with Vue.js. If you were not able to fully understand how the Vue instance workers, don’t fret. The purpose of this lesson was to introduce you to declarative rendering and the bare basics of Vue.js. You will learn much more in the following lessons and there is one dedicated to the Vue instance.