本页面演示如何使用avm.js语法的两种模式之一，单文件模式，定义一个页面或者组件，并渲染到终端。

使用单文件模式，stml文件定义一个组件 / 页面

 stml组件 / 页面符合Vue单文件组件(SFC)规范，最终被编译为JS组件 / 页面，渲染到不同终端。

定义页面或组件：

// api-test.stml:


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

添加样式：

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

数据绑定：

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

stml定义组件 / 页面在被编译为js组件过程中，会自动生成渲染代码。

API和模块使用

 avm.js兼容和继承APICloud所有API、模块、技术栈以及开发体验，因此，api以及模块的使用及调试方式遵循APICloud现有标准及习惯。

api对象使用：

<template>  
    <view class='header'>
        <text>{this.data.title}</text>
    </view>  
</template>  
<script>
    export default {  
        name: 'ApiTest',
        apiready(){
            api.toast({msg: '网络错误'});
            this.data.title = '网络错误';
        },
        data(){
            return {
                title: 'Hello APP'
            }
        }
    }
</script>
<style>
    .header{
        height: 45px;
    }
</style>

模块使用：

<template>  
    <view class='header'>
        <text>{this.data.title}</text>
    </view>  
</template>  
<script>
    export default {  
        name: 'ApiTest',
        apiready(){
            var mam = api.require('mam');
            mam.checkUpdate(function(ret, err){
                if (ret) {
                    api.toast({msg: '成功'});
                } else {
                    api.toast({msg: '失败'});
                }
            });
        },
        data(){
            return {
                title: 'Hello APP'
            }
        }
    }
</script>
<style>
    .header{
        height: 45px;
    }
</style>