学习笔记四－－数据绑定

mustache是javascript的模板引擎，模板引擎的作用是使用户界面和业务数据分离

1、数据绑定－－{{}}实现绑定
Weex使用mustache语法{{}}将<template>模板和<script>中的数据绑定。绑定后，script中数据修改回显示在template上。

2、数据绑定表达式－－支持简单的JavaScript表达式

<template>
  <div style = "flex-direction:row;">
    <text>{{firstName + '  ' + lastName}}</text>
  </div>
</template>


<script>
 module.exports = {
  data:{
    firstName :'Jone',
    lastName  : 'Smith'
  }
}
</script>

注意：变量赋值不是用“＝”，firstName：’Jone’

3、计算属性
（1）选项computed对计算属性fullName进行简单计算

<template>
  <div style = "flex-direction:row;">
    <text>{{fullName}}</text>
    <text onclick="changeName" style="margin-left:10">change name</text>
  </div>
</template>

<script>
  module.exports = {
    data:{
      firstName:'wan',
      lastName:'meme'
    },

    computed:{
      fullName:function(){
        return this.firstName + ' '+this.lastName
      }
    },

    methods:{
      changeName:function(){
        this.lastName = 'qiqi'
      }

    }

  }
</script>

（2）定义计算属性的get和set方法

<template>
  <div style = "flex-direction:row;">
    <text>{{fullName}}</text>
    <text onclick="changeName" style="margin-left:10;">change name</text>
  </div>
</template>

<script>
  module.exports = {

    data:{
      firstName:'Jone',
      lastName:'Anith'
    },

    computed:{
      fullName:{

       get:function(){
         return this.firstName+ ' '+this.lastName
       }, 

       set:function(e){
         var s = e.split(' ')
         this.firstName = s[0]
         this.lastName  = s[1]
       }

      }
    },
    methods:{
      changeName:function(){
        this.fullName = 'Terry King'

      }

    }



  }
</script>

注意：（1）split()函数，将内容分离为数组，此处e表示参数为fullName
（2）使用data选项中的变量时，使用组件实例的this访问，即“this.”来引用。

4、数据绑定在<template>中的特殊用法
样式：style或class
组件的样式能通过style特性绑定