From Zero to Hero with Vue — Input handling, Loops, Components

From Zero to Hero with Vue — Input handling, Loops, Components

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.


Input handling

v-model directive

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 form tag.

https://stackoverflow.com/a/29011407/5073961

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.

Dynamic message

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 hasMessage property.

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;

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

v-for directive

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.

adding messages

Here’s one way to iterate over all the messages using the v-for directive;

v-for directive

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

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.

https://en.wikipedia.org/wiki/Don%27t_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.component instance and give it a variable name, navbar is this example.
  • The first argument for the component is the name, the second argument is an object where you can specify the options, like data, methods, template

The template is where we place our HTML. Pay close attention, those are no regular strings — those are template literals.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

If you’re using VSC — these two extensions enable syntax highlighting and other handy tools.

Vue VS Code Extension Pack - Visual Studio Marketplace

Vue Inline Template - Visual Studio Marketplace

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

# vue
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×