Build a todo list app with Vue JS
HTML-код
- Опубликовано: 2 июн 2024
- Learn how to build a todo list app using Vue JS.
Vue.js is an open-source front end JavaScript framework for building user interfaces and single-page applications. In this tutorial you will learn how to build a simple todo list app using Vue JS.
Code: github.com/ProgrammerNotesYT/...
Install Vue JS: vuejs.org/v2/guide/installati...
Font awesome in Vue JS: / how-to-use-fon-awesome...
Build a basic calculator with Vue JS: • Build a calculator app...
Chapters:
0:00 - App review and intro.
1:21 - Vue.js file structure and removing unneeded code.
3:09 - HTML & CSS, plus installing bootstrap and font-awesome
7:48 - Read tasks.
10:33 - Add new task.
13:19 - Delete task.
15:00 - Edit and update task.
17:09 - Change the status of the task.
21:20 - Class and style bindings.
-----------------------------------------------------------------------------------
💻 The goal of this channel 💻
I'm creating web development and programming tutorials! So the goal of this channel is to help you learn to code and upgrade your knowledge about coding and web development.
🔔 Subscribe 🔔
Subscribe and turn on the notification for the best programming tutorials.
Subscribe ► bit.ly/ProgrammerNotes-Subscr...
🙏 Follow me: 🙏
Instagram: / programmer.notes
GitHub: github.com/ProgrammerNotesYT
Lichess: lichess.org/@/nebboo
Subscribe if you found this video useful! 👍
"Steal bananas from the store". That was just great
followed the tutorial (took me a few hours) but learned so much!! thanks for making and explaining WHY something works how it works. Thanks mate
nice first video. keep it up! would love to see more straight forward tutorials like this in your next videos.
Great video, I finally found a simple and understandable explanation. Thanks a lot!
It's pretty simple and great. So helpful!
Great video. Easy to understand and straight to the point, I hope you keep making more videos
This was an amazing and simple tutorial, thank you very much for sharing.
Great video I was looking for an app to my highschool project and this video reallly saved me.
thanks so much for this video, needed some clarification on using v-for directive and this helped a lot!!
This was an amazing tutorial, thank you very much.
Thankyou very much! great help for my school assignment. Just got started in vue and this video was a great help!
Great video. I'm looking now how to store it inside a postgresql. It would be great to have a 'next step' here. You're a great teacher.
Very fantastic. Thank You very much, guy. I'm a french speaker. I don't understand all you said but I can understand what you code, very clear et simple. Thank you very much.
Very satisfying and helpful video!! Thanks Sir.
Thanks, dude. It helped me a lot!
Thank you i really needed this
Thank you so much. Very helpful.
Amazing tutorial, much thanks!
Love this video, I learned a lot from it!
This is a very useful video for a Beginner.
great tutorial, would help me a lot for my task
really good one! apperciate it!
wow! thas't one is truly useful
Thanks a lot!
Thank you very much for the video, it was so helpful
Great work, keep it up 👍
i have learnt alot from this video. this is my first project in vue and this video was able to help me achieve it
thank you brother it was really awesome
Really helped me Thank you very much for this informative video
Very good video! A hug from Brazil to you. I'm already subscribed to the channel!!! 👏👍
Thank you for this video.
loved it!
thank you so much , you are the bomb
Great video.
For styling the finished tasks, u can use "text-decoration-line-through" in bootstrap, instead of creating the "finish" css style >>>>> :class="{'text-decoration-line-through ': task.status ==='finished'}
nice video, thanks bro !!
Thanks a lot! Do you have any suggestions for future videos? 😃
1 kg chocolate for a brighter future! Great!!! Thanks for this lesson!
thank you so much!
Nice Video 👌👌 Thank you so much 😄
Thanks a lot. I'm happy you liked this tutorial! 😄
nice tutorial
great video
good stuff here!
Awesome!
Thanks for making this video! A piece of feedback, if you don't mind:
Try to be a bit more engaging in tone. I think that it's very linear and it gets hard to follow after a while.
Keep it up!
20:54 genius
god you saved my ass.. cant thank you enough.. :)
саундс лайк рашн аксент, йо соу харш
Nice
thankyou
hey, vscode theme?
Putting uppercase in first letter without a javascript function just CSS
.status{
cursor: pointer;
display:inline-block
}
.status:first-letter {
text-transform: uppercase;
}
When I open vs code editor and create file.vue all words, symbols are white, whatever I type. Why? In file.js everythynng is like usualy all text different colour.
How can I link a vue app created like this with my wedsite
how can i connect this to my backend?
After putting vfor in the table my all content just disappeared.
Hey there, v-for directive will go through each item of an array or each property of an object.
1. Make sure your tasks array is not empty.
2. Make sure you have :key property defined.
3. Also make sure you have something inside the v-for like {{task.name}}.
4. Check if you have any errors in your console.
You can compare your code with the source code on my GitHub.
Did you manage to fix the issue? 😄
REALLY USEFUL, THANKS