视图层

Light框架的视图层由Vue框架进行实现。

Vue框架处理视图的逻辑层和视图层，将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。

<template> 用于描述页面的结构。

<script> 逻辑层代码可以构建出页面的结构。

<style>用于描述页面的样式。H5项目可以直接使用less语法。

组件（Component）是视图的基本组成单元。

基本指令

数据绑定

<template>
    <div>
       <text>{{msg}}</text>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                msg:"hello,world"
            }
        }
    }
</script>
<style scoped >
</style>

列表渲染

<template>
    <div>
       <text v-for="(item,index) in items">{{item}}</text>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                items:['1','2','3']
            }
        }
    }
</script>
<style scoped >
</style>

条件渲染

<template>
    <div>
       <text v-if="showMe">show me</text>
       <text v-else>show anther</text>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                showMe:false
            }
        }
    }
</script>
<style scoped >
</style>

模板

<template>
    <div>
       <template>
            <text>hello template</text>
        </template>
    </div>
</template>
<script>
    export default {
        data(){
            return {
            }
        }
    }
</script>
<style scoped >
</style>