In the previous section, we saw how to interpolate the application's data and how to bind it to the visual layer. Though the syntax is pretty powerful and offers a high possibility of data modification (using filters and expressions), it has some limitations. Try, for example, to implement the following using {{}} notation:
- Use the interpolated data in the user input and apply the changes to the corresponding data when the user types in the input
- Bind a specific element's attribute (for example,
src) to the data - Render some element conditionally
- Iterate through an array and render some component with the elements of the array
- Create event listeners on the elements
Let's try at least the first one. Open, for example, the shopping list application (it's in the chapter4/shopping-list folder). Create an input element in the App.vue template and set its value to {{ title }}:
<template>
<div id="app" class="container">
<h2>{{ title...