VueJS Components
Create your project with the following:
npm init vue@3
cd vue-project
npm install
npm run dev
First we’ll write the code to build a click-counter. Everytime you click, the number will increase. Open the project in visual studio code and create a new file named “app.js”. Write the following code into it.
Now open the “index.html” file and add the following code:
This is what it looks like:
If I click on the 0 it increases. I have clicked 3 times.
There are different ways to define a component’s template. We’ll use the x-template here.
Modify the code in the “index.html” file like this.
And change the code in the “app.js” file like this.
Everything still works fine.
Here is the link to the code:
https://github.com/WirOem/Click-counter
Now we’ll write the code for a coffee plan picker. Write the code in the “index.html” file like this:
Write the code in the “app.js” file like this.
With some styling, using css the page looks like this
Now we'll create a plan-picker component, in order to easily display all our plans wherever we want.
Modify the code in your “index.html” file like this:
And also modify the code in the “app.js” file like this:
It still looks the same but now we can use our plan picker component wherever we want to display our list.
We can register components globally and locally. We have used the application .component method till now. That’s called global registration. Now we’ll see how to do local registration.
The site works the same
Only essential components, like a BaseButton or an Input, should be registered globally. The rest should be registered locally.
Now we’ll see how we’ll be able to pick or select a plan. Add the following piece of code to the “app.js” file:
Now we’ll call the method when a user clicks on a plan
We’ll check if it worked in the browser.
It worked!
Now we’ll use a class binding to dynamically add the active-plan class, when the plan is selected.
If we pick a plan now, we can see that clearly.
But we also can pick more than one plan and that’s not what we want.
So we’re going to work on that now.
Here is the link to the code:
https://github.com/WirOem/coffee-plan-picker
https://github.com/WirOem/Click-counter
Now we’ll write the code for a coffee plan picker. Write the code in the “index.html” file like this:
With some styling, using css the page looks like this
Now we'll create a plan-picker component, in order to easily display all our plans wherever we want.
Modify the code in your “index.html” file like this:
It still looks the same but now we can use our plan picker component wherever we want to display our list.
We can register components globally and locally. We have used the application .component method till now. That’s called global registration. Now we’ll see how to do local registration.
The site works the same
Only essential components, like a BaseButton or an Input, should be registered globally. The rest should be registered locally.
Now we’ll see how we’ll be able to pick or select a plan. Add the following piece of code to the “app.js” file:
Now we’ll call the method when a user clicks on a plan
We’ll check if it worked in the browser.
It worked!
Now we’ll use a class binding to dynamically add the active-plan class, when the plan is selected.
If we pick a plan now, we can see that clearly.
But we also can pick more than one plan and that’s not what we want.
So we’re going to work on that now.
Now we can only pick one plan in the browser.
Here is the link to the code:
https://github.com/WirOem/coffee-plan-picker
Comments
Post a Comment