单文件（SFC）模式定义组件

单文件（SFC）模式定义组件为avm.js支持的两种编程模式之一，使用类Vue语法进行组件的定义，或者页面的开发，开发风格迎合Vue或者原生H5开发者。单文件方式定义的文件后缀名为.stml，因此也可以叫做stml组件。

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

stml组件兼容Vue单文件组件(SFC)规范，使用语义化的Html模板及对象化js风格定义组件或页面。stml最终被编译为JS组件 / 页面，渲染到不同终端。

定义组件：

// api-test.stml:


<template>  
    <view>
        <text>Hello APP</text>
    </view>  
</template>  
<script>
    export default {  
        name: 'api-test'
    }
</script>

添加样式：

<template>  
    <view class='header'>
        <text>Hello APP</text>
    </view>  
</template>  
<script>
    export default {  
        name: 'api-test'
    }
</script>
<style scoped>
    .header{
        height: 45px;
    }
</style>

数据绑定：

<template>  
    <view class='header'>
        <text>{this.data.title}</text>
    </view>  
</template>  
<script>
    export default {  
        name: 'api-test',
        data(){
            return {
                title: 'Hello APP'
            }
        }
    }
</script>
<style scoped>
    .header{
        height: 45px;
    }
</style>

在其他组件或者页面引用：

// app-index.stml:


<template>  
    <view class="app">  
        <img src="./assets/logo.png" />  
        <api-test></api-test> 
    </view>  
</template>
<script>
    import './components/api-test.stml'  

    
    export default {  
        name: 'app-index',  
        data: function () {  
            return {
                title: 'Hello APP'
            }
        }  
    }  
</script>  
<style>  
    .app {   
        text-align: center;  
        margin-top: 60px;  
    }  
</style>