單文件（SFC）模式定義組件

單文件（SFC）模式定義組件為avm.js支持的兩種編程模式之一，使用類Vue語法進(jìn)行組件的定義，或者頁面的開發(fā)，開發(fā)風(fēng)格迎合Vue或者原生H5開發(fā)者。單文件方式定義的文件后綴名為.stml，因此也可以叫做stml組件。

使用stml定義一個(gè)組件 / 頁面

stml組件兼容Vue單文件組件(SFC)規(guī)范，使用語義化的Html模板及對(duì)象化js風(fēng)格定義組件或頁面。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>

數(shù)據(jù)綁定：

<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>