So we've made a pretty cool little layout here. I probably don't want this layout to be open all the time. Maybe I could close it and open it. Well, there's a couple of ways to get started with that. Of course, I'm already using Bootstrap so I could use an accordion or maybe I could integrate this into a Modem. But you might not be using Bootstrap, you might not be using the JavaScript that comes along with Bootstrap, and you may choose to just write all this yourself. There has been a push inside the community to move away from jQuery and move towards just Vue for your JavaScript library. jQuery still provides, it's all over the web, massive, it provides still incredible features and functionality. It's still very relevant, but jQuery can be pretty large at times. And some of the syntax, I mean, large basic on the file size, and the syntax can be a little bit difficult. I mean, not difficult, but what would be the word? You're going to write more code than you necessarily need to, or alternatively, you could write in something like Vue.
So a lot of people are making packages that already exist in jQuery, and they're just moving those packages over to Vue and writing them really basically from scratch inside Vue, because then you get all that code that you can do in Vue and it's a little bit lighter weight and at times easier, at times much harder than jQuery. So that's something to think about. But again, you can integrate jQuery with Vue and it's not a problem. Essentially jQuery UI you might want to integrate, and it provides some pretty cool functionality. So maybe we'll take a look at that and show you how to integrate some of the JavaScript or jQuery libraries into what you're doing already.
So here's my element here. I could go in and do the width and height for the element. Maybe I wanted to do border radius. And you'll see it's pretty easy to go and do those same things. I'm going to just do one more here, which will be border radius. So I'm going to take this on the box now. So here's the box element. I'm going to say border or uppercase, radius, and then the value that I'm going to give it is going to be, let's call it border radius as the rule.
And then I'm going to do plus, and then that pixel value. And that's just going to be border radius all around. Now, if I scroll down to my elements here, I can specify another one and say border radius and the default value here, which just will say zero. And I can specify zero like that as well. Then, I can come down to my range selectors. So let's do a, we have one here, just copy the same one. And I'm going to specify the value using that border radius. So scroll back down. This is border radius, this is border radius, this is border radius, and then I'm going to say radius. And now if we refresh this, it looks like it's just stuck at zero. This one is good. If I see if I have a console error, and we'll open up the console inside of Safari, which you can enable. If you were running Vue in development mode, you can see this select element. Well, that's odd. Maybe come down here. We'll set this to default value.
And then maybe we'll refresh this, close this, and still looks like it's stuck because I don't really know what to do. So let's see if we can get that value. Maybe there's a syntax error remaining somewhere. So there's our border radius. There's our value for our border radius. And it looks like I put an equal sign here instead of a plus. Forgot to hold down shift looks like, so we'll refresh this. Now, if we slide the value, we can change the border radius on our component there. I'm going to make ours a little bit smaller by changing the columns up a little bit. And what I'm going to do is take the column outside of the element, like so, and then scroll down to where this div was closing and then close it here. What that's going to do is put the box inside of the column, essentially. So you can see it's a little bit in there now. And then I'm going to go back to the box and make the box a little bit smaller. So I'm going to say 400 by 400.
There it is. And then I want to center the box. So I'm going to do a text hyphen center. And again, these are Bootstrap classes which will center the text inside of it. If I want to center the box itself, I can say MX auto to center the box. And then I'm going to move it down from the top. I'm going to use pt-five. We're just going to move the red box down from the side there. So now I have my card. I have my component here and I want to basically do is, when I click edit, this is going to open up.
And when I close this, it's going to close and I'm going to go back. So this is a very common functionality. Let's go and make something for that. So maybe I do it, when I click on the element here, it opens up the edit pallet, which means it's going to be anywhere on the box that I click. Well, I need to look at click events. Well, Vue if you've written that in JavaScript or jQuery, Vue has made this very, very easy as well. So you can use the syntax @click, and then what you want to click on.
So you could say @click and then what I want it to go and run. And what I want it to run is a method. And the method is going to run an open panel. Let's do open panel. So that's the method that it's going to run. So @click open panel. So if I come down to my code here, I'm going to put a comma and then I'm going to specify method. And then I can call my method name, open panel. Now, if you need to say, well, what's some of the syntax? Let me jump in there and go into the syntax. Let's open that up under Vue, and it's pretty easy to show you this. So we'll go Vue.js, and give that a second to load up. Then inside here in the search, we could specify click, or we could enlist listening to events. Let's take a look at there. So even listening. Listeners to events. And it shows you sometimes, so they're doing a v-on:click. You can do @click or :click. Both will work there. Maybe we'll do :click.
And then here's the methods. And then the method name here. So this is actually methods. I made that mistake. And then here's a sample method name. So we can go and say our method name, and then function. And if you want, you can just grab this whole code. Actually, it'll probably be easier in our case. There's our greet method. And then we called it open panel. So when the method open panel is going to get an event, we can leave it as an event or take it off. And then here's alert this.name if event. We can get rid of this code. And what we're going to set is panel. And we'll specify panel as this.panel equals a value.
And I'm going to say this.panel equals true. Well, this is referring to this instance, and panel needs to refer to one of these models. So I'll say panel and by default, panel is going to be false. So our goal here is to change this value of panel from true and false, like a Boolean value. So this.panel equals true when this open panel gets clicked. So I'm going to go back to the area of our box, where we've clicked it. I'm going to just use the v:bind syntax because that will work just as good. And now we'll refresh this and you see it here. And we're like, ah, but I see the field. Well, we need to hide it by default. So to hide it by default, I'm going to write a new rule here that says v-show. And I'm going to say panel inside of it. Now you don't see it. Now, if I click on the M element, I should see the value.
But I'm not seeing the value. So I'm like, hmm, what's going on? So this is another instance where we could go and test our code. When we look at the console, we can maybe see that not giving us any help or really what's going on here. So what you might want to go and do is, I'm going to actually go back to Chrome here. And we'll quit Chrome, and then I'll reopen Chrome. And I just prefer Chrome over Safari. I don't actually have it set up in Chrome, I think either. And we want to get is Vue dev tools. And I think they have it for Safari. They have it for Firefox. I don't know if they have it for Safari. So Vue dev tools, Chrome dev tool extension. And so you can see here is the, and it's going to add this nice little extension here. So get the Chrome extension.
Oh, work around for Safari. So they have a workaround for Safari, but otherwise you could go and use Chrome. And I assume you're probably using Chrome this entire time. So add it to Chrome. And again, this is called Vue.js dev tools. And you'll add the extension. And now you'll see this big V at the top here, and you know it's working. So now I'm going to come back into the code here that we had previously. I'm going to paste it back into Chrome and close the windows here and click inspect. And well, we have this V here, but it says Vue.js not detected.
Vue.js is clearly here, but it's not detected. And that's because the way we're running Vue is with this line here. If we were to run Vue as the actual library, then it would detect Vue. And I think that's done from a security concern in why it doesn't reference the CDN, because then it would just kind of plug into that section. So we're going to need to go and get Vue. So I'm going to just go Vue download, type that in. And it says installation here, and you can get development version and production version.
So this is warnings stripped. It's min and gzip. It's full warnings and debug mode. So we want to get this development version. And you can go and do this still under learn, and then just Vue dev tools and installation. And as you can see now, here's all of Vue.js. And quite a bit that the community is basically, Evan You and the others have written here roughly a 10,000 something, 10,500 lines of Vue. So now that I've downloaded that, that'll be in my downloads directory. And this is pretty straight forward. We'll take the downloads. We'll move Vue.js to the Vue folder. Now you'll see it here. So we have it referenced. And then I can reference that as just Vue.js. Now, if I come back and refresh, well, let me save this. It's still running the code. That looks good, but doesn't run that. I might actually have to, Vue.js is not detected. I definitely have Vue.js. If we need to check our URL, we'll click on Vue.js and it looks like it's there. You might need to do a restart right after you install it for it to go through.
I'm going to open up Chrome again, and I'll take you to that file and drag in that file, and still not detecting it. There might be some setup, actually, instructions. Let's go take a look at that. So Vue Chrome dev tools. You might need to turn something on. So here's Vue GitHub, Vue Chrome dev tools. If the page is used production, I'm going to buy build dev tools. Inspector is disabled by default. Well, we didn't do that. To make it work for pages file protocol, you'll need to check allow access to file URLs for the extension in Chrome management. Well, that's what we're doing. So that was a step we missed. So if you have it set up on your server, it'll be fine or like local host slash, you should be fine. But if not, you'll need to go in and do this.
So extensions, come down to where it says Vue default and allow access to file URLs. Now, if you jump back to this and refresh, now you see it's lit up. So make sure to get that one step there. Again, this is a one-time setup. You don't have to worry about this ever again once you have it configured. What's cool about this now is if you click inspect, you'll see a Vue option down here and it'll show you your root data. And this is really a lifesaver because without this thing, it can be very difficult to sort of see what's happening inside your Vue and try to debug it. So here's the different thing. It says panel is false. Text color, text height, text size, text tracking. If I click on the element, that should change us to true, but it doesn't seem to be running.
So open panel. I'm going to have to get rid of the event. And we're fresh. And you see, if we go back into the root, even though I click, it's not changing the value. So if we come back to the top here and we look and we say @click open panel, I can run this as a function. Now it's there, but we don't want that to be like that because it should say v-show, which it does. And that's correct. And then @click, we're going to try going back to @click, because that one didn't work for us. And yes, it looks like when you do this, you might need to do v-bind.
I usually use click, but v-bind. No. I don't know why they said to do that, but @click does work for you. And you can see now when I refresh this page and then I do @click and then click it, it opens up and shows the panel. So pretty easy to go and set that. Now I want to build an X to close it and we'll go and do that real quick as well. So now that we have our syntax here @click open panel, we can open the panel, which is the panel here. And I'm going to just add a button here that says button.BTN.BTN-secondary. And then I'm going to just say close on it. And then I'll do that @click. And then I want it to say close panel. And so now I click it and then I want it to close the panel. So maybe we'll put this at the bottom, and then that'll be like a save button.
And then we need to make close panel. So we'll scroll down to our methods here. We'll make a new method called close panel. And it runs a function. And then it's going to say, this.panel is equal to false. And if we open up our dev tools here and then click on Vue, so we have some consoles, invalid click not unidentified. So refresh that. That was because I didn't know what the closed panel was. Now we'll go to Vue, we'll click on root, and there's panel. And if we watch that value, there we click. It turns to true, we click the close, it turns to false.
So you can see, we don't actually need any jQuery. We don't need any Bootstrap. We could build something very easily and extend a lot of the functionality using these methods. In addition to that, in this episode, we showed you this concept of v-show, which is basically saying, show this or hide this. Now that's a lot easier than jQuery's method or a JavaScript method of applying classes of display none or hide the element. We just can change the property or model, and it will change the value.