This repository holds the training projects of a Vue.js course that i'm doing.
The purpouse of this is to help me keep track of the things I've learned and to show my current experience with Vue.js
- Clone the repository by doing
git clone https://github.com/SantiagoSinatra/VueJs-Training-Proyects.git - Al the folders holding each Vue.js training project will appear.
- Go to the folder that holds the desired project that you want to run and do
npm installthis will install all the necesary dependencies to run the project correctly. - In the same folder run
npm run dev - A message will appear showing you that the server is now running on f.e: localhost:3000 and some port in your network.
- You can use any of them to connect to the website by copying the route that is shown and pasting it in your browser.
- Enjoy the mess!
You have to do 3-6 steps for each folder 😅
This is the first time I used Vue.js feel free to check each commit because some of them hold important notes I took and also hold other functionality that (in order to follow the course) I had to delete or change.
The end result that you will see if you clone the last commit is an array of buttons that when clicked trigger and emit function that adds the selected numbers to an array called clickedNumbersand then displays them below the Clicked numbers h3.
vue.js vite app creation separate component template props methods data computed v-if v-else v-for v-bind v-show v-on v-model @click @input
This is a simple two input form that validates two different fields one for the username and the other for a password.
The username is required and must have at least 5 characters. This is validated using a method inside the input component that requires two props:
- rules that are like flags that indicate what kind of validation is needed.
- value that is the value of the input.
After the value is validated if there is an error a string with the end result of the validation is returned inside a computed property error() and then this is echoed in the template for the user to see.
This input is also has another method input() that is in charge of emmiting the value and the validation to another method update() in its parent this is used to enable or disable the input button preventing the user from submitting a wrong form.
vue.js vite app creation separate component template props methods data computed v-if v-else v-for v-bind v-show v-on v-model @click @input @submit.prevent="submit"
Coming soon!