V-Model in Vue Simplified

Vue v-model is a directive that provides two-way data binding between an input and form data or between two components.
It’s a simple concept in Vue development, but the true powers of v-model take some time to understand.
By the end of this tutorial, you’ll know all the different use cases for Vue v-model and learn how to use it in your own projects.
//
FREE VUE 3 CHEATSHEET WITH ESSENTIAL CODE SNIPPETS
learnvue.co/vu...
follow me on twitter:
/ mattmaribojoc
🚨 Like quick Vue lessons like these? Check out 800+ lessons over on Vue School - go.learnvue.co...
INTRO
Daily (Prod. by Lukrembo)

[@JoeGoble]

Easily the best Vue channel on KZbin

[@CodeJan]

Personally, I very like the way you're explaining things! Covering the regular use cases and then adding more advanced cases. That's awesome! Bottom line - very useful!

[@LearnVue]

fantastic! thanks so much for watching.

[@victoriaa770]

This is a really good video!! I love the simple format and how you explain things!! I came across your blog post on v-model and ended up here. Thanks again for making such good content!

[@LearnVue]

thank you! glad you like it

[@ReSpawNnL]

Excellent! I was just looking for more in-depth info on this subject.

[@LearnVue]

perfect timing! glad it was helpful.

[@alimodz6253]

This concept was a little confusing but you cleared it up thanks! v-model is powerful

[@adarshsasidharan254]

Brilliant explanation

[@JaimitoAleman]

Great content as usual!!

[@alighafoori2387]

fantastic, very fast. very practical

[@LearnVue]

thanks ali!

[@lighty262]

Thanks for this great tutorial, I wonder if there is a way to save the vuex state in the browser and sync that state when you open the app again

[@jouchiwinchester2666]

I've been working with vue for 2 years and i only know this today . hahaha

[@jakubzomerfeld2159]

As always the subject of video is interesting and showed from few points of view/use, great work! Thank You :) only wanted to point that it's worth to include in title or description which Vue version support this exact feature. is this working on Vue 2 also?

[@LearnVue]

Thanks for the words - and that's an excellent point about Vue version. Some of the feature (default names, multiple component v-models) shown in the video only work in Vue 3. Here's a link to the Vue 3 Migration Guide that highlights all the differences: v3.vuejs.org/guide/migration/v-model.html#_2-x-syntax

[@kevinwakhisi7001]

When adding vmodel. lazy on the child component, doesn't work is there a solution to this?

[@CompanionCube]

1:30 this is wrong. v-bind can also do two way bindings using events. in fact v-model is just a short hand alias for v-bind. this is useful (and the only way) to work with events with dynamic components

[@augischadiegils.5109]

thanks

[@LearnVue]

you got it! thanks for watching

[@imthisham74]

How can I connect this app in a website? Please respond

[@LearnVue]

If you mean how to add Vue to your project, there's some great docs on this (v3.vuejs.org/guide/installation.html), but if you mean how to deploy it on your own site, I've made a video about deploying your Vue app to Github pages! kzbin.info/www/bejne/r6CVk4B9o65-e5o

[@Mindful-Frequencies-Healthy]

Is this v-model in vue 3?

[@LearnVue]

Most of the concepts in this video (basic v-model, component communication using one v-model) work in Vue 2. But features like the (default names of v-model, multiple component v-models) shown in the video only work in Vue 3.

[@christianpaul5224]

Okay I'm totally lost

[@MANMEETSINGH1993]

Thanks a lot..... but i would like you to explain a little more.on this to make custom components uisng Vue 3