188c88e8eSopenharmony_ci<element name="name">
288c88e8eSopenharmony_ci    <template>
388c88e8eSopenharmony_ci        <div><text class="name">{{name}}</text></div>
488c88e8eSopenharmony_ci    </template>
588c88e8eSopenharmony_ci
688c88e8eSopenharmony_ci    <style>
788c88e8eSopenharmony_ci    .name {
888c88e8eSopenharmony_ci        font-size: 26px;
988c88e8eSopenharmony_ci        color: red;
1088c88e8eSopenharmony_ci    }
1188c88e8eSopenharmony_ci    </style>
1288c88e8eSopenharmony_ci
1388c88e8eSopenharmony_ci    <script>
1488c88e8eSopenharmony_ci    module.exports = {
1588c88e8eSopenharmony_ci        data: function() {
1688c88e8eSopenharmony_ci            return {
1788c88e8eSopenharmony_ci                name: ''
1888c88e8eSopenharmony_ci            }
1988c88e8eSopenharmony_ci        }
2088c88e8eSopenharmony_ci    }
2188c88e8eSopenharmony_ci    </script>
2288c88e8eSopenharmony_ci</element>
2388c88e8eSopenharmony_ci
2488c88e8eSopenharmony_ci<template>
2588c88e8eSopenharmony_ci    <div style="flex-direction: row;">
2688c88e8eSopenharmony_ci        <text class="hello">Hello</text>
2788c88e8eSopenharmony_ci        <name name="{{name}}"></name>
2888c88e8eSopenharmony_ci    </div>
2988c88e8eSopenharmony_ci</template>
3088c88e8eSopenharmony_ci
3188c88e8eSopenharmony_ci
3288c88e8eSopenharmony_ci<style>
3388c88e8eSopenharmony_ci.hello {
3488c88e8eSopenharmony_ci    font-size: 26px;
3588c88e8eSopenharmony_ci    color: green;
3688c88e8eSopenharmony_ci}
3788c88e8eSopenharmony_ci</style>
3888c88e8eSopenharmony_ci
3988c88e8eSopenharmony_ci
4088c88e8eSopenharmony_ci<script>
4188c88e8eSopenharmony_ciexport function data() {
4288c88e8eSopenharmony_ci    return {
4388c88e8eSopenharmony_ci        name: 'Weex'
4488c88e8eSopenharmony_ci    }
4588c88e8eSopenharmony_ci}
4688c88e8eSopenharmony_ci</script>