A common technique in dynamic apps is to manage your styles as people interact with your content. To do that, you need to examine how you can bind classes and styles to your code as well as generate events that can act on those bindings.
- [Instructor] A common technique in dynamic apps is to manage your styles as people interact with your content. To do that, we're going to need to examine how you combine classes and styles to your code, as well as generate events that can act on those bindings. Now for example, you can bind a style to an element, and to do we need to use this notation that says v-bind and then style and then put someStyles in these quotes right here. Now we can modify that by just using style with a colon at the beginning.
We don't have to use this longer notation if we don't want to. Into the someStyles section, you can send either an object full of style attributes or an array of variables that has styles in them. Now this isn't always useful because most of the time, you'll want to just create classes for styles. Although this way of doing things allows for some programmatic effects, like modifying a style property based on a variable. Now if you want to learn more about binding elements to the style attributes, we've got a great video that can help you at this URL.
Another way to do this is to use the v-bind class property, and again, you could just use this class shortcut, just this part without the v-bind, and this, most of the time, is a little cleaner, so you can use this to turn someClass that you've developed in your style section on or off by making this value right here true or false. This Boolean can also be a variable that is in your program and you can turn that variable to true or false, which will add and delete the class as needed.
Now the way to trigger these changes is by using events. You can use the v-on and then specify the type, so in here we could say v-on click, or you can use this notation, which is a little bit shorter. Just use an at sign and then specify the type, so this would be at click for our needs. Now after this property, you can include an equal sign and then you can use inlide code or specify a method to execute.
Now it's really easy also to create your own event, so you can have something in your application generate an event, and we'll be doing that later on in this application. So let's go into our application, and I'm going to need to create some code to allow us to add an appointment. So we're going to need a new vue file. And so I'll add that here to this process folder. And I'll call it AddAppointment.vue.
And I have a gist with all the code you're going to need right here, just so that we don't type a bunch of html and css code. So you can go to this URL to get this code. I'm going to click on this raw button right here, so that it's easier to copy and paste. And then I'm going to select all, and copy that into my clipboard. And then I will paste that in here. So you can see that all we have here is a very simple style that I'll show you in just minute, as well as some html code here.
This is code that is using bootstrap three classes to generate a form that allows you to enter information about the appointment. So this doesn't have any vue.js code except for this part right here. So this part just defines the name of this sub-component, and I'm calling that AddAppointments, but there is no data, no event, or anything else. So let's go ahead and save that, and we'll also need to go into this app.vue file to go ahead and import that in here, and then also add the tag right above this appointment list.
So let's go ahead and do that. So what I want to do is up here, create a new tag called add appointment, and of course, I'm going to need to import that. So just like I import the appointment list, I'm going to import the AddAppointment object here from AddAppointment.vue. And then we have to register this tag right here.
And we need a comma right here, and we also need AddAppointment. So we are registering this tag and then assigning it the AddAppointment object that we receive when we import this file. So as you can see, that adds this appointment sort of fill-out form and you still see the rest of the list right here, and what I want to do is make sure that I can click on this to show or hide this section.
So if I'm not adding appointments, I would just be able to see my list. And if I want to add appointments, I can click on this and then type some stuff into these fields. All right, so I need to go back into AddAppointment and I need to add some additional code right here. So the first thing I want to do is go to the location where this panel with all of the form fields is, that would be this panel body. And then what I want to do here is use the class attribute here, and I'm going to pass it along and object.
This object is going to contain a class that I want to turn on or off. In this case, I want to add this class to panel body, so it would appear right here. And I want to do that dynamically based on a variable. I'm going to work with the hide class and then I'm going to use a variable that I'll call the hidepanel. So the hide class isn't a class that I have included in here and that's because I am using bootstrap three.
Bootstrap three has a hide class that has just a display of none, so although I could create my own class here, there's already one available in bootstrap. The only other class that I'm using in this code is panel heading, changing the cursor to a pointer because when I roll over this Add Appointment, I want my cursor to change to this finger. All right, because we are using that variable called hidepanel, we need to go ahead and create it.
And that means that we're going to need a data section in my script here. So in addition to the name, then I'm going to need to add a data section here. This is going to return some data, and the one that I want here is this hidepanel. I'll set that to true to begin with. So you can see that because I've set this true, the class hide is being added to this panel body. So my panel is hiding by default, but I don't have a way of turning that on or off.
So I can do that with events, and that's pretty simple. All I have to do is use an event right here, and I'm going to look for a click on this element. Since this is pretty simple code, I'm not going to execute a method. So I'll just go ahead and use the hidepanel variable, and I'll turn it to the opposite of whatever it is. So if it's true, it will become false. If it's false, it's going to become true.
Let's go ahead and save that. And now we should be able to click the panel on and off, because it's going to change the value of this variable. And that is going to modify my panel body section here by adding or deleting the hide class. So although events are a lot more complicated, we're going to be working with them on the rest of this course. However, if you want to find more information about events, make sure that you check out the documentation at this URL.
- Creating basic apps
- Using lifecycle hooks
- Adding nested subcomponents
- Modifying data with methods and events
- Working with layouts
- Searching, sorting, and ordering