What is v-bind in vue

Question

I am starting with Vue and following the video tutorial by Traversy Media on Youtube

There he have used v-bind but I didn't proper explained what are they (or at-least I am unable to get it)

For some reason, I still find documentation slightly hard to comprehend.

So this is what we are doing.

<template>
  <div id="app">
    <p>{{msg}}</p>
    <Todos v-bind:todos="todos" />
  </div>
</template>

<script>
import Todos from "./components/todo.vue";
let todo = [
  {
    name: "Rohit",
    title: "Full Stack Developer"
  },
  {
    name: "Varun",
    title: "head of marketing"
  },
];

export default {
  name: "app",
  components: {
    HelloWorld,
    Todos
  },
  data() {
    return {
      msg: "hello",
      todos: todo
    };
  }
};
</script>

Question:1 Can someone please comprehend this piece of code

 <Todos v-bind:todos="todos" />

like what is v-bind and why we are keeping value of todos equal to string? (I understand that ultimately he is passing todos to child component as props)

And then in todo.vue, he is doing something like this

<template>
  <div v-bind:key="todo.id" v-for="todo in todos">
      <h3>{{todo.title}}</h3>
 </div>
</template>

<script>
export default {
  name: "Todos",
  props: ["todos"] 
};
</script>

Question:2 This is where things get pretty scary for me. To start, In export default, why would he used an array in props? props: ["todos"]? from the boiler plate code where they pass a string they just did something like this props: {msg: String} so why props: ["todos"] here?

export default {
  name: "HelloWorld",
  props: {
    //We are defining the message type here
    msg: String
  }
};

Question 3: Lastly in this line right here

 <div v-bind:key="todo.id" v-for="todo in todos">
      <h3>{{todo.title}}</h3>

I understand the reason behind doing this v-bind:key="todo.id" but then again what is v-bind? where do we use it?

Answer 1

Q1

In Vue you can pass props to child components. If you would have used: todos="todos". todos prop would be equal to the string todos however with v-bind:todos or in short :todos it makes the prop the javascript variable todos. Which is the todos from the data function

Q2

In vue you can reference the props in different ways. Declaring them in an array is just shorter but has a drawback which is that you can't validate the props. When declaring the props in an object you can specify the type of the prop eg. String, Array, Object etc. It's also possible to declare a default and specifiy required props.

props: {
   msg: {
     type: String,
     required: true,
     default: ''
   }
}

Q3

The example provided won't work as there is no id in the let todo just name and title. So what would work is:

<div v-bind:key="i" v-for="(todo, i) in todos">

Again it's possible to just use :key="i". The key could be seen as an id. It's used so Vue knows which element is which in a loop.