You made it far — but the our path is even further. Keep on reading and learning to become a Vue master. We learned the basics so far, let’s continue.
Forms play a key role in any modern application, from login screen to dashboards.
Let’s make our
message dynamic. By making the input interactive — we can decide what our
message property will be. Keep in mind, all inputs should be wrapped inside a
Creating our first v-model
That’s all there is to simple inputs with Vue! Just create a simple
input and attach a
v-model directive to it and watch the magic happen.
Notice how all bindings to
message property are updated too!
Super simple — love how Vue turns complicated subjects to very approachable solutions.
caveat: Vue will always prioritise the Vue instance over provided defaults
Moving on to the checkbox, let’s bind our checkbox to the boolean
Toggling our message with the freshly created checkbox
That’s all there is! There’s literally no plumbing and setup. Vue also provides a lot of flexibility.
Here’s a quick example of the
select input example
All we did was created a new
data property called
selected and display the results.
Testing the select input
Bonus tip; You can add modifiers to the v-model.
.trim will remove all whitespace
Loops are made right and simple with Vue. Loops are useful to iterate over bunch of data and displaying it. Good scenarios when to use loops — fetching data from the backend.
For now we’re going to use mock data. Add a new property called
messages — notice the plural! The
messages property is the array which holds all our messages.
Here’s one way to iterate over all the messages using the
V-for iterates over all objects inside an array and lets us display them.
Here we go! We successfully looped over our collection of messages.
Bonus performance tip;
Using the :key directive for loops will boost performance
Components are reusable Vue instances with a name. Components let us reuse existing markup and functionality. The reason why we want to reuse code is simple — so we don’t repeat ourselves. We want our code to be DRY — Don’t repeat yourself.
Right so, here’s what a basic Vue component looks like;
Creating a basic Vue component
Vue components are very simple to create;
- We call the
Vue.componentinstance and give it a variable name,
navbaris this example.
- The first argument for the component is the name, the second argument is an object where you can specify the options, like
template is where we place our HTML. Pay close attention, those are no regular strings — those are template literals.
If you’re using VSC — these two extensions enable syntax highlighting and other handy tools.
We have to make Vue aware of our components. Let’s include our component in the main instance, like below;
And now we can place our custom tags inside the HTML.
Adding our navbar element inside the HTML
Here’s how the navbar we created looks inside the browser.
reusable Vue components
Notice the DOM is plain HTML, which means any browser that supports HTML, supports Vue components.
Cool! We know how to leverage Vue components now! Vue components are much more capable than just rendering markup, let’s continue our journey and see what else the Vue components can do for us.
If you ran into any errors, check out the source code