What are some examples of data binding in Vue.js?

What are some examples of data binding in Vue.js?

In Vue.js, data binding allows you to connect your data model to the UI. For example, you can use the v-model directive for two-way data binding with form inputs.

Can you show me a simple example of using v-model?

Sure! Here's a basic example:

<div id="app">
  <input v-model="message" placeholder="Type a message">
  <p>{{ message }}</p>
</div>

In this example, whatever you type in the input will be displayed in the paragraph.

What about one-way data binding?

One-way data binding can be done using the {{ }} syntax. For instance:

<div id="app">
  <p>{{ title }}</p>
</div>

Here, title is a data property that will be displayed in the paragraph.

Are there any other binding techniques in Vue?

Yes! You can also use v-bind for binding attributes, like this:

<img v-bind:src="imageSrc" alt="Image">

This binds the src attribute of the image to the imageSrc data property.