单语言片段模式定义组件

单语言片段模式定义组件为avm.js支持的两种编程模式之一，使用纯js即可完成组件的定义，或者页面的开发，开发风格类似于React。

使用JS定义一个组件 / 页面

JS组件 / 页面符合Web Components 规范，使用define函数进行组件定义，使用render函数渲染到终端。

定义组件：

// api-test.js:


avm.define('api-test', class extends Component {
    render() {
        return (
            <view>
                <text>Hello APP</text>
            </view>
        );
    }
});

添加样式：

avm.define('api-test', class extends Component {

    
    css(){
        return `.header {
            height: 45
        }`
    }

    
    render() {
        return (
            <view class='header'>
                <text>Hello APP</text>
            </view>
        );
    }
});

引入外部样式：

import commoncss from './assets/common.css';


avm.define('api-test', class extends Component {

    
    css(){
        return commoncss;
    }

    
    render() {
        return (
            <view class='header'>
                <text>Hello APP</text>
            </view>
        );
    }
});

数据绑定：

avm.define('api-test', class extends Component {

    
    data = {
        title: 'Hello APP'
    }

    
    css(){
        return `.header {
            height: 45
        }`
    }

    
    render() {
        return (
            <view class='header'>
                <text>{this.data.title}</text>
            </view>
        );
    }
});

在其他页面使用组件：

// app-index.js:


import './components/api-test.js';


avm.define('app-index', class extends Component {

    
    data = {
        title: 'Hello APP',
        errorState: false
    }

    
    css(){
        return `#app {   
            text-align: center;  
            color: #2c3e50;  
            margin-top: 60px;  
        }`;
    }

    
    render() {
        return (
            <view id="app">  
                <img src="./assets/logo.png" />  
                <api-test></api-test>
            </view>
        );
    }
});


avm.render(<app-index />);
//avm.render(<app-index />, 'body');
//avm.render(<app-index />, $('body'));