# 视图层

# 视图的概念和定义

视图是light工程的一个十分重要的概念，也是light工程中最基本业务组织单元，是一条业务流程链路上的最小单位。

# 可配置属性

视图在light工程中，必须定义在index.html中，light提供了不同的属性来标识视图的特性。

属性	类型	说明
id	string	视图ID，关联了视图在路由层上的位置和资源树中文件的命名
home	boolean	定义当前视图是否为主视图，主视图是应用默认访问时打开的视图
parent	string	定义当前视图的父视图，主要用来处理嵌套关系，实现子父级路由
async	boolean	定义当前视图是否是异步视图，当异步视图时视图的资源不出现在应用默认访问的构件文件中而是随访问路径而加载
chunkname	string	定义当前异步视图编译后的文件名称，仅当async为true时生效

view标签除了支持上述内置属性外，还支持用户的自定义属性（不可使用上述内置属性以及 component,path,name 属性），可以在路由拦截器中的 from 或 to 的 meta 字段中查看。不允许在父视图上配置自定义属性。

# 父子视图

如果需要定义嵌套视图，可以采用如下的方式：这种方式定义了3个视图，其中demo是父视图，demo/a和demo/b分别是两个子视图，其中demo/a为当前应用的主视图，home属性可以不配置，默认以第一个视图为准，如果配置多个以最后一个home视图为准！

    <view id="demo"/>
    <view id="demo/a" parent="demo" home="true"/>
    <view id="demo/b" parent="demo"/>

配置完成后在demo视图增加<sub-view>，子视图会出现在<sub-view/>所在的位置。

<template>
    <div>
        Hello,World !
        <sub-view/>
    </div>
</template>
<script>
    export default {
        data(){
            return {};
        },
        props:[]
    }
</script>
<style lang="less">
</style>

# 视图开发

Light 的视图开发技术采用vue框架，在每一个视图中都可以使用vue的指令进行模型数据的绑定，将展现和数据解耦，大大提高了H5应用的开发效率，我们以一个初始工程创建的简单的vue视图文件为例，讲解在lighting中如何做页面模块的业务功能开发。

<template>
    <div>
        {{msg}}
    </div>
</template>
<script>
    export default {
        data(){
            return {
                msg:"hello,world!"
            };
        }
    }
</script>
<style lang="less">
</style>

# 声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统，使得数据和 DOM 被建立了关联，所有东西都是响应式的。修改msg属性的值会立即看到DOM中对应内容的改变！

除了文本插值，我们还可以像这样来绑定元素特性：

<template>
    <div>
       <span v-bind:title="message">
           鼠标悬停几秒钟查看此处动态绑定的提示信息！
       </span>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                message: '页面加载于 ' + new Date().toLocaleString()
            };
        },
        props:[]
    }
</script>
<style lang="less">
</style>

这里我们遇到了一点新东西。你看到的 v-bind 特性被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。

# 条件与循环

控制切换一个元素是否显示也相当简单：

<template>
    <div>
        <div id="app-3">
          <p v-if="seen">现在你看到我了</p>
        </div>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                seen: true
            };
        },
        props:[]
    }
</script>
<style lang="less">
</style>

这个例子演示了我们不仅可以把数据绑定到 DOM 文本或特性，还可以绑定到 DOM 结构。

还有其它很多指令，每个都有特殊的功能。例如，v-for 指令可以绑定数组的数据来渲染一个项目列表：

<template>
    <div>
        <div>
          <p v-for="info in list">{{info}}</p>
        </div>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                list: ['light','is','awesome']
            };
        },
        props:[]
    }
</script>
<style lang="less">
</style>

# 处理用户输入

为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法：

<template>
    <div>
        <p>{{ message }}</p>
        <button v-on:click="reverseMessage">逆转消息</button>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                message: 'Hello Vue.js!'
            };
        },
      methods: {
          reverseMessage: function () {
              this.message = this.message.split('').reverse().join('')
          }
      }
    }
</script>
<style lang="less">
</style>

注意在 reverseMessage 方法中，我们更新了应用的状态，但没有触碰 DOM——所有的 DOM 操作都由 Vue 来处理，你编写的代码只需要关注逻辑层面即可。

Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

<template>
    <div>
        <p>{{ message }}</p>
        <input v-model="message">
    </div>
</template>
<script>
    export default {
        data(){
            return {
                message: 'Hello Vue.js!'
            };
        },
    }
</script>
<style lang="less">
</style>

# 视图层

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>