vue中的v-bind

时间:2019-02-09 09:36:45

标签: javascript vue.js

我从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,为什么我们将todo的值保持等于字符串? (我知道他最终会将待办事项作为道具传递给子组件)

然后在 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 这就是让我感到非常恐惧的地方。开始, 在导出默认值中,为什么他会在props中使用数组? props: ["todos"]?从他们传递字符串的样板代码开始,他们只是做了props: {msg: String}这样的事情,所以为什么props: ["todos"]在这里?

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绑定是什么?我们在哪里使用它?

1 个答案:

答案 0 :(得分:4)

第一季度

在Vue中,您可以将道具传递给子组件。如果您曾经使用过:todos="todos"todos属性将等于字符串todos,但是如果使用v-bind:todos或简称为:todos,它将prop变为javascript变量todostodos函数中的data

第二季度

在Vue中,您可以通过不同的方式引用道具。在数组中声明它们只是短一些,但有一个缺点,就是您无法验证道具。在对象中声明道具时,可以指定道具的类型,例如。字符串,数组,对象等。也可以声明默认值并指定所需的道具。

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

第三季度

提供的示例将不起作用,因为id中仅let todoname中没有title。所以可行的是:

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

再次可以只使用:key="i"。密钥可以看作是id。使用它是为了让Vue知道循环中的哪个元素。