Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@ynonp

ynonp/vue-lab.md

Last active August 12, 2023 12:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ynonp/06615a9ea82269bc918ac983a8f47af6 to your computer and use it in GitHub Desktop.
Save ynonp/06615a9ea82269bc918ac983a8f47af6 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
vue-lab.md

Lab: Hello Vue

[ ] Create a first Vue app in Vite. Change the text to show your name.

[ ] Change the background color to a color you like

[ ] Add a new component that prints Hello <your name>. Add it to the page multiple times to see the message repeated.

[ ] Add a new component that shows an image.

[ ] Write a component that shows 5 text boxes and keeps the text in all the boxes in sync. That is when you change the text in one <input /> the new value is copied to all the others.

[ ] Write a "Spoiler Alert" component. It shows the words "Spoiler Alert". When a user clicks on the spoiler alert some real text is presented.

[ ] Write a component that shows 3 text boxes, first for "seconds", second for "minutes" and the third for "hours". Every time a user changes the value in one of the <input />s, the corresponding value should be written in the other boxes.

For example if we write "1" in "hours" then "seconds" should show 3600 and "minutes" should show 60.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment