Vue.js 学习随笔之 Vue.component 注册组件之你的心不会痛吗

在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。在 Vue 中注册组件很简单：（这个坑挖的有点6）

// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
  template: ' <li>这 是个待办项</li>'
})
现在你可以用它构建另一个组件模板：

<ol>
  <!-- 创建一个 todo-item 组件的实例 -->
  <todo-item></todo-item>
</ol>

这是官方给的DEMO 但是 - - 有个坑,他是说提供注册了,但是并没有出现<li></li>百度了一番 结果不光是我遇到了这个问题
解决办法↓

    Vue.component('todo-item',{template:'<li>这是个待办项</li>'})
    //注册完组件相当于声明但少了实例化的过程
    new Vue({el:"todo-item"})  

而且我发现了一个有趣的现象

<ol>
  //如果一个todo-item还好 那么多个todo-item 呢
  <todo-item></todo-item>
  <todo-item></todo-item>
  <todo-item></todo-item>
  <todo-item></todo-item>
</ol>
//特毫无疑问的只显示出了第一个todo—item
 new Vue({el:"todo-item"})  

解决办法

//×4
 new Vue({el:"todo-item"}) 
 new Vue({el:"todo-item"}) 
 new Vue({el:"todo-item"}) 
 new Vue({el:"todo-item"})