Vue 3 is in beta and it’s subject to change.
Vue 3 is the up and coming version of Vue front end framework.
It builds on the popularity and ease of use of Vue 2.
In this article, we’ll look at how to handle user interactions with Vue 3.
Handling User Input
The v-model directive lets us bind our input value to a model property.
For instance, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<input v-model="name" />
<p>{{ name }}</p>
</div>
<script>
const app = {
data() {
return {
name: ""
};
}
};
Vue.createApp(app).mount("#app");
</script>
</body>
</html>
We added the name property to the object we return in the data method in app .
Now we can use the name variable as the value in v-model .
Also, we added interpolation of the name value to our template.
Now when we type in something into the input box, we get the same value displayed below it.
This is because v-model does the hard work getting the input value, setting it as the value name and vice versa.
Conditionals and Loops
We can render something conditionally with the v-if directive.
For instance, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<button v-on:click="toggle">toggle</button>
<p v-if="seen">Now you see me</p>
</div>
<script>
const app = {
data() {
return {
seen: true
};
},
methods: {
toggle() {
this.seen = !this.seen;
}
}
};
Vue.createApp(app).mount("#app");
</script>
</body>
</html>
We have the button which calls toggle .
The toggle method toggles the rthis.seen state to its opposite value.
Since we used that with v-if , it’ll render the p element if seen is true and not rendering it if it’s false .
We can also use it with transition effects.
Loops
We can display items in an array with the v-for directive.
For example, we can use it by writing:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<ol>
<li v-for="p in people">
{{ p.name }}
</li>
</ol>
</div>
<script>
const app = {
data() {
return {
people: [{ name: "mary" }, { name: "jane" }, { name: "bob" }]
};
},
methods: {
toggle() {
this.seen = !this.seen;
}
}
};
Vue.createApp(app).mount("#app");
</script>
</body>
</html>
We have the people array in the data method.
This is used with the v-for directive to loop through the array and display the items.
p is the loop variable, we use to display the array items.
Components
Components let us component multiple parts of a Vue 3 app.
Each component is a small part of the app.
We can create components by writing:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<hello />
</div>
<script>
const root = {};
const app = Vue.createApp(root);
app.component("hello", {
template: `<p>hello</p>`
});
app.mount("#app");
</script>
</body>
</html>
We have the root object.
Then we pass in root to Vue.createApp to create our Vue 3 app.
And then we create our hello component by calling the app.component method with the component and the component object.
template has the template content we want to display.
Then we call mount with the selector string to mount our app to that component.
Conclusion
We can add Vue components with the app.component method.
The v-model directive binds input values to variables.
v-for lets us loop through arrays and render its entries’ data.
