Revisiting and applying directives

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