学习笔记三－－ViewModel选项

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u011774517/article/details/72830177

ViewModel选项
一、简介
组件的定义是通过一组选项来描述的，而这组选项总是被赋值给<script>中module.exports.
组件－－Weex页面是由组件以DOM树的方式构建出来的，Weex支持文字、图片、视频等内容型组件,也支持div、list、scroller等容器型组件，也包括slider、input、textarea、switch等特殊组件。

二、ViewModel中选项介绍
1、数据和方法－－data、methods
(1)data选项：这里是个函数,返回该视图模型可监听的数据对象
(2)method选项:包含所有视图模型的方法
最后，每个data或method属性将被代理到视图模型中，古可以通过this.x读写数据，通过this.doThis()调用方法。

module.exports = {

     data:function(){
         return {x:1,y:2}
      },

     methods:{
         doThis:function(){…..},
         doThat:function(){…..}
     }
    ……….

}

2、事件－－events
events选项允许开发者在视图模型被创建时注册自定义事件，然后events监听这些事件，通过函数类型的值处理它们

module.exports = {

   data:…..,

   methods:{
       foo:function(){
    …
    this.$emit(‘customtype1’,data)
       }
   },

   events:{
         customtype1:function(e){
               console.log(e.type,e.detail)
         }
   }
   ……..
}

3、生命周期
Weex视图模型支持生命周期的钩子函数，这些钩子函数能被写为组件选项：
－－init:在视图模型的构造函数开始调用时激活
－－created:当视图模型监听默认数据，但未编译模版时激活
－－ready:当视图模型监听默认数据并且编译模版生成虚拟DOM后激活

module.exports = {

     data:…,
    methods:…,
    init:function(){
        console.log(‘ViewModel constructor begins’)
      },
    created:function(){
       console.log(‘Data observation finished’)
    }
     ready：function(){
       console.log(‘Virtual DOM finished’)
    }


}

官网例子
1、data与methods的例子

<template>
  <div style="width:{{w}};height:{{h}};background-color:red;" onclick="update"></div>
</template>

<script>
  module.exports = {

   data:function(){

     return {w:750,h:200}

   },

   methods:{

     update:function(e){

       this.h += 200

     }

   }
  }
</script>

但是：将data选项中function去掉，直接食用w、h；以及将update函数function函数中参数e去掉，也可以达到效果。

<template>
  <div style="width:{{w}};height:{{h}};background-color:red;" onclick="update"></div>
</template>

<script>
  module.exports = {

    data:{
     w:750,h:200
    },

    methods:{
      update:function(){
        this.h += 200
      }
    }


  }
</script>