视图层

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

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

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

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

<style>用于描述页面的样式。H5项目可以直接使用less语法,JSN项目只能使用标准css语法。

组件(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>