Javascript 要使用vue.js制作列表吗

我试图显示数据数组中的列表，但出现错误：

无法读取未定义的

的属性“name”

HTML

<div id="list">
  <myitems v-for="item in list" v-bind:my="item">
</div>

<div id="list" v-for="item in list" >
  <myitems  v-bind:my="item"></myitems>
</div>

JavaScript

var items = Vue.component('myitems', {
  props: ['my'],
  template: `<li>{{my.name}} {{my.age}}</li>`
});

new items({
  data: {
    list: [
      {name: 'myName', age: 25}
    ]
  }
}).$mount("#list");

var items=Vue.component（'myitems'{
道具：[“我的”]，
模板：`
{{my.name}{{my.age}}
`
});
新项目({
数据：{
名单：[
{姓名：'myName'，年龄：25}
]
}
}).$mount（“#列表”）；

---

我想我无法匹配列表中的

项和我的
道具，但我不确定该怎么办。
我相信问题出在你的html中。
标记应在
v-for
指令的范围内，因此不应在
标记上声明。试着这样做：

new Vue({
  data: {
    list: [
      {name: 'myName', age: 25}
    ]
  }
}).$mount("#list");

HTML

<div id="list">
  <myitems v-for="item in list" v-bind:my="item">
</div>

<div id="list" v-for="item in list" >
  <myitems  v-bind:my="item"></myitems>
</div>

好的，代码中有很多问题

首先，您还没有定义根Vue实例，应该是这样的：

new Vue({
  data: {
    list: [
      {name: 'myName', age: 25}
    ]
  }
}).$mount("#list");

您的组件注册良好，请保持这样：

var items = Vue.component('myitems', {
  props: ['my'],
  template: `<li>{{my.name}} {{my.age}}</li>`
});

工作示例：
您的代码中有几个问题。首先，不需要为注册的Vue组件分配变量。在您向
Vue.component
注册后，您就可以使用它们了：

Vue.component('myitems', {
  props: ['my'],
  template: '<li>{{my.name}} {{my.age}}</li>'
});

您需要传入一个元素ID/类作为根元素，以及要传递给子元素的任何数据。一旦你这样做了，它应该能正常工作。这里有一个JSFIDLE示例：
谢谢，我有一个问题。如果我想在一个页面和不同的根目录中使用多个组件，我能做什么？这段代码也适用于使用@burningwebfuel的多个组件。对不起，您能澄清一下您的问题吗？我的问题是为了Daniel的答案，我完全理解我的错误。自我解决的愚蠢问题。我误解了我只能在一个页面中使用一个
新Vue
。很抱歉我的评论是针对Daniel的回答。没问题，如果您有任何问题，请告诉我