There's a good app structure for the list part of the application, but it is going to need more complex HTML in order to work. Get a couple of gists with the HTML and the CSS you'll need to set up the list.
- So we have a pretty good app structure for the list part of our application, but it's going to need HTML that needs to be a little bit more complex. I've prepared a couple of gists with the HTML and the CSS we'll need to set up our lists. I'm using Bootstrap tags, and if you want to know more about how they work, you can take a look at this video. Here's a gist with the HTML that we're going to need, and you can see that the list item has a class of media, which is a Bootstrap class, and then we have different sections here, so a media-left section where we're going to put a delete button, and this delete button uses a glyphicon that comes with Bootstrap 3, then there is a main body section, and then in the media-body section, we also have space for the name as well as the date, and then we have a space for the owner and the appointment notes.
So let's go ahead and hit this raw button. It gives us an easier way to copy this HTML, and then I'm going to switch back into my application, and I'm going to paste that in my template. I'll leave the links to the data right here. And then, I'm going to grab just the stuff right here and place it where it needs to go. So for example, the pet name is going to need to go right here.
Pet owner is going to go in this span right here. The date of the application is going to go right here. And it looks like it didn't copy the double curly braces, so let's make sure we do that, otherwise it won't appear. So I'll cut that out of here, and put it right there. And then the appointment notes are going to right here.
Alright, so I can delete this list item right here now. And then I can save this file. You may need to refresh things. Sometimes the automation gets a little bit confused. You should see something like this. We need to add the styles to make this look a little bit better. Here you can see this glyphicon that is the remove button. So let's go ahead and go to this gist, and we'll click this raw button and select all this, and then go back into our application.
Remember the styles go at the very bottom of our template, so let's just go ahead and paste that. And we'll save that. Again, you may need to refresh. And you'll see that it'll come in super big. We actually need to fix something in our style sheet from right here in the appointment list. I had set up the font size really big there, so we'll set it back to just one rem. And it should look really good after that.
So adding these styles is going to set up our application so that we can show you additional features of Vue.js and how it works with events, as well as modifying how things like dates look.
- Creating basic apps
- Using lifecycle hooks
- Adding nested subcomponents
- Modifying data with methods and events
- Working with layouts
- Searching, sorting, and ordering