javascript - vue中的v-bind是什么

Question

我开始使用 Vue 并按照 Traversy Media on Youtube 的视频教程进行操作

他在那里使用了 v-bind 但我没有正确解释它们是什么(或者至少我无法理解)

出于某种原因，我仍然觉得文档有点难以理解。

这就是我们正在做的事情。

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

问题:1有人能理解这段代码吗

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

比如什么是 v-bind 以及为什么我们要保持 todos 的值等于字符串？ (我知道最终他是将待办事项作为 Prop 传递给子组件)

然后在todo.vue中，他在做这样的事情

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

问题 2 这就是让我感到害怕的地方。开始， 在 export default 中，他为什么要在 props 中使用数组？ Prop :[“todos”]？从他们传递字符串的样板代码中，他们只是做了类似这样的事情 props: {msg: String} 所以为什么 props: ["todos"] 在这里？ p>

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

问题 3:最后一行就在这里

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

我理解这样做背后的原因 v-bind:key="todo.id" 但话又说回来什么是 v-bind？我们在哪里使用它？

Answer 1

第一季度

在 Vue 中，您可以将 props 传递给子组件。如果你会使用:todos="todos"。 todos prop 将等于字符串 todos 但是使用 v-bind:todos 或简而言之 :todos 它使 prop 成为 javascript 变量 todos。这是 data 函数中的 todos

第二季度

在 vue 中，您可以通过不同的方式引用 Prop 。在数组中声明它们只是更短，但有一个缺点，即您无法验证 Prop 。在对象中声明 Prop 时，您可以指定 Prop 的类型，例如。字符串、数组、对象等。也可以声明默认和指定所需的 Prop 。

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

第三季度

提供的示例将不起作用，因为 let todo 中没有 id，只有 name 和 title。那么什么是可行的:

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

同样可以只使用:key="i"。 key 可以看作是 id。它被用来让 Vue 知道循环中的哪个元素。