Begin Vue.js 2.0 With a Simple Application

0
227

Earlier we talked about the minimum we need to create a simple application a simple application in Vue.js. In this chapter our js / app.js starts this way.

And our index.html starts with this basic structure

 

Note that I added the Bootstrap CDN to style our HTML, Awesome Font to have a large collection of icons and most importantly Vue.js 2.0.

Well, our application will need methods to remove one or more records, and bring JSONPlaceholder information.

We define each within methods. Let’s see.

 

Notice that we also have some attributes defined, inProgress that will indicate when a request is in process, and users to store the information obtained from JSONPlaceholder.

Then we add the rest of our structure in …

 Initially we placed two buttons that help us to trigger our events, using @ click.prevent, this means that when you click on a green button will call the show_users () method, and clicking on the red button will call the clear_users method ). Also the use of the v-if directive, which shows an element if this is true.

As you see in the image, the green button is responsible for bringing the data when clicked, will be shown when v-if = “! Users.length” equals zero.

And the red button when there are JSONPlaceholder records, in other words, when the users attribute that is defined in js / app.js has more than one stored user to show.

While the green button is hidden, we show the red, in charge of cleaning all users (remove them from the users attribute).

Now let’s create our list, which we will have below the buttons in this way.

 

Now we see passes on this list, emphasizing the important parts. If we take a look, our ul has the v-show statement, which is similar to v-if, except that this last statement completely removes the element from the HTML, in this case we evaluate that users contain records to be displayed.

Within ul, our li uses the v-for statement to iterate each element from JSONPlaceholder, at each iteration it will return a user extracted from the users property.

Why do you add an index in v-for = “(user, index) in users”?

Well, with index what we are getting is an index of the item returned, this serves to remove a user individually.

Inside our li we have an element p, where the name of each user is printed with {{user.name}}, his id with {{user.id}}, and a link that serves to delete each record individually.

Our index.html ends in this way.

So far this chapter, in the following we finish. We will run the show_users (), clear_users () and delete_user () methods.

Suggest

Angular, React.js & Vue.js – Quickstart & Comparison

Vue JS 2 – The Complete Guide (incl. Vuex)

Horizontal Feed Component with Sass and VueJs 2

LEAVE A REPLY

Please enter your comment!
Please enter your name here