Omi Hello World

Hello Omi

import Omi from 'omi';

class Hello extends Omi.Component {

    style () {
      return  `
          h1{
          	cursor:pointer;
          }`
    }
  
    handleClick(evt){
      alert(evt.target.innerHTML)
    }
  
    render() {
      return  `
      <div>
      	<h1 onclick="handleClick">Hello ,{{name}}!</h1>
      </div>`
    }
}

Omi.tag('hello', Hello)

class App extends Omi.Component {
    render() {
        return  `
        <div>
            <hello data-name="Omi"></hello> 
        </div>`
    }
}

Omi.render(new App(),"#container")

• 组件继承自Omi.Component，

• render返回的是组件HTML片段，一般带有指令或者模板语法

• style返回的是组件的CSS，是局部的，不会污染组件以外的

• 通过Omi.tag('hello', Hello)把组件变成可声明在其他组件中的标签，即:<hello></hello>

• 通过data-name="Omi"把传递给子组件hello，子组件直接在render里可以使用{{name}}来使用传递来的数据

• 通过onclick="handleClick"给HTML元素绑定事件，在handleClick回调中可以拿到event对象，即:handleClick(evt){ }

特别强调，Omi.tag是全局注册，只要一个地方注册了，其他地方可以省去注册的代码。

你也可以使用ES5的方式进行开发:

var Hello =  Omi.create("hello", {  
    style: function () {        return "h1{ cursor:pointer }"
    },  
    handleClick: function (evt) {        alert(evt.target.innerHTML)
    },  
    render: function () {        return ' <div>\                        <h1 onclick="handleClick">\                            Hello ,{{name}}!\                        </h1>\                </div>'
    }
});var App =  Omi.create("App", { 
    render: function () {        return '<div>\                    <hello data-name="Omi"></hello>\                </div>'
    }
  
});Omi.render(new App(),'#container')