這裡使用todo的例子來講解omi元件體系的使用。
元件生成的html最終會插入到body中。上面的例子展示了omi的部分特性:
data傳遞: new todo(data,..)的data可以直接提供給render方法裡的模闆
局部css: h3隻對render裡的h3生效，不會污染外面的h3；button也是同樣的
聲明式事件綁定: onchange調用的就是元件内的handlechange，this可以拿到當然的dom元素,還可以拿到目前的event
需要手動調用update方法才能更新元件
這裡需要特别強調的是，為了更加的自由和靈活度。omi沒有内置資料變更的自動更新，需要開發者自己調用update方法。
如果頁面超級簡單的話，可以沒有元件嵌套。但是絕大部分web網頁或者web應用，需要嵌套定義的元件來完成所有的功能和展示。比如上面的todo，我們也是可以抽取出list。
這樣讓程式易維護、可擴充、友善複用。如，我們抽取出list：
怎麼使用這個list？我們需要使用omi.makehtml把list制作成可以聲明式的标簽，在render方法中就能直接使用該标簽。如下所示：
第3行，通過makehtml方法把元件制作成可以在render中使用的标簽。當然omi.makehtml('list', list);也可以寫在list元件的代碼下面。
第34行，在父元件上定義listdata屬性用來傳遞給子元件。
第34行，在render方法中使用list元件。其中name方法可以讓你在代碼裡通過this快速方法到該元件的執行個體。data="listdata"可以讓你把this.listdata傳遞給子元件。
需要注意的是，父元件的this.listdata會被通過object.assign淺拷貝到子元件。
這樣做的目的主要是希望以後dom的變更都盡量修改子元件自身的data，然後再調用其update方法，而不是去更改父元件的listdata。
關于omi元件通訊其實有4種方案，這個後續教程會專門來講。
<a href="http://alloyteam.github.io/omi/website/redirect.html?type=todo_nest" target="_blank">點選這裡→線上試試</a>
如果想更加友善的交流關于omi的一切可以加入qq的omi交流群(256426170)
