Vue Declarative Rendering

On the previous tutorial, we learned the various ways in initializing and installing Vue.js. In this tutorial we are going to create a simple date display using Vue.js. At the end of this tutorial, we will have an overview and discuss one of the special features of this Javascript framework.

To get started, let us set up our environment using the downloaded Vue.js file.

Declarative Rendering

Now that we have created the skeleton of our project, let us add a little greeting with a little CSS modification.

Declarative Rendering

Here, I have included a little CSS and welcome message. The next thing we need to do is to print out the date. Create a separate file and name it as app.js then include it to your html file. Now, open app.js and start to code the following.

Declarative Rendering

After saving this, open your html file and create an html tag then set an id as #my-date.

Declarative Rendering

Now save and open it to your browser and you will see the result.

Declarative RenderingCongratulations on launching your first app! Let us discuss what we have done in this tutorial.

First, we created our environment and put together all our resources, the javascript file including our CSS file. Then we created a separate file that handles the printing of the date.

Declarative Rendering

First we created a Vue constructor where our data manipulation will be executed. Inside the constructor, we get the id of our html element that will handle the data that we are going to print, which is the date. Next, we declared the variable that will handle the date. Lastly, we rendered the date by {{dateToday}} in our html file and got the result that we are looking for. We call this Declarative Rendering.

In the next chapter, we are going to discuss some of the basic data manipulation and features of Vue.js.

Subscribe Now and Upgrade Your Skills Today!
Sign up now and have the latest tech tutorials delivered straight to your mailbox.

PLUS: Get exclusive member-only discounts (up to 80% OFF!!) on our top tech courses in Udemy!
We hate spam. Your email address will not be sold or shared with anyone else.